/*!
 * This file is part of App Builder
 *
 * ©2020 App Builder - https://www.decsoftutils.com
 *//* Código CSS auto generado para la app */
html, body { width: 1280px; height: 720px; }
#cargaVistaIni { position: absolute; top: 0.00%; left: 1.88%; width: 100.00%; height: 100.00%; }
#labelEligeIdioma { position: absolute; top: 20.00%; left: 33.13%; width: 34.38%; height: 5.56%; }
#botonEspaniol { position: absolute; top: 34.44%; left: 42.50%; width: 15.63%; height: 8.89%; }
#botonIngles { position: absolute; top: 55.56%; left: 42.50%; width: 15.63%; height: 8.89%; }

#PantallaCarga { background-color: black; overflow: hidden; }
#versionCarga { position: absolute; top: 0.00%; left: 88.13%; width: 11.88%; height: 6.67%; }
#cargaVista { position: absolute; top: 0.00%; left: 1.88%; width: 100.00%; height: 100.00%; }
#imagenCargando { position: absolute; top: 34.44%; left: 42.50%; width: 15.00%; height: 26.67%; }
#precargaInicio { position: absolute; top: 0.00%; left: 0.00%; width: 50.00%; height: 94.44%; }
#precargaBotonReglas { position: absolute; top: 2.35%; left: 2.50%; width: 21.25%; height: 8.24%; }
#precargaBotonCategoria { position: absolute; top: 2.35%; left: 26.25%; width: 21.25%; height: 8.24%; }
#precargaBotonPuntuaciones { position: absolute; top: 2.35%; left: 50.00%; width: 21.25%; height: 8.24%; }
#precargaBotonNormal { position: absolute; top: 2.35%; left: 73.75%; width: 21.25%; height: 8.24%; }
#precargaBotonCerrar { position: absolute; top: 11.76%; left: 2.50%; width: 12.50%; height: 11.76%; }
#precargaContenedorPuntuaciones { position: absolute; top: 11.76%; left: 26.25%; width: 21.25%; height: 8.24%; }
#precargaContenedorReglas { position: absolute; top: 11.76%; left: 50.00%; width: 21.25%; height: 8.24%; }
#precargaOpcionCategoria { position: absolute; top: 11.76%; left: 73.75%; width: 21.25%; height: 8.24%; }
#precargaVentanaCategorias { position: absolute; top: 25.88%; left: 2.50%; width: 30.00%; height: 18.82%; }
#precargaVentanaEscapaste { position: absolute; top: 25.88%; left: 67.50%; width: 30.00%; height: 18.82%; }
#precargaVentanaReglas { position: absolute; top: 25.88%; left: 35.00%; width: 30.00%; height: 18.82%; }
#precargaMochila { position: absolute; top: 47.06%; left: 2.50%; width: 30.00%; height: 18.82%; }
#precargaLogros { position: absolute; top: 47.06%; left: 35.00%; width: 30.00%; height: 18.82%; }
#precargaJuego { position: absolute; top: 5.56%; left: 50.00%; width: 50.00%; height: 94.44%; }
#precargaReverso { position: absolute; top: 2.35%; left: 2.50%; width: 8.75%; height: 12.94%; }
#precargaTarot0 { position: absolute; top: 2.35%; left: 13.75%; width: 8.75%; height: 12.94%; }
#precargaTarot1 { position: absolute; top: 2.35%; left: 25.00%; width: 8.75%; height: 12.94%; }
#precargaTarot2 { position: absolute; top: 2.35%; left: 36.25%; width: 8.75%; height: 12.94%; }
#precargaTarot3 { position: absolute; top: 2.35%; left: 47.50%; width: 8.75%; height: 12.94%; }
#precargaTarot4 { position: absolute; top: 2.35%; left: 58.75%; width: 8.75%; height: 12.94%; }
#precargaTarot5 { position: absolute; top: 2.35%; left: 70.00%; width: 8.75%; height: 12.94%; }
#precargaTarot6 { position: absolute; top: 17.65%; left: 2.50%; width: 8.75%; height: 12.94%; }
#precargaTarot7 { position: absolute; top: 17.65%; left: 13.75%; width: 8.75%; height: 12.94%; }
#precargaTarot8 { position: absolute; top: 17.65%; left: 25.00%; width: 8.75%; height: 12.94%; }
#precargaTarot9 { position: absolute; top: 17.65%; left: 36.25%; width: 8.75%; height: 12.94%; }
#precargaTarot10 { position: absolute; top: 17.65%; left: 47.50%; width: 8.75%; height: 12.94%; }
#precargaTarot11 { position: absolute; top: 17.65%; left: 58.75%; width: 8.75%; height: 12.94%; }
#precargaTarot12 { position: absolute; top: 17.65%; left: 70.00%; width: 8.75%; height: 12.94%; }
#precargaTarot13 { position: absolute; top: 32.94%; left: 2.50%; width: 8.75%; height: 12.94%; }
#precargaTarot14 { position: absolute; top: 32.94%; left: 13.75%; width: 8.75%; height: 12.94%; }
#precargaTarot15 { position: absolute; top: 32.94%; left: 25.00%; width: 8.75%; height: 12.94%; }
#precargaTarot16 { position: absolute; top: 32.94%; left: 36.25%; width: 8.75%; height: 12.94%; }
#precargaTarot17 { position: absolute; top: 32.94%; left: 47.50%; width: 8.75%; height: 12.94%; }
#precargaTarot18 { position: absolute; top: 32.94%; left: 58.75%; width: 8.75%; height: 12.94%; }
#precargaTarot19 { position: absolute; top: 32.94%; left: 70.00%; width: 8.75%; height: 12.94%; }
#precargaTarot20 { position: absolute; top: 48.24%; left: 2.50%; width: 8.75%; height: 12.94%; }
#precargaTarot21 { position: absolute; top: 48.24%; left: 13.75%; width: 8.75%; height: 12.94%; }
#precargaTarotista { position: absolute; top: 63.53%; left: 2.50%; width: 22.50%; height: 14.12%; }
#precargaBotonTeclado { position: absolute; top: 2.35%; left: 85.00%; width: 8.75%; height: 4.71%; z-index: 2;}
#precargaTecla { position: absolute; top: 9.41%; left: 85.00%; width: 8.75%; height: 8.24%; }
#precargaTeclaLarga { position: absolute; top: 22.35%; left: 80.00%; width: 18.75%; height: 8.24%; }
#precargaTeclaIntro { position: absolute; top: 32.94%; left: 85.00%; width: 8.75%; height: 17.65%; }
#precargaTeclado { position: absolute; top: 52.94%; left: 80.00%; width: 18.75%; height: 8.24%; }
#precargaMarco { position: absolute; top: 63.53%; left: 33.75%; width: 25.00%; height: 14.12%; }
#precargaVistaTarot { position: absolute; top: 63.53%; left: 65.00%; width: 31.25%; height: 14.12%; }
#preCargaAyudante { position: absolute; top: 81.18%; left: 2.50%; width: 20.00%; height: 15.29%; opacity: 0.3;}
#precargaMApa { position: absolute; top: 82.35%; left: 20.00%; width: 15.00%; height: 15.29%; }
#precargaVistaJuego { position: absolute; top: 82.35%; left: 65.00%; width: 31.25%; height: 14.12%; }

#tituloJuego { position: absolute; top: 3.33%; left: 6.25%; width: 87.50%; height: 18.89%; }
#ambienteInicio { position: absolute; top: 103.33%; left: 2.50%; width: 14.37%; height: 5.56%; }
#textoCategoria { position: absolute; top: 76.67%; left: 73.13%; width: 25.00%; height: 15.56%; }
#vesionIntro { position: absolute; top: 0.00%; left: 88.13%; width: 11.88%; height: 6.67%; }
#layerCategorias { position: absolute; top: 0.00%; left: 101.88%; width: 100.00%; height: 100.00%; }
#btnCategoria1 { position: absolute; top: 12.22%; left: 13.75%; width: 23.75%; height: 12.22%; }
#btnCategoria2 { position: absolute; top: 12.22%; left: 61.25%; width: 23.75%; height: 12.22%; }
#btnCategoria3 { position: absolute; top: 30.00%; left: 13.75%; width: 23.75%; height: 12.22%; }
#btnCategoria4 { position: absolute; top: 30.00%; left: 61.25%; width: 23.75%; height: 12.22%; }
#btnCategoria5 { position: absolute; top: 47.78%; left: 13.75%; width: 23.75%; height: 12.22%; }
#btnCategoria6 { position: absolute; top: 47.78%; left: 61.25%; width: 23.75%; height: 12.22%; }
#btnCategoria7 { position: absolute; top: 66.67%; left: 13.75%; width: 23.75%; height: 12.22%; }
#btnCategoria8 { position: absolute; top: 66.67%; left: 61.25%; width: 23.75%; height: 12.22%; }
#btnCategoria9 { position: absolute; top: 85.56%; left: 13.75%; width: 23.75%; height: 12.22%; }
#btnCategoria10 { position: absolute; top: 85.56%; left: 61.25%; width: 23.75%; height: 12.22%; }
#btnCategoriaVariadas { position: absolute; top: 0.00%; left: 37.50%; width: 23.75%; height: 12.22%; }
#BotonPuntuaciones { position: absolute; top: 42.22%; left: 57.50%; width: 14.37%; height: 11.11%; }
#botonJugar { position: absolute; top: 42.22%; left: 28.13%; width: 14.37%; height: 11.11%; }
#botonReglas { position: absolute; top: 78.89%; left: 14.37%; width: 14.37%; height: 6.67%; }
#sonidosInicio { position: absolute; top: 103.33%; left: 20.00%; width: 14.37%; height: 5.56%; }
#cerrarJuego { position: absolute; top: 1.11%; left: 0.63%; width: 5.63%; height: 10.00%; }

#mascaraNoHover { position: absolute; top: 37.78%; left: 1.88%; width: 95.63%; height: 47.78%; z-index: 10;}
#introMeep { position: absolute; top: 8.89%; left: 1.88%; width: 17.50%; height: 31.11%; opacity: 0.3;}
#sonidosIntro { position: absolute; top: 102.22%; left: 2.50%; width: 14.37%; height: 7.78%; }
#ambienteIntro { position: absolute; top: 102.22%; left: 35.00%; width: 14.37%; height: 7.78%; }
#textoIntroMeep { position: absolute; top: 10.00%; left: 15.00%; width: 65.63%; height: 18.89%; }
#contenedorIntro { position: absolute; top: 44.44%; left: 2.50%; width: 94.38%; height: 34.44%; }
#ejemploRio { position: absolute; top: 32.26%; left: 5.30%; width: 7.95%; height: 35.48%; }
#personajeIntro { position: absolute; top: 32.26%; left: 18.54%; width: 7.95%; height: 35.48%; }
#monstruoIntro { position: absolute; top: 32.26%; left: 31.13%; width: 7.95%; height: 35.48%; }
#dineroIntro { position: absolute; top: 19.35%; left: 45.70%; width: 11.26%; height: 58.06%; }
#contenedorHadasIntro { position: absolute; top: 19.35%; left: 64.24%; width: 11.92%; height: 58.06%; max-height: 200px; max-width: 200px; min-height: 200px; min-width: 200px;}
#energiaIntro { position: absolute; top: 33.33%; left: 33.33%; width: 33.33%; height: 33.33%; }
#agotadoIntro { position: absolute; top: 0.00%; left: 66.67%; width: 33.33%; height: 33.33%; }
#luzIntro { position: absolute; top: 0.00%; left: 0.00%; width: 33.33%; height: 33.33%; }
#fuegoIntro { position: absolute; top: 66.67%; left: 0.00%; width: 33.33%; height: 33.33%; }
#aguaIntro { position: absolute; top: 66.67%; left: 66.67%; width: 33.33%; height: 33.33%; }
#introDesvio { position: absolute; top: 32.26%; left: 86.09%; width: 7.95%; height: 35.48%; }
#versionTutorial { position: absolute; top: 0.00%; left: 88.13%; width: 11.88%; height: 6.67%; }
#BotonIntro { position: absolute; top: 86.67%; left: 42.50%; width: 14.37%; height: 6.67%; }

