:root {
  --color1: #00D3CD;
  --color2: #00DB8F;
  --color3: #75D300;
  --color4: #6BFFFB;
  --color5: #75FFCF;
  --color6: #BDFF6B;
  --color7: #000;
  --color8: #f7f7f7;
  --color9: #007572;
  --color10: #007049;
  --color11: #3E7000;
}

:focus {
  outline: none !important;
}

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

p {
  margin-bottom: 0;
}


/*=== NORMALIZAR ESTILOS DEL NAVEGADOR ===*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*=== JUEGO ===*/

.juegoLuces {
  display: flex;
  justify-content: center;
}

.lucesInicio,
.lucesFin {
  background-repeat: no-repeat;
  background-size: contain;
  width: 20%;
}

.lucesInicio {
  background-image: url(../img/cable-inicio.svg);
  background-position: bottom 46px right;
}

.lucesFin {
  background-image: url(../img/cable-fin.svg);
  background-position: bottom 46px left;
}

@media (max-width: 767px) {

  .lucesInicio {
    background-position: bottom 36px left;
    background-size: 120%;
  }

  .lucesFin {
    background-position: bottom 36px right;
    background-size: 120%;
  }
}

@media (max-width: 576px) {

  .lucesInicio {
    background-position: bottom 39px left;
    width: 100px;
    background-size: 100%;
  }

  .lucesFin {
    background-position: bottom 39px right;
    width: 100px;
    background-size: 100%;
  }
}

.bombillos {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .bombillos {
    margin-top: 10px;
  }
}

.bombillo {
  width: 40px;
  height: 50px;
  background-image: url(../img/bombillo.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 200%;
  margin: 0 -15px;
}

@media (max-width: 767px) {
  .bombillo {
    width: 30px;
    height: 40px;
    margin: 0 -15px;
  }
}

@keyframes zoomBombillo {
  0% {
    transform: translateY(20px) scale(5);
    mix-blend-mode: plus-lighter;
  }

  50% {
    transform: translateY(0px) scale(1);
    transform-origin: center top;
    mix-blend-mode: plus-lighter;
  }

  100% {
    transform: translateY(0px) scale(1);
    mix-blend-mode: plus-lighter;
  }
}

@keyframes zoomLuz {
  0% {
    background-size: 0%;
  }

  50% {
    background-size: cover;
  }

  100% {
    background-size: contain;
  }
}

.bombillo.bombillo--activo {
  background-position: top right;
  position: relative;
  animation: zoomBombillo 0.5s backwards;
}

.bombillo.bombillo--activo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 120%;
  background-image: url(../img/destello.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: plus-lighter;
  animation: zoomLuz 0.5s backwards;
}

.separaBombillo {
  width: 40px;
  background-image: url(../img/cuerda.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 576px) {
  .separaBombillo {
    width: 32px;
    background-size: 90%;
  }
}

.juegoAdivina {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  gap: 60px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 40px;
  padding-bottom: 60px;
  padding-left: 60px;
}

@media (max-width: 767px) {
  .juegoAdivina {
    padding: 20px 20px 20px 40px;
  }
}

.contenedorAyudas {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.contenedorAyudas .instrucciones {
  width: 80px;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, .4));
}

.contenedorAyudas .pistas {
  width: 60px;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, .4));
}

@media (max-width: 767px) {
  .contenedorAyudas {
    position: absolute;
    left: 5px;
    gap: 15px;
    max-width: 45px;
  }

  .contenedorAyudas .instrucciones {
    width: 40px;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, .4));
  }

  .contenedorAyudas .pistas {
    width: 40px;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, .4));
  }
}

.contenedorJuego {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.adivinaPalabra {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adivinaPalabra__item {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
}

@media (max-width: 767px) {
  .adivinaPalabra {
    gap: 5px;
  }

  .adivinaPalabra__item {
    flex-direction: column;
    margin-bottom: 20px;
  }
}

.item__intento {
  display: flex;
  align-items: center;
  background-color: var(--color3);
  border-radius: 2rem;
  padding: 1px 32px 1px 10px;
  font-weight: bold;
  color: var(--color1);
  position: relative;
  background-image: url(../img/intento-bg.png);
  background-size: 120%;
  background-position: center bottom -5px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .15));
  font-size: 18px;
}