#imagenMapa { position: absolute; top: 1.11%; left: 85.00%; width: 13.75%; height: 97.78%; }
#ContenedorMapa { position: absolute; top: 2.22%; left: 85.00%; width: 13.75%; height: 95.56%; }
#IndicadorPremio16 { position: absolute; top: 9.30%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio15 { position: absolute; top: 13.95%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio14 { position: absolute; top: 18.60%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio13 { position: absolute; top: 23.26%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio12 { position: absolute; top: 27.91%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio11 { position: absolute; top: 32.56%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio10 { position: absolute; top: 37.21%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio9 { position: absolute; top: 41.86%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio8 { position: absolute; top: 46.51%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio7 { position: absolute; top: 51.16%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio6 { position: absolute; top: 55.81%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio5 { position: absolute; top: 60.47%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio4 { position: absolute; top: 65.12%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio3 { position: absolute; top: 69.77%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio2 { position: absolute; top: 74.42%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio1 { position: absolute; top: 79.07%; left: 40.91%; width: 18.18%; height: 4.65%; }
#IndicadorPremio0 { position: absolute; top: 83.72%; left: 40.91%; width: 18.18%; height: 4.65%; }
#ayudanteMeep { position: absolute; top: 15.56%; left: 3.75%; width: 10.00%; height: 20.00%; opacity: 0.3;}
#preguntaTexto { position: absolute; top: 42.22%; left: 11.88%; width: 51.25%; height: 22.22%; }
#opcion1 { position: absolute; top: 67.78%; left: 12.50%; width: 23.75%; height: 12.22%; max-width: 30%;}
#opcion2 { position: absolute; top: 67.78%; left: 38.13%; width: 24.38%; height: 12.22%; }
#opcion3 { position: absolute; top: 83.33%; left: 12.50%; width: 23.75%; height: 12.22%; }
#opcion4 { position: absolute; top: 83.33%; left: 38.13%; width: 24.38%; height: 12.22%; }
#ambienteBosque { position: absolute; top: 101.11%; left: 71.88%; width: 12.50%; height: 5.56%; }
#textoInfos { position: absolute; top: 15.56%; left: 11.88%; width: 51.88%; height: 14.44%; }
#dineroMochila { position: absolute; top: 71.11%; left: 68.13%; width: 11.25%; height: 20.00%; }
#sonidosVarios { position: absolute; top: 101.11%; left: 86.25%; width: 12.50%; height: 5.56%; }
#sonidosVarios2 { position: absolute; top: 107.78%; left: 86.25%; width: 12.50%; height: 5.56%; }
#textoPistas { position: absolute; top: 33.33%; left: 15.00%; width: 46.25%; height: 4.72%; }
#contenedorHadasJuego { position: absolute; top: 42.22%; left: 68.13%; width: 11.25%; height: 20.00%; }
#energia { position: absolute; top: 38.89%; left: 33.33%; width: 33.33%; height: 33.33%; }
#espirituLuz { position: absolute; top: 0.00%; left: 33.33%; width: 33.33%; height: 33.33%; }
#espirituFuego { position: absolute; top: 66.67%; left: 0.00%; width: 33.33%; height: 33.33%; }
#espirituAgua { position: absolute; top: 66.67%; left: 66.67%; width: 33.33%; height: 33.33%; }
#versionVentanaJuego { position: absolute; top: 0.00%; left: 88.13%; width: 11.88%; height: 6.67%; }
#layerBienvenida { position: absolute; top: 114.44%; left: 0.00%; width: 100.00%; height: 100.00%; }
#mensajeBienvenida { position: absolute; top: 11.11%; left: 8.13%; width: 82.50%; height: 20.00%; }
#labelNombre { position: absolute; top: 33.33%; left: 39.38%; width: 20.00%; height: 2.78%; text-align: center;}
#contenedorInput { position: absolute; top: 36.67%; left: 20.63%; width: 57.50%; height: 6.67%; }
#inputNom { position: absolute; top: 0.00%; left: 0.00%; width: 100.00%; height: 100.00%; }
#botonTeclado { position: absolute; top: 16.67%; left: 91.30%; width: 7.61%; height: 66.67%; z-index: 2;}
#mensajeErrorNom { position: absolute; top: 44.44%; left: 20.63%; width: 57.50%; height: 5.56%; color: transparent; font-weight: bold;}
#botonesBienvenida { position: absolute; top: 63.33%; left: 8.13%; width: 82.50%; height: 18.89%; }
#btnInicio { position: absolute; top: 35.29%; left: 13.64%; width: 12.88%; height: 35.29%; }
#btnTutorial { position: absolute; top: 35.29%; left: 43.18%; width: 12.88%; height: 35.29%; }
#btnVolverBienvenida { position: absolute; top: 35.29%; left: 74.24%; width: 12.88%; height: 35.29%; }
#tecladoInterno { position: absolute; top: 0.00%; left: 17.50%; width: 63.13%; height: 41.11%; }
#Tecla1 { position: absolute; top: 8.11%; left: 2.97%; width: 6.93%; height: 18.92%; }
#Tecla2 { position: absolute; top: 8.11%; left: 10.89%; width: 6.93%; height: 18.92%; }
#Tecla3 { position: absolute; top: 8.11%; left: 18.81%; width: 6.93%; height: 18.92%; }
#Tecla4 { position: absolute; top: 8.11%; left: 26.73%; width: 6.93%; height: 18.92%; }
#Tecla5 { position: absolute; top: 8.11%; left: 34.65%; width: 6.93%; height: 18.92%; }
#Tecla6 { position: absolute; top: 8.11%; left: 42.57%; width: 6.93%; height: 18.92%; }
#Tecla7 { position: absolute; top: 8.11%; left: 50.50%; width: 6.93%; height: 18.92%; }
#Tecla8 { position: absolute; top: 8.11%; left: 58.42%; width: 6.93%; height: 18.92%; }
#Tecla9 { position: absolute; top: 8.11%; left: 66.34%; width: 6.93%; height: 18.92%; }
#Tecla0 { position: absolute; top: 8.11%; left: 74.26%; width: 6.93%; height: 18.92%; }
#TeclaBorrar { position: absolute; top: 8.11%; left: 82.18%; width: 14.85%; height: 18.92%; }
#TeclaQ { position: absolute; top: 29.73%; left: 2.97%; width: 6.93%; height: 18.92%; }
#TeclaW { position: absolute; top: 29.73%; left: 10.89%; width: 6.93%; height: 18.92%; }
#TeclaE { position: absolute; top: 29.73%; left: 18.81%; width: 6.93%; height: 18.92%; }
#TeclaR { position: absolute; top: 29.73%; left: 26.73%; width: 6.93%; height: 18.92%; }
#TeclaT { position: absolute; top: 29.73%; left: 34.65%; width: 6.93%; height: 18.92%; }
#TeclaY { position: absolute; top: 29.73%; left: 42.57%; width: 6.93%; height: 18.92%; }
#TeclaU { position: absolute; top: 29.73%; left: 50.50%; width: 6.93%; height: 18.92%; }
#TeclaI { position: absolute; top: 29.73%; left: 58.42%; width: 6.93%; height: 18.92%; }
#TeclaO { position: absolute; top: 29.73%; left: 66.34%; width: 6.93%; height: 18.92%; }
#TeclaP { position: absolute; top: 29.73%; left: 74.26%; width: 6.93%; height: 18.92%; }
#TeclaGuion { position: absolute; top: 29.73%; left: 82.18%; width: 6.93%; height: 18.92%; }
#TeclaIntro { position: absolute; top: 29.73%; left: 90.10%; width: 6.93%; height: 40.54%; }
#TeclaA { position: absolute; top: 51.35%; left: 2.97%; width: 6.93%; height: 18.92%; }
#TeclaS { position: absolute; top: 51.35%; left: 10.89%; width: 6.93%; height: 18.92%; }
#TeclaD { position: absolute; top: 51.35%; left: 18.81%; width: 6.93%; height: 18.92%; }
#TeclaF { position: absolute; top: 51.35%; left: 26.73%; width: 6.93%; height: 18.92%; }
#TeclaG { position: absolute; top: 51.35%; left: 34.65%; width: 6.93%; height: 18.92%; }
#TeclaH { position: absolute; top: 51.35%; left: 42.57%; width: 6.93%; height: 18.92%; }
#TeclaJ { position: absolute; top: 51.35%; left: 50.50%; width: 6.93%; height: 18.92%; }
#TeclaK { position: absolute; top: 51.35%; left: 58.42%; width: 6.93%; height: 18.92%; }
#TeclaL { position: absolute; top: 51.35%; left: 66.34%; width: 6.93%; height: 18.92%; }
#TeclaEnie { position: absolute; top: 51.35%; left: 74.26%; width: 6.93%; height: 18.92%; }
#TeclaTilde { position: absolute; top: 51.35%; left: 82.18%; width: 6.93%; height: 18.92%; }
#TeclaMayus { position: absolute; top: 72.97%; left: 2.97%; width: 14.85%; height: 18.92%; }
#TeclaZ { position: absolute; top: 72.97%; left: 18.81%; width: 6.93%; height: 18.92%; }
#TeclaX { position: absolute; top: 72.97%; left: 26.73%; width: 6.93%; height: 18.92%; }
#TeclaC { position: absolute; top: 72.97%; left: 34.65%; width: 6.93%; height: 18.92%; }
#TeclaEspacio { position: absolute; top: 72.97%; left: 42.57%; width: 14.85%; height: 18.92%; }
#TeclaV { position: absolute; top: 72.97%; left: 58.42%; width: 6.93%; height: 18.92%; }
#TeclaB { position: absolute; top: 72.97%; left: 66.34%; width: 6.93%; height: 18.92%; }
#TeclaN { position: absolute; top: 72.97%; left: 74.26%; width: 6.93%; height: 18.92%; }
#TeclaM { position: absolute; top: 72.97%; left: 82.18%; width: 6.93%; height: 18.92%; }
#TeclaCerrarTeclado { position: absolute; top: 72.97%; left: 90.10%; width: 6.93%; height: 18.92%; }
#layerSiguiente { position: absolute; top: 0.00%; left: 101.88%; width: 100.00%; height: 100.00%; }
#textoSiguiente { position: absolute; top: 22.22%; left: 14.37%; width: 71.25%; height: 21.11%; }
#btnCorto { position: absolute; top: 63.33%; left: 26.25%; width: 8.75%; height: 11.11%; }
#btnHuir { position: absolute; top: 63.33%; left: 51.88%; width: 8.75%; height: 11.11%; }
#btnLargo { position: absolute; top: 63.33%; left: 77.50%; width: 8.75%; height: 11.11%; }
#btnSeguir { position: absolute; top: 52.22%; left: 43.75%; width: 12.50%; height: 11.11%; }
#btnEscapar { position: absolute; top: 74.44%; left: 43.75%; width: 12.50%; height: 11.11%; }
#layerBueno { position: absolute; top: 206.67%; left: 101.88%; width: 100.00%; height: 100.00%; }
#enunciadoBueno { position: absolute; top: 57.78%; left: 19.38%; width: 61.25%; height: 22.22%; }
#alegrarse { position: absolute; top: 80.00%; left: 43.75%; width: 12.50%; height: 8.89%; }
#marcoBueno { position: absolute; top: 0.00%; left: 25.62%; width: 48.75%; height: 57.78%; z-index: 2;}
#imagenEventoBueno { position: absolute; top: 8.89%; left: 30.63%; width: 38.75%; height: 40.00%; background-size: cover; background-repeat: no-repeat; background-position: center center;}
#layerMalo { position: absolute; top: 310.00%; left: 101.88%; width: 100.00%; height: 100.00%; }
#enunciadoMalo { position: absolute; top: 54.44%; left: 19.38%; width: 61.25%; height: 22.22%; }
#lamentarse { position: absolute; top: 80.00%; left: 43.75%; width: 12.50%; height: 8.89%; }
#marcoMalo { position: absolute; top: 2.22%; left: 25.62%; width: 48.75%; height: 52.22%; z-index: 2;}
#imagenEventoMalo { position: absolute; top: 10.00%; left: 30.63%; width: 38.75%; height: 36.67%; background-size: cover; background-repeat: no-repeat; background-position: center center;}
#layerNeutral { position: absolute; top: 103.33%; left: 101.88%; width: 100.00%; height: 100.00%; }
#neutralActual { position: absolute; top: 54.44%; left: 19.38%; width: 61.25%; height: 22.22%; }
#marco { position: absolute; top: 1.11%; left: 25.62%; width: 48.75%; height: 54.44%; z-index: 2;}
#personajeEvento { position: absolute; top: 8.89%; left: 30.63%; width: 38.75%; height: 37.78%; background-size: cover; background-repeat: no-repeat; background-position: center center;}
#contenedorEvento { position: absolute; top: 77.78%; left: 19.38%; width: 61.25%; height: 13.33%; }
#opcion1neutral { position: absolute; top: 16.67%; left: 13.27%; width: 21.43%; height: 66.67%; }
#opcion2neutral { position: absolute; top: 16.67%; left: 65.31%; width: 21.43%; height: 66.67%; }
#imagenTapon { position: absolute; top: 3.33%; left: 19.38%; width: 43.13%; height: 6.67%; }
#barraTiempo { position: absolute; top: 3.33%; left: 19.38%; width: 43.13%; height: 6.67%; background-color: rgba(232, 226, 229, 0.2); border-radius: 50px; max-height: 64px; min-height: 64px;}
#tiempo { position: absolute; top: 3.33%; left: 33.75%; width: 14.37%; height: 6.67%; }
#botonRendirse { position: absolute; top: 3.33%; left: 3.75%; width: 10.00%; height: 6.67%; }
#aventureroLegendario { position: absolute; top: 40.00%; left: 4.38%; width: 3.75%; height: 6.39%; }
#indicadorBayas { position: absolute; top: 51.11%; left: 6.88%; width: 3.75%; height: 6.67%; }
#indicadorComido { position: absolute; top: 51.11%; left: 1.25%; width: 3.75%; height: 6.67%; }
#sirvienteOberon { position: absolute; top: 81.11%; left: 1.25%; width: 3.75%; height: 6.67%; }
#sirvienteTitania { position: absolute; top: 81.11%; left: 6.88%; width: 3.75%; height: 6.67%; }
#espirituHeroina { position: absolute; top: 91.11%; left: 1.25%; width: 3.75%; height: 6.67%; }
#jugueteNinio { position: absolute; top: 91.11%; left: 6.88%; width: 3.75%; height: 6.67%; }
#estrellaPrincesa { position: absolute; top: 61.11%; left: 1.25%; width: 3.75%; height: 6.67%; }
#ojoVerdadero { position: absolute; top: 71.11%; left: 1.25%; width: 3.75%; height: 6.67%; }
#efectoMana { position: absolute; top: 16.67%; left: 65.00%; width: 11.25%; height: 2.22%; }
#efectoSangre { position: absolute; top: 18.89%; left: 65.00%; width: 11.25%; height: 2.22%; }
#efectoVeneno { position: absolute; top: 21.11%; left: 65.00%; width: 11.25%; height: 2.22%; }
#niebla { position: absolute; top: 23.33%; left: 65.00%; width: 11.25%; height: 2.22%; }
#llamaPiromano { position: absolute; top: 61.11%; left: 6.88%; width: 3.75%; height: 6.67%; }
#reliquiaAngel { position: absolute; top: 71.11%; left: 6.88%; width: 3.75%; height: 6.67%; }
#layerTarot { position: absolute; top: 217.78%; left: 0.00%; width: 100.00%; height: 100.00%; }
#contenedorTarotista { position: absolute; top: 1.11%; left: 8.13%; width: 83.75%; height: 44.44%; }
#dineroTarot { position: absolute; top: 35.00%; left: 80.60%; width: 13.43%; height: 45.00%; }
#precioTarot { position: absolute; top: 52.50%; left: 5.22%; width: 17.16%; height: 19.38%; }
#marcoTarotista { position: absolute; top: 0.00%; left: 29.10%; width: 41.79%; height: 100.00%; z-index: 3;}
#tarotista { position: absolute; top: 15.00%; left: 33.58%; width: 32.84%; height: 70.00%; z-index: 2;}
#textoTarotista { position: absolute; top: 45.56%; left: 8.13%; width: 83.75%; height: 10.00%; }
#contenedorCartas { position: absolute; top: 55.56%; left: 8.13%; width: 83.75%; height: 28.89%; }
#asdasfasf { position: absolute; top: 3.85%; left: 2.99%; width: 11.94%; height: 80.77%; }
#asfasdfasd { position: absolute; top: 3.85%; left: 44.03%; width: 11.94%; height: 80.77%; }
#asfasda { position: absolute; top: 3.85%; left: 85.07%; width: 11.94%; height: 80.77%; }
#cartaTarot1 { position: absolute; top: 3.85%; left: 2.99%; width: 11.94%; height: 92.31%; }
#cartaTarot2 { position: absolute; top: 3.85%; left: 44.03%; width: 11.94%; height: 92.31%; }
#cartaTarot3 { position: absolute; top: 3.85%; left: 85.07%; width: 11.94%; height: 92.31%; }
#Container2 { position: absolute; top: 85.56%; left: 8.13%; width: 83.75%; height: 13.33%; }
#botonTerminar { position: absolute; top: 16.67%; left: 43.28%; width: 13.43%; height: 66.67%; }
#relojArtificiero { position: absolute; top: 3.33%; left: 71.88%; width: 3.75%; height: 6.67%; }
#solBrillante { position: absolute; top: 25.56%; left: 65.00%; width: 11.25%; height: 2.22%; }
#contenedorEncuentrosPre { position: absolute; top: 321.11%; left: 0.00%; width: 100.00%; height: 94.44%; }
#preAngel { position: absolute; top: 2.35%; left: 2.50%; width: 11.25%; height: 29.41%; }
#Image3 { position: absolute; top: 2.35%; left: 14.37%; width: 11.25%; height: 29.41%; }
#Image4 { position: absolute; top: 2.35%; left: 26.25%; width: 11.25%; height: 29.41%; }
#Image5 { position: absolute; top: 2.35%; left: 38.13%; width: 11.25%; height: 29.41%; }
#Image6 { position: absolute; top: 2.35%; left: 50.00%; width: 11.25%; height: 29.41%; }
#Image7 { position: absolute; top: 2.35%; left: 61.88%; width: 11.25%; height: 29.41%; }
#Image8 { position: absolute; top: 2.35%; left: 73.75%; width: 11.25%; height: 29.41%; }
#Image12 { position: absolute; top: 2.35%; left: 85.63%; width: 11.25%; height: 29.41%; }
#Image13 { position: absolute; top: 34.12%; left: 2.50%; width: 11.25%; height: 29.41%; }
#Image16 { position: absolute; top: 34.12%; left: 14.37%; width: 11.25%; height: 29.41%; }
#Image17 { position: absolute; top: 34.12%; left: 26.25%; width: 11.25%; height: 29.41%; }
#Image18 { position: absolute; top: 34.12%; left: 38.13%; width: 11.25%; height: 29.41%; }
#Image19 { position: absolute; top: 34.12%; left: 50.00%; width: 11.25%; height: 29.41%; }
#Image20 { position: absolute; top: 34.12%; left: 61.88%; width: 11.25%; height: 29.41%; }
#Image22 { position: absolute; top: 34.12%; left: 73.75%; width: 11.25%; height: 29.41%; }
#Image24 { position: absolute; top: 65.88%; left: 2.50%; width: 23.13%; height: 29.41%; }
#Image25 { position: absolute; top: 65.88%; left: 26.25%; width: 23.13%; height: 29.41%; }
#Image26 { position: absolute; top: 65.88%; left: 50.00%; width: 23.13%; height: 29.41%; }

#listaReglas { position: absolute; top: 15.56%; left: 10.63%; width: 79.38%; height: 54.44%; }
#ambienteReglas { position: absolute; top: 103.33%; left: 1.88%; width: 14.37%; height: 5.56%; }
#maullidoReglas { position: absolute; top: 111.11%; left: 1.88%; width: 14.37%; height: 5.56%; }
#versionReglas { position: absolute; top: 0.00%; left: 88.13%; width: 11.88%; height: 6.67%; }
#volver { position: absolute; top: 85.56%; left: 46.25%; width: 11.25%; height: 6.67%; }

#contenedorPuntuaciones { position: absolute; top: 2.22%; left: 2.50%; width: 95.00%; height: 81.11%; }
#listadoPuntuaciones { position: absolute; top: 5.48%; left: 2.63%; width: 94.74%; height: 89.04%; }
#versionPuntuaciones { position: absolute; top: 0.00%; left: 88.13%; width: 11.88%; height: 6.67%; }
#botonVolverPuntuaciones { position: absolute; top: 86.67%; left: 45.00%; width: 10.00%; height: 6.67%; }
#ambientePuntuaciones { position: absolute; top: 103.33%; left: 1.88%; width: 14.37%; height: 5.56%; }

#LabelModal { position: absolute; top: 32.22%; left: 22.50%; width: 55.00%; height: 23.33%; }
#versionCazado { position: absolute; top: 0.00%; left: 88.13%; width: 11.88%; height: 6.67%; }
#contenedorGlitch { position: absolute; top: 58.89%; left: 42.50%; width: 15.00%; height: 13.33%; }
#volverCazado { position: absolute; top: 81.11%; left: 42.50%; width: 15.00%; height: 11.11%; }

#contenedorLogros { position: absolute; top: 2.22%; left: 2.50%; width: 93.75%; height: 83.33%; }
#subContenedorLogros { position: absolute; top: 2.67%; left: 2.00%; width: 96.00%; height: 94.67%; }
#imagenSanador { position: absolute; top: 0.00%; left: 4.86%; width: 4.86%; height: 9.86%; }
#logroSanador { position: absolute; top: 0.00%; left: 22.22%; width: 75.00%; height: 9.86%; }
#Image1 { position: absolute; top: 9.86%; left: 4.86%; width: 4.86%; height: 9.86%; }
#logroGuardian { position: absolute; top: 9.86%; left: 22.22%; width: 75.00%; height: 9.86%; }
#imagenPrincesa { position: absolute; top: 19.72%; left: 4.86%; width: 4.86%; height: 9.86%; }
#logroPrincesa { position: absolute; top: 19.72%; left: 22.22%; width: 75.00%; height: 9.86%; }
#imagenNinio { position: absolute; top: 29.58%; left: 4.86%; width: 4.86%; height: 9.86%; }
#logroNinio { position: absolute; top: 29.58%; left: 22.22%; width: 75.00%; height: 9.86%; }
#imagenHeroina { position: absolute; top: 39.44%; left: 4.86%; width: 4.86%; height: 9.86%; }
#logroHeroina { position: absolute; top: 39.44%; left: 22.22%; width: 75.00%; height: 9.86%; }
#imagenPiromano { position: absolute; top: 49.30%; left: 4.86%; width: 4.86%; height: 9.86%; }
#logroPiromano { position: absolute; top: 49.30%; left: 22.22%; width: 75.00%; height: 9.86%; }
#imagenAngel { position: absolute; top: 59.15%; left: 4.86%; width: 4.86%; height: 9.86%; }
#logroAngel { position: absolute; top: 59.15%; left: 22.22%; width: 75.00%; height: 9.86%; }
#imagenHadas { position: absolute; top: 69.01%; left: 4.86%; width: 4.86%; height: 9.86%; }
#logroHadas { position: absolute; top: 69.01%; left: 22.22%; width: 75.00%; height: 9.86%; }
#imagenArtificiero { position: absolute; top: 78.87%; left: 4.86%; width: 4.86%; height: 9.86%; }
#logroArtificiero { position: absolute; top: 78.87%; left: 22.22%; width: 75.00%; height: 9.86%; }
#imagenPareja { position: absolute; top: 88.73%; left: 4.86%; width: 4.86%; height: 9.86%; }
#logroPareja { position: absolute; top: 88.73%; left: 22.22%; width: 75.00%; height: 9.86%; }
#ambienteLogros { position: absolute; top: 102.22%; left: 2.50%; width: 14.37%; height: 5.56%; }
#versionLogros { position: absolute; top: 0.00%; left: 88.13%; width: 11.88%; height: 6.67%; }
#BotonTaberna { position: absolute; top: 87.78%; left: 44.38%; width: 11.25%; height: 7.78%; }

#textoTaberna { position: absolute; top: 23.33%; left: 8.75%; width: 81.25%; height: 20.00%; }
#ambienteTaberna { position: absolute; top: 103.33%; left: 1.88%; width: 14.37%; height: 5.56%; }
#versionTaberna { position: absolute; top: 0.00%; left: 88.13%; width: 11.88%; height: 6.67%; }
#botonVolverTaberna { position: absolute; top: 73.33%; left: 45.00%; width: 10.00%; height: 6.67%; }
/* Código CSS "inline" de la app *//*  Css
    Orden del documento:
    Fuentes, Keyframes y Globales
    Por vista de la app:
    Inicio, Categorias, Reglas, Puntuaciones, Intro
    Bienvenida, Juego, Siguiente, Bueno, Evento
    Cazado, Logros, Taberna
*/


/* **************************************************************************************************************************************************************************************************************** */
/* Fuentes */
@font-face {
    font-family: Bloody;
    src: url('../files/BloodyTerror.ttf');
}
@font-face {
    font-family: Twisted;
    src: url('../files/retorcido.ttf');
}