.item__intentoNum {
  position: absolute;
  width: 42px;
  height: 42px;
  right: -10px;
  top: -12px;
  color: white;
  font-size: 24px;
  line-height: 2;
  background-image: url(../img/intento-inactivo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}

.item__palabra {
  display: flex;
  gap: 10px;
}

.item__letra {
  width: 100%;
  min-width: 20px;
  max-width: 45px;
  min-height: 20px;
  height: 45px;
  text-align: center;
  border-radius: 5px;
  background-color: var(--color3);
  border: 2px dashed var(--color3);
  box-shadow: 0 0 0 1px var(--color3);
  font-weight: bold;
  font-size: 30px;
  color: var(--color1);
  caret-color: var(--color1);
  cursor: pointer;
}

@media (max-width: 1200px) {

  .item__palabra {
    gap: 5px;
  }

  .item__letra {
    font-size: 25px;
  }
}

@media (max-width: 576px) {
  .item__letra {
    font-size: 22px;
    height: 35px;
    border: 1px dashed var(--color3);
  }
}

.item__letra:disabled[value=""] {
  opacity: .8;
  cursor: not-allowed;
}

@keyframes letraActiva {
  0% {
    box-shadow: 0 0 0 1px var(--color3), 0 0 0 1px var(--color1);
    filter: drop-shadow(0 0 1px var(--color1));
  }

  50% {
    box-shadow: 0 0 0 1px var(--color3), 0 0 0 3px var(--color1);
    filter: drop-shadow(0 0 10px var(--color1));
  }

  100% {
    box-shadow: 0 0 0 1px var(--color3), 0 0 0 1px var(--color1);
    filter: drop-shadow(0 0 1px var(--color1));
  }
}

.item__letra[value=""]:not(:disabled) {
  animation: letraActiva 1s infinite;
}

.item__letra.letra--incorrecta {
  background-color: var(--color6);
  border: 2px dashed var(--color5);
  box-shadow: 0 0 0 1px var(--color);
  color: white;
}

.item__letra.letra--existe {
  background-color: var(--color1);
  border: 2px dashed var(--color1);
  box-shadow: 0 0 0 1px var(--color1);
  color: white;
}

.item__letra.letra--correcta {
  background-color: var(--color4);
  border: 2px dashed var(--color3);
  box-shadow: 0 0 0 1px var(--color3);
  color: white;
}


.item__letra.letra--inactiva:disabled[value=""] {
  background-color: var(--color3);
  border: 2px dashed var(--color3);
  box-shadow: 0 0 0 1px var(--color3);
  opacity: .4;
}

.item__intento.intento--incorrecto {
  color: var(--color5);
}

.intento--incorrecto .item__intentoNum {
  background-image: url(../img/intento-incorrecto.png);
}

@keyframes zoomIntento {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }

  100% {
    transform: scale(1);
  }
}

.item__intento.intento--activo {
  color: var(--color1);
  animation: zoomIntento 1s infinite;
}

.intento--activo .item__intentoNum {
  background-image: url(../img/intento-activo.png);
}

.item__intento.intento--inactivo {
  color: var(--color2);
}

.intento--inactivo .item__intentoNum {
  background-image: url(../img/intento-inactivo.png);
}

.adivinaTeclado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  max-width: 550px;
}

@media (max-width: 767px) {
  .adivinaTeclado {
    display: none;
  }
}

.teclado__fila {
  display: flex;
  gap: 5px;
}

.fila__letra {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  padding: 0;
  margin: 0;
  background-color: var(--color1);
  border: 3px solid var(--color4);
  border-radius: 20px;
  padding: 10px;
  color: white;
  width: 100%;

  transform: scale(1);
  transition: transform .3s;

}

.fila__letra:hover,
.fila__letra:focus {
  transform: scale(1.02);
}

.fila__letra span {
  padding-top: 10px;
  font-size: 18px;
  font-weight: bold;
}


@media (max-width: 767px) {
  .fila__letra {
    border-radius: 10px;
    padding: 4px 2px;
    border-width: 1px;
  }

  .fila__letra span {
    font-size: 14px;
    font-weight: normal;
  }
}


/* Reiniciar */

.reiniciar {
  display: flex;
  margin-top: 40px;
  margin-bottom: 25px;
}

.hidden {
  display: none !important;
  visibility: hidden !important;
}


/* Boton comenzar */

.introduccion__btnComenzar,
.introduccion__btnContinuar,
.footer__reiniciar,
.descargar__insignia {
  animation: bounceIn 1.5s backwards;
  --btnComenzar__color: white;
  --btnComenzar__colorFondo: #B12217;
  padding: 10px 1em;
  background-color: var(--btnComenzar__colorFondo);
  color: var(--btnComenzar__color);
  background-image: url(../img/btn-bg.png), url(../img/btn-bg2.png);
  background-size: auto 100%, 30px;
  background-repeat: no-repeat;
  background-position: left bottom, top 3px right 5px;
  background-blend-mode: normal, overlay;
  font-weight: bold;
  margin-top: 1rem;
  border-radius: 2em;
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--fuenteTitulo);
  border: 4px solid #75D300;
  width: fit-content;

  transition: all .3s;
  text-decoration: none;
}

.introduccion__btnComenzar {
  font-size: 28px;
}

.introduccion__btnContinuar {
  font-size: 28px;
  border: none;
}

@media (max-width: 992px) {
  .introduccion__btnComenzar {
    font-size: 22px;
  }

  .introduccion__btnContinuar {
    font-size: 22px;
  }
}

.introduccion__btnComenzar {
  --btnComenzar__color: white;
  --btnComenzar__colorFondo: #a72517;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
}

.footer__reiniciar {
  --btnComenzar__color: white;
  --btnComenzar__colorFondo: #a72517;
  border: none;
  font-size: 22px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15);
}

.descargar__insignia {
  --btnComenzar__color: white;
  --btnComenzar__colorFondo: #a72517;
  border: none;
  font-size: 22px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15);
}

.introduccion__btnComenzar:hover,
.introduccion__btnContinuar:hover,
.footer__reiniciar:hover,
.descargar__insignia:hover {
  transform: scale(1.05);
}

.dNone {
  display: none;
}

.navidad {
  display: flex;
  flex-direction: column;
  padding: 40px;
  margin-bottom: 70px;
}

/* Estilos para el confeti */
.confeti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confeti {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFD700;
  opacity: 0.8;
}

.confeti.color-1 {
  background-color: #FF6B6B;
}

.confeti.color-2 {
  background-color: #FFD700;
}

.confeti.color-3 {
  background-color: #4ECDC4;
}

.confeti.color-4 {
  background-color: #95E1D3;
}

.confeti.color-5 {
  background-color: #F38181;
}

.controles {
  display: flex;
  flex-direction: column;
  align-items: center
}

@keyframes caer {
  to {
    transform: translateY(100vh) rotateZ(360deg);
    opacity: 0;
  }
}

.confeti.caer {
  animation: caer linear forwards;
}