@font-face {
    font-family: Tavern New;
    src: url('../files/tavern.otf');
}

@font-face {
    font-family: Escapaste;
    src: url('../files/escapaste.otf');
}



/* **************************************************************************************************************************************************************************************************************** */
/* Keyframes https://freefrontend.com/ para ayudas */


@keyframes efectoCapasGlitch1 {
    0% { clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%); }
    10% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
    20% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
    30% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
    40% { clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%); }
    50% { clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%); }
    60% { clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%); }
    70% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
    80% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
    90% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
    100% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); }
}
@keyframes efectoCapasGlitch2 {
    0% { clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%); }
    15% { clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); }
    25% { clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%); }
    30% { clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); }
    45% { clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%); }
    50% { clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%); }
    65% { clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); }
    75% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
    80% { clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%); }
    95% { clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%); }
    100% { clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%); }
}
@keyframes efectoCapasGlitchFlash {
    0% { opacity: 0.2; }
    30%, 100% { opacity: 0; }
}

@keyframes glitchVibrar {
    0% {
        top: 0;
        left: 0;
        filter: hue-rotate(0deg);
    }
    10% { left: 5px; }
    20% { left: -5px; }
    30% { left: 15px; }
    40% { left: 5px; }
    50% { left: -25px; }
    60% { left: -50px; }
    70% {
        top: -20px;
        left: 0;
    }
    80% {
        top: -20px;
        left: -60px;
    }
    81% {
        top: 0;
        left: 0;
    }
    100% {
        top: 0;
        left: 0;
        filter: hue-rotate(360deg);
    }
}

@keyframes ataqueCazado {
  0% { transform: scale(1); }
  10%, 20% {transform: scale(1.1); }
  30%, 50%, 70%, 90% { transform: scale(1.15); }
  40%, 60%, 80% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes moverLiquido {
  0% { /* https://www.plantcss.com/ para el clip path */
    clip-path: polygon(
      100% 100%, 0.00% 100%, 0.00% 0.00%, 100% 0.00%, calc(100% - 1px) 10%, calc(100% - 2px) 20%, calc(100% - 3px) 30%, calc(100% - 4px) 40.00%,
      calc(100% - 4px) 50%, calc(100% - 4px) 60%, calc(100% - 3px) 70%, calc(100% - 2px) 80%, calc(100% - 1px) 90%
    );
  }
  50% {
    clip-path: polygon(
      calc(100% - 4px) 100%, 0.00% 100%, 0.00% 0.00%, calc(100% - 4px) 0.00%, calc(100% - 4px) 10%, calc(100% - 3px) 20%, calc(100% - 2px) 30%, calc(100% - 1px) 40.00%,
      calc(100% - 1px) 50%, calc(100% - 1px) 60%, calc(100% - 2px) 70%, calc(100% - 3px) 80%, calc(100% - 4px) 90%
    );
  }
  100% {
    clip-path: polygon(
      100% 100%, 0.00% 100%, 0.00% 0.00%, 100% 0.00%, calc(100% - 1px) 10%, calc(100% - 2px) 20%, calc(100% - 3px) 30%, calc(100% - 4px) 40.00%,
      calc(100% - 4px) 50%, calc(100% - 4px) 60%, calc(100% - 3px) 70%, calc(100% - 2px) 80%, calc(100% - 1px) 90%
    );
  }
}

@keyframes borroso {
    0% { filter: blur(1px);}
    50% { filter: blur(3px);}
    100% { filter: blur(1px);}
}

@keyframes psicodelia {
    0% { filter: hue-rotate(0deg);}
    50% { filter: hue-rotate(160deg);}
    100% { filter: hue-rotate(0deg);}
}

@keyframes brilloMagia {
    0% { text-shadow: 0 0 10px #050161, 0 0 20px #9ecbe0, 0 0 30px #6aaac7, 0 0 40px #449ec7, 0 0 50px #1d7ca8, 0 0 60px #006290, 0 0 70px #025481; }
    50% { text-shadow: 0 0 15px #050161, 0 0 25px #9ecbe0, 0 0 35px #6aaac7, 0 0 45px #449ec7, 0 0 55px #1d7ca8, 0 0 65px #006290, 0 0 75px #025481; }
    100% { text-shadow: 0 0 10px #050161, 0 0 20px #9ecbe0, 0 0 30px #6aaac7, 0 0 40px #449ec7, 0 0 50px #1d7ca8, 0 0 60px #006290, 0 0 70px #025481; }
}

@keyframes brilloEspirituAgotado {
    from {
        box-shadow: 0 0 10px #9535a3, 0 0 20px #1d0624, 0 0 30px #8226e7;
    }
    to {
        box-shadow: 0 0 20px #9535a3, 0 0 40px #1d0624, 0 0 60px #8226e7;
    }
}

@keyframes brilloEspirituLuz {
    from {
        box-shadow: 0 0 10px #ffffff, 0 0 20px #fcfbb3, 0 0 30px #f2ff80;
    }
    to {
        box-shadow: 0 0 20px #ffffff, 0 0 40px #fbff00, 0 0 60px #d0d400;
    }
}

@keyframes brilloEspirituAgua {
    from {
        box-shadow: 0 0 10px #81d4fa, 0 0 20px #4fc3f7, 0 0 30px #29b6f6;
    }
    to {
        box-shadow: 0 0 20px #4fc3f7, 0 0 40px #0288d1, 0 0 60px #0277bd;
    }
}

@keyframes brilloEspirituFuego {
    from {
        box-shadow: 0 0 10px #ff8a65, 0 0 20px #ff7043, 0 0 30px #ff5722;
    }
    to {
        box-shadow: 0 0 20px #ff7043, 0 0 40px #ff3d00, 0 0 60px #dd2c00;
    }
}

@keyframes brilloTitania {
    from {
        box-shadow: 0 0 10px #164649, 0 0 20px #0b383b, 0 0 30px #0b383b;
    }
    to {
        box-shadow: 0 0 20px #18666b, 0 0 40px #083e42, 0 0 60px #02484d;
    }
}

@keyframes brilloOberon {
    from {
        box-shadow: 0 0 10px #422524, 0 0 20px #3d1d1c, 0 0 30px #381413;
    }
    to {
        box-shadow: 0 0 20px #3d1d1c, 0 0 40px #2b1211, 0 0 60px #3a0f0e;
    }
}

@keyframes brilloAngel {
    from {
        box-shadow: 0 0 10px #6d6655, 0 0 20px #898271, 0 0 30px #867a5c;
    }
    to {
        box-shadow: 0 0 20px #898271, 0 0 40px #615a4b, 0 0 60px #72674d;
    }
}

@keyframes efectoSangrado {
    0% { box-shadow: 0 0 35px 20px rgba(255, 0, 0, 0.7) inset; }
    100% { box-shadow: 0 0 45px 25px rgba(255, 0, 0, 0.9) inset; }
}

@keyframes efectoEnvenenado {
  0% { box-shadow: 0 0 10px 20px rgba(0, 255, 100, 0.05); }
  50% { box-shadow: 0 0 20px 20px rgba(0, 255, 100, 0.05); }
  100% { box-shadow: 0 0 10px 20px rgba(0, 255, 100, 0.05); }
}

@keyframes brilloDinero {
    0% { text-shadow: 0 0 1px #000000, 0 0 2px #fcf3b3, 0 0 3px #faf881, 0 0 4px #f7ef4f, 0 0 5px #f6ec29, 0 0 6px #f4d803, 0 0 7px #ced102; }
    50% { text-shadow: 0 0 3px #000000, 0 0 6px #fcf3b3, 0 0 9px #faf881, 0 0 12px #f7ef4f, 0 0 15px #f6ec29, 0 0 18px #f4d803, 0 0 21px #ced102; }
    100% { text-shadow: 0 0 1px #000000, 0 0 2px #fcf3b3, 0 0 3px #faf881, 0 0 4px #f7ef4f, 0 0 5px #f6ec29, 0 0 6px #f4d803, 0 0 7px #ced102; }
}

@keyframes revelar {
    from { width: 95%; }
    to { width: 0%; }
}

@keyframes palpitar {
    0% { transform: scale(1); }
    15% { transform: scale(1.1); }
    30% { transform: scale(1.3); }
    45% { transform: scale(1.5); }
    50% { transform: scale(1.8); }
    55% { transform: scale(1.5); }
    70% { transform: scale(1.3); }
    85% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes flotar {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

@keyframes quemado {
    0%   { filter: brightness(1); }
    20%  { filter: brightness(1.5) hue-rotate(10deg); }
    40%  { filter: brightness(0.8) hue-rotate(-10deg); }
    60%  { filter: brightness(1.2) hue-rotate(10deg); }
    100% { filter: brightness(1); }
}

@keyframes llamas {
    0%   { text-shadow: 0 0 5px rgba(255, 69, 0, 0.8), 0 0 10px rgba(255, 140, 0, 0.6); }
    50%  { text-shadow: 0 0 10px rgba(255, 69, 0, 1), 0 0 20px rgba(255, 140, 0, 0.8); }
    100% { text-shadow: 0 0 5px rgba(255, 69, 0, 0.8), 0 0 10px rgba(255, 140, 0, 0.6); }
}

@keyframes aranias {
    0%   { transform: translateX(0) translateY(0) rotate(0deg); }
    10%  { transform: translateX(-2px) translateY(2px) rotate(-2deg); }
    20%  { transform: translateX(2px) translateY(-2px) rotate(2deg); }
    30%  { transform: translateX(-2px) translateY(2px) rotate(-2deg); }
    40%  { transform: translateX(2px) translateY(-2px) rotate(2deg); }
    50%  { transform: translateX(-2px) translateY(2px) rotate(-2deg); }
    60%  { transform: translateX(2px) translateY(-2px) rotate(2deg); }
    70%  { transform: translateX(-2px) translateY(2px) rotate(-2deg); }
    80%  { transform: translateX(2px) translateY(-2px) rotate(2deg); }
    90%  { transform: translateX(-2px) translateY(2px) rotate(-2deg); }
    100% { transform: translateX(0) translateY(0) rotate(0deg); }
}

@keyframes ojo {
    0% { text-shadow: 0px 0px 10px darkmagenta; transform: scale(0.99); }
    50% { text-shadow: 0px 0px 20px darkmagenta; transform: scale(1); }
    100% {text-shadow: 0px 0px 10px darkmagenta; transform: scale(0.99); }
}

@keyframes girogiro {
    0% { transform: rotateY(0deg); }
    5% { transform: rotateY(180deg); }
    10% { transform: rotateY(0deg); }
    100% { transform: rotateY(0deg); }
}

@keyframes girogiro2 {
  0%   { transform: rotateY(0deg); }
  90%  { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes balanceo {
    0% { transform: rotate(0deg); }
    11% { transform: rotate(3deg); }
    12% { transform: rotate(6deg); }
    13% { transform: rotate(9deg); }
    14% { transform: rotate(12deg); }
    15% { transform: rotate(15deg); }
    16% { transform: rotate(15deg); }
    17% { transform: rotate(12deg); }
    18% { transform: rotate(9deg); }
    19% { transform: rotate(6deg); }
    20% { transform: rotate(3deg); }
    21% { transform: rotate(0deg); }
    22% { transform: rotate(0deg); }
    23% { transform: rotate(-3deg); }
    24% { transform: rotate(-6deg); }
    25% { transform: rotate(-9deg); }
    26% { transform: rotate(-12deg); }
    27% { transform: rotate(-15deg); }
    28% { transform: rotate(-15deg); }
    29% { transform: rotate(-12deg); }
    30% { transform: rotate(-9deg); }
    31% { transform: rotate(-6deg); }
    32% { transform: rotate(-3deg); }
    33% { transform: rotate(0deg); }
}

@keyframes movimiento-cebo {
    0% { transform: translateX(0); }
    40% { transform: translateX(0); }
    50% { transform: translateX(5px); }
    60% { transform: translateX(0); }
    100% { transform: translateX(0); }
}

@keyframes lanzarConjuro {
    0% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1) blur(0px);
    }
    25% {
        transform: scale(1.2) rotate(15deg);
        filter: brightness(1.4) blur(1px);
    }
    50% {
        transform: scale(1.4) rotate(-15deg);
        filter: brightness(1.6) blur(2px);
    }
    75% {
        transform: scale(1.2) rotate(15deg);
        filter: brightness(1.2) blur(1px);
    }
    100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1) blur(0px);
    }
}

@keyframes barreraActiva {
    0%, 100% {box-shadow: 0 0 5px lightblue, 0 0 10px aqua, 0 0 15px darkslateblue;}
    50% {box-shadow: 0 0 10px lightblue, 0 0 15px aqua, 0 0 20px darkslateblue;}
}

@keyframes gruñido {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    1% { transform: translate(-1px, -2px) rotate(-1deg); }
    2% { transform: translate(-3px, 0px) rotate(1deg); }
    3% { transform: translate(3px, 2px) rotate(0deg); }
    4% { transform: translate(1px, -1px) rotate(1deg); }
    5% { transform: translate(-1px, 2px) rotate(-1deg); }
    6% { transform: translate(-3px, 1px) rotate(0deg); }
    7% { transform: translate(3px, 1px) rotate(-1deg); }
    8% { transform: translate(-1px, -1px) rotate(1deg); }
    9% { transform: translate(1px, 2px) rotate(0deg); }
    10% { transform: translate(1px, -2px) rotate(-1deg); }
    11%, 100% {transform: translate(0, 0) rotate(0deg); }
}

@keyframes devorar {
    0% { transform: scale(1) rotate(0deg); }
    15% { transform: scale(1.3) rotate(5deg); }
    30% { transform: scale(1) rotate(-5deg); }
    45% { transform: scale(1.5) rotate(10deg); }
    60% { transform: scale(1) rotate(-10deg); }
    75% { transform: scale(1.5) rotate(12deg); }
    90% { transform: scale(1) rotate(-12deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes deformacionGlitchTexto {
  0% { clip-path: polygon(
      0% 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%,
      41% 17%, 41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39% 4%, 39% 14%, 76% 14%,
      76% 52%, 23% 52%, 23% 35%, 19% 35%, 19% 8%, 36% 8%, 36% 31%, 73% 31%, 73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%
    );
  }
  5% { clip-path: polygon(
      0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%, 94% 64%, 94% 70%, 88% 70%, 88% 32%,
      18% 32%, 18% 96%, 10% 96%, 10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%, 35% 55%,
      35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%
    );
  }

  30% { clip-path: polygon(
      0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%,
      17% 88%, 17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%, 55% 12%,
      55% 62%, 68% 62%, 68% 51%, 0% 51%, 0% 92%, 63% 92%, 63% 4%, 65% 4%
    );
  }
  45% { clip-path: polygon(
      0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%,
      5% 19%, 5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%, 96% 57%,
      96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%,
      1% 43%, 15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%, 97% 1%, 60% 1%, 60% 67%, 71% 67%,
      71% 91%, 17% 91%, 17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%
    );
  }
  76% { clip-path: polygon(
      0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%,
      17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%,
      50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%
    );
  }
  90% { clip-path: polygon(
      0% 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%, 10% 13%, 89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%,
      16% 79%, 0% 79%, 0% 99%, 92% 99%, 92% 90%, 5% 90%, 5% 60%, 0% 60%, 0% 48%, 89% 48%, 89% 13%, 80% 13%,
      80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%, 38% 62%
    );
  }
  1%, 7%, 33%, 47%, 78%, 93% {
    clip-path: none;
  }
}

@keyframes movimientoGlitchTexto {
  0% {
    top: 0px;
    left: -20px;
  }
  15% {
    top: 10px;
    left: 10px;
  }
  60% {
    top: 5px;
    left: -10px;
  }
  75% {
    top: -5px;
    left: 20px;
  }
  100% {
    top: 10px;
    left: 5px;
  }
}

@keyframes opacidadGlitchTexto {
  0% { opacity: 0.1; }
  5% { opacity: 0.7; }
  30% { opacity: 0.4; }
  45% { opacity: 0.6; }
  76% { opacity: 0.4; }
  90% { opacity: 0.8; }
  1%, 7%, 33%, 47%, 78%, 93% { opacity: 0; }
}

@keyframes transformacionGlitchTexto {
  0% {
    font-weight: 100;
    color: #e0287d;
    filter: blur(3px);
  }
  20% {
    font-weight: 500;
    color: #fff;
    filter: blur(0);
  }
  50% {
    font-weight: 300;
    color: #1bc7fb;
    filter: blur(2px);
  }
  60% {
    font-weight: 700;
    color: #fff;
    filter: blur(0);
  }
  90% {
    font-weight: 500;
    color: #e0287d;
    filter: blur(6px);
  }
}

@keyframes glitch2Texto {
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg);
  }
}

@keyframes glitchTextoArriba {
  2%,64%{
    transform: translate(2px,-2px);
  }
  4%,60%{
    transform: translate(-2px,2px);
  }
  62%{
    transform: translate(13px,-1px) skew(-13deg);
  }
}

@keyframes glitchTextoAbajo {
  2%,64%{
    transform: translate(-2px,0);
  }
  4%,60%{
    transform: translate(-2px,0);
  }
  62%{
    transform: translate(-22px,5px) skew(21deg);
  }
}

@keyframes ruido-botones-before {
    0% { clip: rect(61px, 9999px, 52px, 0); }
    5% { clip: rect(33px, 9999px, 144px, 0); }
    10% { clip: rect(121px, 9999px, 115px, 0); }
    15% { clip: rect(144px, 9999px, 162px, 0); }
    20% { clip: rect(62px, 9999px, 180px, 0); }
    25% { clip: rect(34px, 9999px, 42px, 0); }
    30% { clip: rect(147px, 9999px, 179px, 0); }
    35% { clip: rect(99px, 9999px, 63px, 0); }
    40% { clip: rect(188px, 9999px, 122px, 0); }
    45% { clip: rect(154px, 9999px, 14px, 0); }
    50% { clip: rect(63px, 9999px, 37px, 0); }
    55% { clip: rect(161px, 9999px, 147px, 0); }
    60% { clip: rect(109px, 9999px, 175px, 0); }
    65% { clip: rect(157px, 9999px, 88px, 0); }
    70% { clip: rect(173px, 9999px, 131px, 0); }
    75% { clip: rect(62px, 9999px, 70px, 0); }
    80% { clip: rect(24px, 9999px, 153px, 0); }
    85% { clip: rect(138px, 9999px, 40px, 0); }
    90% { clip: rect(79px, 9999px, 136px, 0); }
    95% { clip: rect(25px, 9999px, 34px, 0); }
    100% { clip: rect(173px, 9999px, 166px, 0); }
}

@keyframes ruido-botones-after {
    0% { clip: rect(26px, 9999px, 33px, 0); }
    5% { clip: rect(140px, 9999px, 198px, 0); }
    10% { clip: rect(184px, 9999px, 89px, 0); }
    15% { clip: rect(121px, 9999px, 6px, 0); }
    20% { clip: rect(181px, 9999px, 99px, 0); }
    25% { clip: rect(154px, 9999px, 133px, 0); }
    30% { clip: rect(134px, 9999px, 169px, 0); }
    35% { clip: rect(26px, 9999px, 187px, 0); }
    40% { clip: rect(147px, 9999px, 137px, 0); }
    45% { clip: rect(31px, 9999px, 52px, 0); }
    50% { clip: rect(191px, 9999px, 109px, 0); }
    55% { clip: rect(74px, 9999px, 54px, 0); }
    60% { clip: rect(145px, 9999px, 75px, 0); }
    65% { clip: rect(153px, 9999px, 198px, 0); }
    70% { clip: rect(99px, 9999px, 136px, 0); }
    75% { clip: rect(118px, 9999px, 192px, 0); }
    80% { clip: rect(1px, 9999px, 83px, 0); }
    85% { clip: rect(145px, 9999px, 98px, 0); }
    90% { clip: rect(121px, 9999px, 154px, 0); }
    95% { clip: rect(156px, 9999px, 44px, 0); }
    100% { clip: rect(67px, 9999px, 122px, 0); }
}

@keyframes sacudida-botones {
    0%, 3%, 25%, 11%, 15%, 17%, 20%, 24%, 100% { transform: skewX(0deg); }
    1% { transform: skewX(40deg) skewY(10deg); }
    2% { transform: skewX(-40deg) skewY(-10deg); }
    5% { transform: skewX(10deg) skewY(-5deg); }
    12% { transform: skewX(-50deg) skewY(-20deg); }
    13% { transform: skewX(10deg) skewY(-10deg); }
    21% { transform: skewX(10deg); }
    22% { transform: skewX(-10deg); }
}

@keyframes teletransporte {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0) hue-rotate(45deg);
    }
    40% {
        opacity: 0.5;
        transform: scaleX(0.7) translateY(-10px);
        filter: blur(5px) hue-rotate(100deg);
    }
    60% {
        opacity: 0.5;
        transform: scale(0.2) translateY(-50px);
        filter: blur(15px) hue-rotate(100deg);
    }
    100% {
        visibility: hidden;
        opacity: 0.5;
        transform: scale(0.2) translateY(-50px);
        filter: blur(15px) hue-rotate(100deg);
    }
}

@keyframes teletransportePlataforma {
    0%, 99% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
}

@keyframes efectoSol {
    0%, 100% {
        opacity: 0.45;
        filter: brightness(1);
    }
    50% {
        opacity: 0.65;
        filter: brightness(1.05);
    }
}


/* **************************************************************************************************************************************************************************************************************** */
/* Globales */
.texto_normal {
    cursor: context-menu !important;
}

.boton_jugar:hover, .boton_volver:hover, .boton_bienvenida:hover, .boton_siguiente:hover, .boton_camino:hover, .boton_elegir:hover, .boton_taberna:hover {
    transition: color 1s !important;
    color: #212529 !important;
    text-shadow: 0 0 2px #000000, 0 0 3px #ececec, 0 0 4px #d1d1d1, 0 0 5px #e9e9e9, 0 0 6px #e9e9e9 !important;
}

.oculto {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.boton_volver {
    background-color: transparent;
    border: 2px solid transparent;
    background-image: url('../images/boton.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.bug-botones {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    letter-spacing: 5px;
    z-index: 1;
}

.bug-botones:hover {
    animation: sacudida-botones 4s ease-in-out;
}

.bug-botones:before {
    content: attr(data-bug-botones);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: -2px;
    text-shadow: -1px 0 #36144c;
    width: 100%;
    height: 100%;
    color: inherit;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: ruido-botones-before 3s infinite linear alternate-reverse;
}

.bug-botones:after {
    content: attr(data-bug-botones);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 2px;
    text-shadow: 1px 0 #0a4a02;
    width: 100%;
    height: 100%;
    color: inherit;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: ruido-botones-after 2s infinite linear alternate-reverse;
}

body {
    font-family: 'Tavern New', Courier, monospace;
    overflow: hidden;
    background-color: #000;
}

.version_juego {
    color: aliceblue !important;
    opacity: 0.6 !important;
    z-index: 1000 !important;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 15px !important;
    padding-right: 5px !important;
    width: fit-content !important;
    right: 0 !important;
    left: auto !important;
    letter-spacing: 3px;
}

.glitch-texto2 {
  animation: glitch2Texto  1s linear infinite;
}

.glitch-texto2::after{
  animation: glitchTextoAbajo  1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

.glitch-texto2::before,
.glitch-texto2::after{
  content: attr(title);
  position: absolute;
  left: 0;
}

.glitch-texto2::before{
  animation: glitchTextoArriba  1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.desactivada {
    opacity: 0.7;
    pointer-events: none;
}


/* **************************************************************************************************************************************************************************************************************** */
/* Inicio */
.texto_idioma {
  font-size: 40px;
  color: white;
  text-shadow: 0 0 3px black;
  text-align: center;
}

.boton_idioma {
  background-color: transparent;
  border: 2px solid transparent;
  background-image: url(../images/boton.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 20px;
  font-weight: bold;
  color: #c3b4b4;
  min-width: 160px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  left: 50% !important;
}

.vista_carga {
    background-image: url(../images/entradaBosque.gif);
    background-position: center;
    background-color: #192416;
    background-size: cover;
    overflow: hidden;
    height: 100% !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.imagen_cargando {
    width: 10% !important;
    min-width: 120px;
    height: auto !important;
    aspect-ratio: 1 / 1;
    top: auto !important;
    left: auto !important;
}

.ventana_inicio {
    background-image: url('../images/entradaBosque.gif');
    background-position: center;
    background-color: #192416;
    background-size: cover;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

#cerrarJuego {
    aspect-ratio: 1 / 1;
    width: auto !important;
}

#cerrarJuego:hover {
    transform: scale(1.1);
}

.titulo_juego {
    font-family: 'Twisted', sans-serif !important;
    text-align: center;
    font-size: calc(2.7vw + 4.8vh);
    color: #1f1826;
    text-shadow: -3px 0 #564b69, 0 3px #564b69, 3px 0 #979eb8, 0 -3px #979eb8;
    margin-top: 30px;
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%);
    width: 80vw
}

.boton_jugar {
    background-color: transparent;
    border: 2px solid transparent;
    background-image: url(../images/boton.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 26px;
    font-weight: bold;
    min-width: 220px;
    min-height: 100px;
    color: #c3b4b4 !important;
    text-shadow: 2px 2px 2px black !important;
    transition: color 1s;
}

.boton_puntuaciones {
    background-color: transparent;
    border: 2px solid transparent;
    font-size: 25px;
    color: #c3b4b4;
    min-width: 220px;
    min-height: 100px;
    background-image: url(../images/boton.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: color 1s;
}

.boton_puntuaciones::before {
    content: "";
    position: absolute;
    background-color: transparent;
    top: -57%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/seta-boton-apagada.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: color 1s;
    z-index: 1;
}

.boton_puntuaciones::after {
    content: "";
    position: absolute;
    background-color: transparent;
    top: -57%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/seta-boton.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: opacity 1s ease;
    opacity: 0;
    z-index: 2;
}

.boton_puntuaciones:hover {
    color: #212529;
    animation: brilloDinero 3s infinite;
}

.boton_puntuaciones:hover::after {
    opacity: 1;
}

.texto_categoria {
    font-size: 15px;
    color: #c3b4b4;
    text-shadow: 2px 2px 2px black !important;
    text-align: center;
    background-color: transparent;
    border: 2px solid transparent;
    background-image: url(../images/panel-categorias.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 35px 40px;
    width: 240px !important;
    height: fit-content !important;
    transition: all 1s;
    animation: girogiro 10s;
}

.texto_categoria:hover {
    animation: flotar 1.5s infinite ease-in-out;
}

.texto_categoria span > span {
    color: white !important;
    padding: 5px 20px;
    text-align: center;
}

.boton_reglas {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-weight: Bold;
  height: fit-content !important;
  min-width: 140px !important;
  color: black;
  background-image: url(../images/dialogo.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 1% 1%;
}

.boton_reglas::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -125px;
    width: auto;
    height: 150px;
    aspect-ratio: 1 / 1;
    background-image: url(../images/ayudante.gif);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.5;
}

.boton_reglas::after {
    content: "";
    position: absolute;
    top: 0;
    left: -5%;
    width: 50%;
    height: 100%;
    background-image: url(../images/dialogo-pico.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}


/* **************************************************************************************************************************************************************************************************************** */
/* Categorias */
.ventana_categorias {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    background-image: url(../images/avanzarBosque.gif);
    background-position: center center;
    background-color: #192416 !important;
    background-size: 140% 115%;
    align-items: start;
    justify-content: space-evenly;
    justify-items: center;
    height: 100% !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 100;
}

.categoria {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    background-color: transparent !important;
    background-image: url(../images/papel.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 16px;
    border-radius: 10px;
    color: black;
    text-align: center;
    width: 50% !important;
    min-width: 150px;
    max-width: 250px;
    min-height: 60px;
    height: 50% !important;
    cursor: pointer !important;
}

.categoria:hover {
    animation: flotar 1.5s infinite ease-in-out;
}

.categoria.grid-impar {
    grid-column: span 2;
    width: 25% !important;
}


/* **************************************************************************************************************************************************************************************************************** */
/* Reglas */
.ventana_reglas {
    display: flex;
    padding: 15px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-image: url(../images/Reglas.gif);
    background-position: center center;
    background-color: #192416 !important;
    background-size: cover;
    overflow-x: hidden;
}

.contenedor_reglas {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    justify-self: center;
    font-weight: Bold;
    color: black;
    height: fit-content !important;
    max-width: fit-content !important;
    padding: 25px 30px 20px 35px;
    transition: all 1s;
    margin-bottom: 10px;
    background-image: url(../images/dialogo-cuadrado.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.contenedor_reglas::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -250px;
  width: auto;
  height: 100%;
  max-height: 420px;
  aspect-ratio: 4 / 5;
  background-image: url(../images/ayudante.gif);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0.5;
  border-radius: 200px;
}

.contenedor_reglas::after {
    content: "";
    position: absolute;
    top: 5%;
    left: -5%;
    width: 30%;
    height: 100%;
    max-height: 500px;
    background-image: url(../images/dialogo-cuadrado-pico.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.titulo_reglas {
    color: indigo;
    font-weight: bold;
    text-align: center;
    font-size: 30px;
}

.lista_reglas {
    font-size: 14px;
}

.lista_reglas > li {
    margin-bottom: 5px;
}

.boton_volver_reglas {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    justify-self: anchor-center;
    min-width: 160px;
    min-height: 90px;
    font-size: 25px;
    font-weight: bolder;
    color: #c3b4b4;
    text-shadow: 2px 2px 2px black !important;
    overflow: hidden;
}


/* **************************************************************************************************************************************************************************************************************** */
/* Puntuaciones */
.contenedor_puntuaciones {
    display: flex;
    padding: 5vh 3.5vw 7.5vh 3vw;
    align-items: center;
    z-index: 1;
    background-image: url(../images/marco_logros.png);
    background-position: center;
    background-size: 100% 100%;
}

.contenedor_puntuaciones::before {
    content: "";
    position: absolute;
    top: 3%;
    left: 3%;
    width: 95%;
    height: 95%;
    background-image: url(../images/madera-puntuaciones.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

.contenedor_puntuaciones::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/marco_logros.png);
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
}

.tabla_puntuaciones {
    position: relative !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: 95% !important;
    height: 100% !important;
    padding-right: 10px;
}

.tabla_puntuaciones th {
    color: #c3b4b4 !important;
    font-size: 22px;
    text-shadow: 2px 2px 2px black !important;
    border-top: none;
}

.tabla_puntuaciones th + th {
    color: darkgoldenrod !important;
    text-align: right !important;
}

.tabla_puntuaciones td {
    border-top: 1px dashed #c3b4b4 !important;
    color: #c3b4b4 !important;
    text-shadow: 2px 2px 2px black !important;
}

.tabla_puntuaciones td + td {
    color: darkgoldenrod !important;
    text-align: right !important;
}

.tabla_puntuaciones tbody + tbody {
    border-top: 2px dashed #c3b4b4 !important;
}

.contenedor_logros::-webkit-scrollbar, .tabla_puntuaciones::-webkit-scrollbar {
  width: 10px;
}

.contenedor_logros::-webkit-scrollbar-track, .tabla_puntuaciones::-webkit-scrollbar-track {
  background: #1b1a16; /* Tono madera oscura, casi negro con matiz marrón */
}

.contenedor_logros::-webkit-scrollbar-thumb, .tabla_puntuaciones::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4b3e2a, #2e261c); /* Veta de madera quemada */
  border-radius: 8px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5); /* Hundido, como tallado */
}

.contenedor_logros::-webkit-scrollbar-thumb:hover, .tabla_puntuaciones::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5e4b33, #3a2f22); /* Resalte con luz tenue */
}

.contenedor_logros, .tabla_puntuaciones { /*Este es para Firefox si el otro no funciona lo otro*/
  scrollbar-width: thin;
  scrollbar-color: #3a2f22 #1b1a16;
}

.boton_volver_puntuaciones {
    color: #c3b4b4;
    background-color: transparent;
    border: 2px solid transparent;
    left: 50% !important;
    min-width: 180px;
    min-height: 80px;
    font-size: 20px;
    line-height: 1;
    transform: translateX(-50%);
    top: auto !important;
    bottom: 3% !important;
}


/* **************************************************************************************************************************************************************************************************************** */
/* Introduccion */
.ventana_intro {
    background-image: url('../images/avanzarBosque.gif');
    background-size: 110% 110%;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #192416;
    overflow: hidden;
}

.contenedor_intro {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-weight: Bold;
    min-height: fit-content;
    color: black;
    background-image: url(../images/dialogo.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3% 9% 3% 3%;
}

.contenedor_intro::before {
    content: "";
    position: absolute;
    top: 0;
    left: -5%;
    width: 50%;
    height: 100%;
    background-image: url(../images/dialogo-pico.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.contenedor_intro::after {
    content: "";
    position: absolute;
    top: 5%;
    left: -220px;
    width: auto;
    height: 300px;
    aspect-ratio: 4 / 5;
    background-image: url(../images/ayudante.gif);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.5;
    border-radius: 200px;
    visibility: visible !important;
}

.ayudante_intro {
    width: 18vw !important;
    height: 18vw !important;
    opacity: 0.5 !important;
    border-radius: 50% !important;
    left: 0 !important;
    top: 60px !important;
}

.contenedor_flex_intro {
    display: flex;
    left: 0 !important;
    align-items: center;
    justify-content: space-evenly;
    width: 100% !important;
    box-sizing: content-box;
}

.icon-intro {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    width: 10% !important;
    min-width: 75px;
    aspect-ratio: 1 / 1;
}


.icon-intro.dinero_total {
    width: 15% !important;
    min-width: 150px !important;
    max-width: 200px;
}

.icon-intro:hover {
    transition: all 500s;
    color: white;
}


/* **************************************************************************************************************************************************************************************************************** */
/* Bienvenida */
.mensaje_bienvenida {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 40px;
    align-items: center;
    color: white !important;
    background-image: url('../images/avanzarBosque.gif');
    background-size: 110% 110%;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 18px;
    height: 100% !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    text-shadow: 2px 2px 2px black !important;
    overflow: auto;
    z-index: 101;
}

#inputNom {
  font-family: 'Cinzel', serif;
  background: url('../images/papel-textura.png') repeat, #2b2b2b; /* Puedes usar una textura de pergamino o madera oscura */
  background-blend-mode: multiply;
  border: 3px solid #5b3921;
  border-radius: 10px;
  box-shadow: 0 0 20px #000, inset 0 0 10px rgba(0, 0, 0, 0.6);
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px black;
  transition: all 0.3s ease-in-out;
  color: white !important;
  height: 40px;
}

#inputNom:focus {
  outline: none;
  border-color: #d1b96c;
  box-shadow: 0 0 25px #d1b96c, inset 0 0 10px #000;
}

#mensajeErrorNom {
    text-shadow: none !important;
}

.elemento_bienvenida {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: fit-content !important;
    display: flex;
    justify-content: space-evenly;
}

.boton_bienvenida {
    background-color: transparent;
    border: 2px solid transparent;
    background-image: url('../images/boton.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 20px;
    font-weight: bold;
    min-width: 160px;
    min-height: 70px;
    color: #c3b4b4;
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

#botonTeclado {
    top: 5px;
    left: auto;
    right: 5px;
    width: 55px;
    height: 30px;
}

.teclado-interno {
  background-image: url(../images/teclado.png);
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 3;
  width: 72% !important;
  height: 49% !important;
  top: 3% !important;
  left: 50% !important;
  transform: translateX(-50%);
  max-height: 363px;
  max-width: 960px;
  min-width: 921px;
  min-height: 352px;
}

.mayus {
    text-transform: uppercase;
}

.tecla {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    background-image: url(../images/tecla.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    color: white !important;
    height: auto !important;
    width: 65px !important;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tecla-larga {
    background-image: url(../images/tecla-larga.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    color: white !important;
    height: 65px !important;
    width: 140px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tecla-intro {
    background-image: url(../images/tecla-intro.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    color: white !important;
    height: 140px !important;
    width: 65px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tecla:hover, .tecla-larga:hover, .tecla-intro:hover {
    transform: scale(1.1);
}

.underline {
    text-decoration: underline;
}

.ventana_tarot {
    background-image: url(../images/fondo-tarot.gif);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: white !important;
    background-color: black !important;
    border: 2px solid transparent;
    padding: 20px;
    font-size: 18px;
    text-align: center;
    height: 100% !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    text-shadow: 2px 2px 2px black !important;
    overflow: auto;
    overflow-x: hidden;
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.elemento_tarot {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: flex;
    justify-content: space-evenly;
}

.carta_tarot {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    min-height: 170px;
    width: auto !important;
    aspect-ratio: 3 / 5 !important;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    transition: transform 0.6s ease;
    transform: rotateY(180deg);
    transform-origin: center;
    filter: brightness(1.3);
}

.reverso {
    position: absolute;
    inset: 0;
    background: url('../images/reverso-tarot.png');
    background-position: center;
    background-size: cover;
    border-radius: inherit;
    z-index: 2;
}

.carta_tarot.volteada {
    transform: rotateY(0deg);
}

.carta_tarot.volteada:hover {
    transform: scale(1.1);
}

.carta_tarot.volteada .reverso {
    transition: opacity 0s ease 0.29s;
    opacity: 0;
}

.dinero_tarot {
    color: rgb(244, 229, 22);
    font-size: 20px;
    animation: brilloDinero 2s infinite;
}

.tarot_0  { background-image: url(../images/0-tarot.png); }
.tarot_1  { background-image: url(../images/1-tarot.png); }
.tarot_2  { background-image: url(../images/2-tarot.png); }
.tarot_3  { background-image: url(../images/3-tarot.png); }
.tarot_4  { background-image: url(../images/4-tarot.png); }
.tarot_5  { background-image: url(../images/5-tarot.png); }
.tarot_6  { background-image: url(../images/6-tarot.png); }
.tarot_7  { background-image: url(../images/7-tarot.png); }
.tarot_8  { background-image: url(../images/8-tarot.png); }
.tarot_9  { background-image: url(../images/9-tarot.png); }
.tarot_10 { background-image: url(../images/10-tarot.png); }
.tarot_11 { background-image: url(../images/11-tarot.png); }
.tarot_12 { background-image: url(../images/12-tarot.png); }
.tarot_13 { background-image: url(../images/13-tarot.png); }
.tarot_14 { background-image: url(../images/14-tarot.png); }
.tarot_15 { background-image: url(../images/15-tarot.png); }
.tarot_16 { background-image: url(../images/16-tarot.png); }
.tarot_17 { background-image: url(../images/17-tarot.png); }
.tarot_18 { background-image: url(../images/18-tarot.png); }
.tarot_19 { background-image: url(../images/19-tarot.png); }
.tarot_20 { background-image: url(../images/20-tarot.png); }
.tarot_21 { background-image: url(../images/21-tarot.png); }


/* **************************************************************************************************************************************************************************************************************** */
/* Juego */
.ventana_juego {
    background-image: url('../images/TwistedForest.gif');
    background-position: center;
    background-color: #192416;
    background-size: cover;
    overflow: hidden;
}

.tiempo_restante {
    max-height: 64px;
    min-height: 64px;
    color: white;
    text-align: center;
    font-size: 2rem;
    justify-content: center;
    display: flex;
    align-items: center;
}

.boton_rendirse {
    font-family: 'Bloody', sans-serif !important;
    background-color: transparent;
    border: 2px solid transparent;
    background-image: url(../images/boton.png);
    background-size: 85% 110%;
    background-position: center center;
    background-repeat: no-repeat;
    font-size: 20px;
    letter-spacing: 3px;
    color: #c3b4b4;
    transition: color 1s;
    min-width: 200px;
    min-height: 64px;
    left: 2% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
}

.boton_rendirse:hover {
    color: crimson;
}

#barraTiempo .progress-bar-striped {
  background-image: url(../images/burbujas.gif);
  background-size: auto 135%;
  background-position: center !important;
  background-color: #037ccd !important;
  animation: moverLiquido 1s ease-in-out infinite;
  clip-path: polygon(
    100% 100%, 0.00% 100%, 0.00% 0.00%, 100% 0.00%, calc( 100% - 1px) 10%, calc( 100% - 2px) 20%, calc( 100% - 2px) 30%, calc( 100% - 4px) 40.00%,
    calc( 100% - 4px) 50%, calc( 100% - 4px) 60%, calc( 100% - 2px) 70%, calc( 100% - 2px) 80%, calc( 100% - 1px) 90%
  );
}

#barraTiempo {
    border: 3px outset aliceblue;
}

#barraTiempo .bg-success {
    filter: hue-rotate(240deg);
}

#barraTiempo .bg-danger {
    filter: hue-rotate(140deg);
}

#imagenTapon {
    max-height: 64px;
    min-height: 64px;
    transform: scaleY(1.35) translateX(15px);
    background-image: url(../images/tapon.png);
    background-size: auto 100%;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 2;
}

.ayudante {
    width: 12.22vw !important;
    height: 12.22vw !important;
    opacity: 0.3 !important;
    border-radius: 50% !important;
}

.texto_info {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-weight: Bold;
    height: fit-content !important;
    min-height: 15% !important;
    color: black;
    background-image: url(../images/dialogo.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3% 9% 3% 3%;
}

.texto_info::before {
    content: "";
    position: absolute;
    top: 0;
    left: -5%;
    width: 50%;
    height: 100%;
    background-image: url(../images/dialogo-pico.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.texto_info::after {
    content: "";
    position: absolute;
    top: 5%;
    left: -220px;
    width: auto;
    height: 260px;
    aspect-ratio: 1 / 1;
    background-image: url(../images/ayudante.gif);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.5;
    border-radius: 200px;
    visibility: visible !important;
}

.fondo_dialogo {
    position: relative;
    visibility: hidden;
    color: orange;
    min-height: 30px;
}

.dialogo {
  color: black;
  position: absolute;
  padding-right: 6.98%;
}

.contenedor_intro .dialogo {
    padding-right: 13.649% !important;
}

.texto_info .dialogo {
    padding-right: 17.3% !important;
}

.texto_info i, .contenedor_intro i {
    color: darkgoldenrod !important;
    font-style: inherit;
    text-shadow: 1px 1px 2px black, -1px -1px 2px black !important;
}

.texto_info u, .contenedor_intro u {
    color: chartreuse !important;
    text-decoration: none;
    text-shadow: 1px 1px 2px black, -1px -1px 2px black !important;
}

.texto_info span, .contenedor_intro span {
    color: aqua;
    text-shadow: 1px 1px 2px black, -1px -1px 2px black !important;
}

.texto_info strong, .contenedor_intro strong {
    color: crimson;
    text-shadow: 1px 1px 2px black, -1px -1px 2px black !important;
}

.texto_info b, .contenedor_intro b {
    color: grey;
    text-shadow: 1px 1px 2px black, -1px -1px 2px black !important;
}

.texto_info em, .contenedor_intro em {
    color: tan;
    font-style: inherit;
    text-shadow: 1px 1px 2px black, -1px -1px 2px black !important;
}
.texto_info mark, .contenedor_intro mark {
    color: royalblue;
    background-color: inherit;
    text-shadow: 1px 1px 2px black, -1px -1px 2px black !important;
}

.texto_pistas {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: white;
    text-align: center;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    min-width: fit-content;
    min-height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pregunta_texto {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 2px solid transparent;
    background-image: url(../images/papel-pregunta.png);
    background-size: 100% 100%;
    padding: 25px 5% 25px 5%;
    min-height: fit-content;
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    color: black;
    text-align: center;
    margin: auto;
    margin-bottom: 20px;
}

.opcion {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background-color: transparent;
    border: 2px solid transparent;
    background-image: url('../images/papel.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 20px;
    font-size: 17px;
    font-weight: bold;
    border-radius: 10px;
    color: black;
    text-align: center;
    width: 35%;
    height: fit-content;
    margin: 10px auto;
    cursor: pointer;
    transition: all 1s;
}

.opcion:hover {
    animation: flotar 1.5s infinite ease-in-out;
}

.opcion.correcta {
    background-image: url('../images/papel-correcto.png') !important;
}
.opcion.incorrecta {
    background-image: url('../images/papel-incorrecto.png') !important;
}

.opcion.quemada {
    animation: quemado 2s forwards, llamas 1s infinite alternate ease-in-out;
    background-image: url('../images/papel-quemado.png');
    opacity: 0.7;
    color: orangered;
    cursor: url('../images/fuego.png'), auto;
}

.opcion.peligro {
    animation: aranias 0.3s infinite;
    background-image: url('../images/papel-arania.png');
    color: olivedrab;
    filter: blur(1px);
    cursor: url('../images/arania.png'), auto;
}

.opcion.clarividencia {
    animation: ojo 1.5s infinite ease-in-out;
    color: midnightblue;
    background-image: url('../images/papel-clarividencia.png');
    cursor: url('../images/clarividencia.png'), auto;
}

.opcion.despejado {
    animation: flotar 1.5s infinite ease-in-out;
    color: black !important;
    background-image: url('../images/papel-despejado.png');
    cursor: pointer !important;
    opacity: 1 !important;
    filter: none !important;
}

.contenedor_hadas {
    min-width: 150px !important;
    min-height: 150px !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
}

.energia_espiritual {
    animation: brilloMagia 2s infinite;
    display: flex;
    font-size: 23px;
    color: white;
    align-items: center;
    justify-content: center;
    padding: 5px;
    width: 6.67vh !important;
    height: 6.67vh !important;
    min-width: 48px;
    min-height: 48px;
    max-width: 60px;
    max-height: 60px;
    text-align: center;
    transition: opacity 1s;
    background-color: transparent;
    line-height: 1;
    background-position: center;
    background-size: auto;
}

.energia_espiritual p {
    margin-top: 50%;
}

.espiritu {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    width: 6.67vh !important;
    height: 6.67vh !important;
    min-width: 48px;
    min-height: 48px;
    max-width: 60px;
    max-height: 60px;
    text-align: center;
    transition: opacity 1s, transform 1s;
    background-color: transparent;
    background-position: center;
    background-size: auto;
    border-radius: 50%;
}

.aventurero_legendario {
    border: 3px solid rgba(173, 216, 230, 1) !important;
    animation: barreraActiva 1.5s infinite alternate ease-in-out !important;
    background-image: url('../images/dev-trap.gif');
    background-size: cover;
}

.espiritu:hover {
    transform: scale(1.1);
}

.agua::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 5%;
    width: 95%;
    height: 95%;
    border-radius: 50%;
    background-color: #4fc3f7;
    animation: brilloEspirituAgua 1s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}
.agua::after {
    content: "";
    position: absolute;
    top: -8%;
    left: -8%;
    width: 124%;
    height: 124%;
    background-image: url(../images/espirituAgua.gif);
    background-position: center;
    background-size: cover;
    pointer-events: none;
    z-index: 2;
}

.fuego::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 5%;
    width: 95%;
    height: 95%;
    border-radius: 50%;
    background-color: #ff8a65;
    animation: brilloEspirituFuego 1s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}
.fuego::after {
    content: "";
    position: absolute;
    top: -13%;
    left: -13%;
    width: 130%;
    height: 130%;
    background-image: url(../images/espirituFuego.gif);
    background-position: center;
    background-size: cover;
    pointer-events: none;
    z-index: 2;
}

.luz::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 5%;
    width: 95%;
    height: 95%;
    border-radius: 50%;
    background-color: #fcfbb3;
    animation: brilloEspirituLuz 1s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}
.luz::after {
    content: "";
    position: absolute;
    top: -45%;
    left: -69%;
    width: 240%;
    height: 200%;
    background-image: url(../images/espirituLuz.gif);
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
    filter: hue-rotate(200deg);
}

.agotado::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 5%;
    width: 95%;
    height: 95%;
    border-radius: 50%;
    background-color: #1d0624;
    animation: brilloEspirituAgotado 1s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}
.agotado::after {
    content: "";
    position: absolute;
    top: -13%;
    left: -13%;
    width: 130%;
    height: 130%;
    background-image: url(../images/espirituAgotado.gif);
    background-position: center;
    background-size: cover;
    pointer-events: none;
    z-index: 2;
}

.angel {
    background-color: #797264;
    animation: brilloAngel 1s ease-in-out infinite alternate;
}

.oberon {
    background-color: #3d1d1c;
    animation: brilloOberon 1s ease-in-out infinite alternate;
}

.titania {
    background-color: #0b383b;
    animation: brilloTitania 1s ease-in-out infinite alternate;
}

.princesa {
    background-image: url(../images/estrellaPrincesa.gif);
    background-size: cover;
    animation: brilloMagia 2s infinite;
    color: aliceblue;
    font-size: 60%;
    line-height: 1;
}

.princesa p {
    margin-top: 45%;
    font-size: 160%;
}

.piromano {
    background-image: url(../images/llamaPiromano.gif);
    background-size: cover;
    animation: llamas 1s infinite alternate ease-in-out;
    color: orange;
    font-size: 60%;
    line-height: 1;
}

.piromano p {
    margin-top: 45%;
    font-size: 160%;
}

.artificiero {
    background-image: url(../images/relojArtificiero.gif);
    background-size: cover;
    animation: brilloMagia 1s infinite;
    color: midnightblue;
    font-size: 60%;
    line-height: 1;
}

.artificiero p {
    margin-top: 45%;
    font-size: 160%;
}

.heroina {
    padding: 0;
}

.ninio {
    padding: 0;
}

.ojo_verdadero {
    padding: 0;
}

.dinero_total {
    background-image: url(../images/bolsa.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: brilloDinero 2s infinite;
    display: flex;
    color: rgb(244, 229, 22);
    align-items: center;
    justify-content: center;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-width: 150px;
}

.dinero_total p {
    margin-top: 5%;
    font-size: 20px;
}

.mapa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    min-width: 180px !important;
    max-width: 220px !important;
    left: auto !important;
    right: 14px !important;
    overflow-y: auto;
    overflow-x: hidden;
}

div.mapa {
    padding: 5px 0px 0px;
    min-width: 180px !important;
    max-width: 220px !important;
    left: auto !important;
    right: 14px !important;
}

.mapa::-webkit-scrollbar {
  width: 8px;
}

.mapa::-webkit-scrollbar-track {
  background: rgba(20, 18, 15, 0.3);
  border-radius: 4px;
}

.mapa::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5c4a32, #2e251b);
  border-radius: 6px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6);
}

.mapa::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #7a5f42, #3a2e22);
}

/* Firefox */
.mapa {
  scrollbar-width: thin;
  scrollbar-color: #5c4a32 rgba(20, 18, 15, 0.3);
}


.casilla {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    background-color: transparent;
    color: transparent;
    border: 2px solid transparent;
    pointer-events: none;
    width: auto !important;
    height: 6vh !important;
    min-height: 39px;
    aspect-ratio: 1 / 1;
    background-image: url(../images/arbol.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.casilla-templo {
    background-image: url(../images/teleporter_inactive.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-top: 10%;
}

.casilla-templo.casilla-actual::after {
    content: "";
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
    position: absolute;
    margin-top: 0%;
    margin-left: 0%;
    background-image: url(../images/teleporter_active.gif) !important;
    opacity: 0;
    animation: teletransportePlataforma 2.6s ease-in-out 1;
}

.casilla-templo.casilla-actual::before {
    content: "";
    margin-top: -45% !important;
    animation: flotar 0.5s ease-in-out 5, teletransporte 0.2s ease-in-out 2.5s forwards !important;
    z-index: 2;
}

.checkpoint {
    background-image: url(../images/desvio.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    animation: girogiro 7s infinite;
}

.casilla-actual, .posicionMonstruo, .casilla-trampa {
    animation: none !important;
}

.casilla-trampa::after {
    content: "";
    width: 45%;
    height: 45%;
    margin-top: 50%;
    margin-left: 60%;
    position: absolute;
    animation: movimiento-cebo 5s ease-in-out infinite;
    background-image: url(../images/rabbit.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.casilla-actual.repeler::before {
    border: 3px solid rgba(173, 216, 230, 1) !important;
    animation: barreraActiva 1.5s infinite alternate ease-in-out !important;
}

.casilla-pasada {
    color: #c3b4b4;
}

.posicionMonstruo.congelado::before {
    background-image: url('../images/monstruo-congelado.png') !important;
    transition: background-image 1s;
    animation: lanzarConjuro 1s ease-out 1, gruñido 10s infinite 1s !important;
}

.posicionMonstruo.devorando::before {
animation: devorar 0.3s ease-in-out 8, palpitar 1s ease-in-out 1 2.5s, gruñido 4s infinite 4s !important;
}

.posicionMonstruo.casilla-templo::before {
animation: devorar 0.4s infinite !important;
}

.casilla-rio {
    background-image: url('../images/water.gif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    animation: none;
}

.casilla-rio.casilla-actual::before {
    content: "";
    background-image: url(../images/ahogarse.png) !important;
    margin-top: 0% !important;
    margin-left: 0% !important;
    animation: balanceo 10s infinite !important;
}

.casilla-actual::before {
    content: "";
    background-image: url(../images/jugador.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    height: 100%;
    width: 100%;
    position: absolute;
    margin-top: 0%;
    margin-left: 0%;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: balanceo 5s infinite;
}

.posicionMonstruo::before {
    content: "";
    background-image: url(../images/monstruo.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
    position: absolute;
    margin-top: 0%;
    margin-left: 0%;
    animation: gruñido 4s infinite 4s;
    transition: background-image 1s;
}

.setas {
    animation: borroso 3s infinite alternate;
}

.alucinogeno {
    animation: psicodelia 2s infinite alternate;
}

.pantalla_mana {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: url(../images/mal-mana.gif) no-repeat center center;
    background-size: 300% 300%;
    opacity: 0.1;
    pointer-events: none;
    z-index: 6;
}

.pantalla_niebla {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: url(../images/niebla.gif) no-repeat center center;
    background-size: 300% 300%;
    opacity: 0.8;
    pointer-events: none;
    animation: borroso 3s infinite alternate;
    z-index: 5;
}

.niebla {
    filter: blur(2px);
}

.pantalla_sangre {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none  !important;
    box-shadow: 0 0 35px 20px rgba(255, 0, 0, 0.5) inset;
    animation: efectoSangrado 1s infinite alternate ease-in-out;
    z-index: 8;
}

.pantalla_veneno {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: 95% !important;
    height: 95% !important;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 255, 100, 0.05);
    border-radius: 30px;
    pointer-events: none !important;
    box-shadow: 0 0 10px 20px rgba(0, 255, 100, 0.05);
    animation: efectoEnvenenado 2s ease-in-out infinite;
    z-index: 7;
}

.pantalla_sol {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    background: linear-gradient(to bottom, rgba(255, 250, 190, 0.25) 0%, rgba(255, 240, 140, 0.08) 50%, transparent 100%);
    box-shadow: 0 -50px 70px 15px rgba(255, 230, 130, 0.25);
    animation: efectoSol 3.5s ease-in-out infinite;
    z-index: 5;
}



/* **************************************************************************************************************************************************************************************************************** */
/* Siguiente */
.siguiente_pregunta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20%;
    background-image: url(../images/avanzarBosque.gif);
    background-size: 110% 110%;
    background-position: center center;
    background-repeat: no-repeat;
    color: white !important;
    background-color: black !important;
    border: 2px solid transparent;
    padding: 20px;
    font-size: 20px;
    text-align: center;
    height: 100% !important;
    width: 100% !important;
    min-width: 500px;
    top: 0 !important;
    left: 0 !important;
    text-shadow: 2px 2px 2px black !important;
    overflow: auto;
    z-index: 100;
}

.boton_siguiente {
    left: auto !important;
    background-color: transparent;
    border: 2px solid transparent;
    background-image: url('../images/boton.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 20px;
    font-weight: bold;
    min-width: 220px;
    min-height: 100px;
    color: #c3b4b4;
}

.boton_camino {
    background-color: transparent;
    border: 2px solid transparent;
    background-image: url(../images/boton.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 20px;
    font-weight: bold;
    color: #c3b4b4;
    min-width: 160px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
}


/* **************************************************************************************************************************************************************************************************************** */
/* Evento */
.ventana_evento {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: white !important;
    background-color: black !important;
    border: 2px solid transparent;
    padding: 20px;
    font-size: 20px;
    text-align: center;
    height: 100% !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    text-shadow: 2px 2px 2px black !important;
    overflow: auto;
    overflow-x: hidden;
    z-index: 100;
}

.contenedor_evento {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: content-box;
}

.boton_elegir {
    position: relative !important;
    background-color: transparent;
    border: 2px solid transparent;
    background-image: url('../images/boton.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 18px;
    font-weight: bold;
    color: #c3b4b4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 100px;
    top: auto !important;
    left: auto !important;
}


/* **************************************************************************************************************************************************************************************************************** */
/* Cazado */
.cazado {
    display: flex;
    font-family: 'Bloody', sans-serif !important;
    justify-content: center;
    align-items: center;
    color: crimson !important;
    background-color: dimgray !important;
    background-image: url(../images/monster.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 24px;
    letter-spacing: 3px;
    word-spacing: 4px;
    line-height: 45px;
    text-shadow: 2px 2px 2px black !important;
    overflow: hidden;
    animation: ataqueCazado 1s ease-in-out;
}

.cazado::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image: url(../images/monster.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    mix-blend-mode:hard-light;
    animation: ataqueCazado 1s ease-in-out forwards, glitchVibrar 0.7s linear infinite 1s;

}

.capas_glitch {
    z-index: 2;
    left: 0 !important;
    right: 0;
    top: 0 !important;
    bottom: 0;
    height: auto !important;
    width: auto !important;
}
.capaGlitch {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url(../images/monster.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.capaGlitch:nth-child(1) {
    transform: translateX(-5%);
    animation: efectoCapasGlitch1 3s infinite linear alternate;
}
.capaGlitch:nth-child(2) {
    transform: translateX(3%) translateY(3%);
    animation: efectoCapasGlitch2 3.3s -0.8s infinite linear alternate;
}
.capaGlitch:nth-child(3) {
    transform: translateX(5%);
    animation: efectoCapasGlitchFlash 2s infinite linear;
}

.boton_volver.boton_cazado {
    color: crimson;
    left: auto !important;
    letter-spacing: 3px;
    word-spacing: 4px;
    font-size: larger;
    z-index: 3;
    display: flex;
    align-items: center;
    padding-top: 15px;
    min-width: 220px;
    min-height: 100px;
    justify-content: center;
}

.capas-glitch-texto {
  position: relative;
}

.capas-glitch-texto::before, .capas-glitch-texto::after {
  content: attr(data-text);
  position: absolute;
  width: 110%;
  z-index: -1;
}

.capas-glitch-texto::before {
  top: 10px;
  left: 15px;
  color: #e0287d;
}

.capas-glitch-texto::after {
  top: 5px;
  left: -10px;
  color: #1bc7fb;
}

.glitch_texto span {
  animation: deformacionGlitchTexto 5s step-end infinite;
}

.glitch_texto::before {
  animation: deformacionGlitchTexto 5s step-end infinite, opacidadGlitchTexto 5s step-end infinite,
    transformacionGlitchTexto 8s step-end infinite, movimientoGlitchTexto 10s step-end infinite;
}

.glitch_texto::after {
  animation: deformacionGlitchTexto 5s step-end infinite, opacidadGlitchTexto 5s step-end infinite,
    transformacionGlitchTexto 7s step-end infinite, movimientoGlitchTexto 8s step-end infinite;
}


/* **************************************************************************************************************************************************************************************************************** */
/* Logros */
.ventana_logros {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-image: url('../images/fondo_Logros.gif');
    background-position: center;
    background-color: #0a0704 !important;
    background-size: cover;
    overflow: hidden;
}

.contenedor_logros {
    z-index: 1;
    background-image: url(../images/marco_logros.png);
    background-position: center;
    background-size: 100% 100%;
    padding: 4.5vh 4vw;
}

.contenedor_logros > div {
    position: relative !important;
    display: grid;
    color: white;
    grid-template-columns: 1fr 10fr;
    gap: 10px;
    row-gap: 10px;
    align-items: center;
    overflow-y: auto;
}

.contenedor_logros::before {
    content: "";
    position: absolute;
    top: 3%;
    left: 3%;
    width: 95%;
    height: 95%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 0;
    pointer-events: none;
}

.contenedor_logros::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/marco_logros.png);
    background-position: center;
    background-size: 100% 100%;
    z-index: 1;
    pointer-events: none;
}

.contenedor_logros img {
    justify-self: center;
    border-radius: 50%;
    height: 10vh !important;
    min-height: 75px;
}

.elemento_logros {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    display: flex;
    height: 100% !important;
    align-items: center;
    font-size: 18px;
    padding-right: 5px;
}

.elemento_logros b {
    color: grey !important;
}

.elemento_logros i {
    color: darkgoldenrod !important;
}

.no_logro {
    opacity:0.5;
    filter: grayscale(100%);
}

.boton_logros {
    position: relative !important;
    left: auto !important;
    background-color: transparent;
    border: 2px solid transparent;
    background-image: url('../images/boton.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 20px;
    font-weight: bold;
    padding: 25px 65px 20px 65px;
    width: fit-content !important;
    height: fit-content !important;
    color: #c3b4b4;
}


/* **************************************************************************************************************************************************************************************************************** */
/* Taberna */
.ventana_escapaste {
    background-image: url('../images/Taverna.gif');
    background-position: center;
    background-color: dimgray;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.escapaste {
    font-family: 'Escapaste', sans-serif !important;
    text-align: center;
    font-size: 3rem;
    color: goldenrod;
    text-shadow: -2px 0 #663a11, 0 3px #6b4712, 2px 0 #413b2c, 0 -2px #383327;
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%);
    width: 70vw
}

.boton_volver_taberna {
    min-width: 280px;
    min-height: 120px;
    font-size: 24px;
    color: #c3b4b4;
    left: 50% !important;
    transform: translateX(-50%);
    bottom: 5% !important;
    top: auto !important;
}
/* **************************************************************************************************************************************************************************************************************** */