body, html {/* Estilos generales */
    display: flex;
    flex-direction: column; /* Cambia a vertical */
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: rgb(255, 255, 255);
    scrollbar-width: none; /* Oculta scrollbars en Firefox */
}
#end-screen{
    background-image: url('./fin.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    margin: 0;
}

#FdJ{
    position: absolute;
    left: 35%;
    font-family: 'Consolas', sans-serif;
    font-size: 40px;
    color: rgb(189, 113, 32);
    text-align: center;
    border-radius: 5px;
    border: 2px solid white;
    width: 30%;
    background-color: white;
    padding: -5px;
    box-shadow: 6px 6px 0px rgba(206, 17, 38, 0.8),
                -6px -6px 0px rgba(0, 104, 71, 0.8);
}

#resumenFinal{
    position: absolute;
    left: -1.7%;
    top: 2%;
    z-index: 1;
    width: 35%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: black;
    font-family: 'Consolas', sans-serif;
    font-size: 16px;
    text-align: center;
    visibility: hidden;
    background-image: url('./resumenFinal.png');
    background-size: cover; /* Ajusta la imagen para llenar el div sin distorsionarla */
    background-position: left; /* Centra la imagen en caso de que no ocupe todo el div */
    background-repeat: no-repeat; /* Evita que la imagen se repita */  
}
#resumenFinal h1{
    margin: 10px;
    font-family: 'Wild Mexico';
    font-size: 36px;
}

#resumenFinal hr{
    margin: 5px;
    border: 1px solid black;
}

#resumenFinal h2{
    margin: 5px;
}

#resumenFinal h3{
    margin: 5px;
}
  
  .jGAN {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: white;
    font-weight: bold;
    transform: translateX(0); /* Posición inicial */
  }

  .jSEC {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: white;
    font-weight: bold;
    transform: translateX(0); /* Posición inicial */
  }

  

  .jTER {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: white;
    font-weight: bold;
    transform: translateX(0); /* Posición inicial */
  }

  .jULT {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: white;
    font-weight: bold;
    transform: translateX(0); /* Posición inicial */
  }

  .pFinal:nth-of-type(1){
    margin-top: 0%;

  }
  .pFinal:nth-of-type(2){
    margin-top: -19%;
  }
  .pFinal:nth-of-type(3){
    margin-top: -19%;
  }
  .pFinal:nth-of-type(4){
    margin-top: -19%;
  }
  

  #jp1{
    width: 5%;
    height: 360px;
    background-size: contain; /* Ajusta la imagen para llenar el div sin distorsionarla */
    background-position: right; /* Centra la imagen en caso de que no ocupe todo el div */
    background-repeat: no-repeat; /* Evita que la imagen se repita */    
}

#jp2{
    width: 5%;
    height: 360px;
    background-size: contain; /* Ajusta la imagen para llenar el div sin distorsionarla */
    background-position: right; /* Centra la imagen en caso de que no ocupe todo el div */
    background-repeat: no-repeat; /* Evita que la imagen se repita */  
}

#jp3{
    width: 5%;
    height: 360px;
    background-size: contain; /* Ajusta la imagen para llenar el div sin distorsionarla */
    background-position: right; /* Centra la imagen en caso de que no ocupe todo el div */
    background-repeat: no-repeat; /* Evita que la imagen se repita */  
}

#jp4{
    width: 5%;
    height: 360px;
    background-size: contain; /* Ajusta la imagen para llenar el div sin distorsionarla */
    background-position: right; /* Centra la imagen en caso de que no ocupe todo el div */
    background-repeat: no-repeat; /* Evita que la imagen se repita */   
}

#ganador{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    color: black;
    text-shadow: -1px 0 rgb(255, 255, 255), 0 1px rgb(255, 255, 255), 1px 0 rgb(255, 255, 255), 0 -1px rgb(255, 255, 255);
    top: 28%;
    left: 80%;
}

#segundo{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    color: black;
    text-shadow: -1px 0 rgb(255, 255, 255), 0 1px rgb(255, 255, 255), 1px 0 rgb(255, 255, 255), 0 -1px rgb(255, 255, 255);
    top: 28%;
    left: 80%;
}

#tercero{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    color: black;
    text-shadow: -1px 0 rgb(255, 255, 255), 0 1px rgb(255, 255, 255), 1px 0 rgb(255, 255, 255), 0 -1px rgb(255, 255, 255);
    top: 28%;
    left: 80%;
}

#ultimo{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    color: black;
    text-shadow: -1px 0 rgb(255, 255, 255), 0 1px rgb(255, 255, 255), 1px 0 rgb(255, 255, 255), 0 -1px rgb(255, 255, 255);
    top: 28%;
    left: 80%;
}


  @keyframes moveRightGAN {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(1000px); /* Distancia para jGAN */
    }
  }
  
  @keyframes moveRightSEC {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(800px); /* Distancia para jSEC */
    }
  }
  
  @keyframes moveRightTER {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(600px); /* Distancia para jTER */
    }
  }
  
  @keyframes moveRightULT {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(400px); /* Distancia para jULT */
    }
  }
  
#order-screen{
    background-image: url('./orden.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    margin: 0;
}
#order-end-screen{
    background-image: url('./orden.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    margin: 0;
}
#llegada-screen{
    background-image: url('./LlegadaMesa.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    margin: 0;
}
#evolucion-screen{
    background-image: url('./mictlan.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    margin: 0;
}
#grito1-screen{
    background-image: url('./grito1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    margin: 0;
}
#grito2-screen{
    background-image: url('./grito2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    margin: 0;
}
#grito31-screen{
    background-image: url('./grito3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    margin: 0;
}
#grito32-screen{
    background-image: url('./grito3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    margin: 0;
}
#grito33-screen{
    background-image: url('./grito3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    margin: 0;
}
#grid-containerEst {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 10px; /* Espacio entre elementos */
  }
#estadisticas-screen{
    background-image: url('./estadisticasAgustin.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    margin: 0;
}
#estadisticas-screen h2{
    font-family: 'Consolas', sans-serif;
    font-size: 40px;
    color: white;
    text-align: center;
    margin: 1%;
    border-radius: 5px;
    border: 2px solid white;
    width: 63%;
    background-color: black;
    padding: 5px;
    box-shadow: -4px -4px 1.5px rgb(140 88 48);
}
#TituloPresidente{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    font-size: 35px;
    color: white;
    text-align: center;
    top: 5.5%;
    left: 67%;
    border: 2px solid white;
    border-radius: 5px;
    background-color: black;
    padding: 5px 10px;
    box-shadow: 4px -4px 1.5px rgb(222, 181, 117);
}
#presidente{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    font-size: 25px;
    color: white;
    text-align: center;
    top: 82%;
    left: 72%;
    border: 2px solid white;
    border-radius: 5px;
    background-color: black;
    padding: 5px;
    box-shadow: 4px 4px 1.5px rgb(222, 181, 117);
}
.JE{
    font-family: 'Consolas', sans-serif;
    font-size: 25px;
    color: white;
    text-align: center;
    width: 25%;
    border: 2px solid white;
    border-radius: 5px;
    background-color: black;
    padding: 2px;   
    margin-left: 50px;
    box-shadow: -4px -4px 1.5px rgb(252, 231, 184);
}
.DE{
    font-family: 'Consolas', sans-serif;
    font-size: 25px;
    color: white;
    text-align: center;
    width: 25%;
    border: 2px solid white;
    border-radius: 5px;
    background-color: black;
    margin-left: 50px;
    box-shadow: -4px -4px 1.5px rgb(252, 231, 184);
}
#j1Estadisticas{
    margin-top: 10%;
    color: rgb(88, 255, 88);
}
#j2Estadisticas{
    margin-top: 9%;
    color: rgb(253, 36, 36);
    position: absolute;
    top: 12%;
    left: 30%;
}
#d2Estadisticas{
    margin-top: 9%;
    position: absolute;
    top: 22%;
    left: 30%;
}
#j3Estadisticas{
    margin-top: 5%;
    color: rgb(55, 55, 253);
}
#j4Estadisticas{
    margin-top: 11%;
    color: rgb(254, 254, 33);
    position: absolute;
    top: 32%;
    left: 30%;
}
#d4Estadisticas{
    margin-top: 11%;
    position: absolute;
    top: 42%;
    left: 30%;
}
#botonEstadistica{
    font-family: 'Consolas', sans-serif;
    font-size: 25px;
    color: white;
    text-align: center;
    width: 15%;
    border: 2px solid white;
    border-radius: 5px;
    background-color: black;
    padding: 5px;
    position: absolute;
    bottom: 3%;
    left: 23%;
    box-shadow: -4px -4px 1.5px rgb(252, 231, 184);
}
.dialogoGrito{
    position: absolute;
    left: 66%;
    bottom: -4%;
}
.dialogoGrito3{
    position: absolute;
    left: 10.2%;
    bottom: -3%;
}
.dialogoGrito32{
    position: absolute;
    left: 14%;
    bottom: -3%;
}
.dialogoGrito33{
    position: absolute;
    left: 11.2%;
    bottom: -3%;
}
.container-flecha {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flecha {
    text-align: right;
    font-size: larger;
    cursor: pointer;
}
.dialogoGrito h3{
    border: 2px solid white;
    border-radius: 5px;
    padding: 10px;
    background-color: black;
    color: white;
    font-family: 'Consolas', sans-serif;
    font-size: 28px;
    text-align: left;
    width: 100%;
}
.dialogoGrito3 h3{
    border: 2px solid white;
    border-radius: 5px;
    padding: 10px;
    background-color: black;
    color: white;
    font-family: 'Consolas', sans-serif;
    font-size: 24px;
    text-align: left;
    width: 100%;
}
.dialogoGrito32 h3{
    border: 2px solid white;
    border-radius: 5px;
    padding: 10px;
    background-color: black;
    color: white;
    font-family: 'Consolas', sans-serif;
    font-size: 24px;
    text-align: left;
    width: 100%;
}
.dialogoGrito33 h3{
    border: 2px solid white;
    border-radius: 5px;
    padding: 10px;
    background-color: black;
    color: white;
    font-family: 'Consolas', sans-serif;
    font-size: 24px;
    text-align: left;
    width: 100%;
}
#botonAbrir{
    position: absolute;
    bottom: 17%;
    left: 41.5%;
    font-family: 'consolas', sans-serif;
    font-size: 20px;
    background-color: black;
    color:white;
    border-radius: 5px;
    border: 2px solid white;
}

#pInicio{
    position: absolute;
    bottom: 2%;
    left: 5%;
    font-family: 'consolas', sans-serif;
    font-size: 20px;
    background-color: black;
    font-weight: bold;
    color:white;
    border-radius: 5px;
    border: 2px solid white;
    visibility: hidden;
    width: 20%;
}

#startAnimation{
    position: absolute;
    bottom: 2%;
    left: 42%;
    font-family: 'consolas', sans-serif;
    font-size: 20px;
    background-color: black;
    font-weight: bold;
    color:white;
    border-radius: 5px;
    border: 2px solid white;
}
#botonAbrir2{
    position: absolute;
    bottom: 22%;
    left: 63%;
    font-family: 'consolas', sans-serif;
    font-size: 20px;
    background-color: black;
    color:white;
    border-radius: 5px;
    border: 2px solid white;
}
#dialogoLlegada{
    visibility: hidden;
    
}
#llegada-gc{
    visibility: hidden;
    position: absolute;
    bottom: 2%;
    left: 80%;
    font-family: 'consolas', sans-serif;
    font-size: 20px;
    background-color: black;
    color:white;
    border-radius: 5px;
    border: 2px solid white;
}
#llegada-gc2{
    visibility: hidden;
    position: absolute;
    bottom: 2%;
    left: 80%;
    font-family: 'consolas', sans-serif;
    font-size: 20px;
    background-color: black;
    color:white;
    border-radius: 5px;
    border: 2px solid white;
}
#dialogoLlegada{
    position: absolute;
    top: 20%;
    left: 35%;
    font-size: 24px;
    font-family: 'consolas', sans-serif;

}
.remarcar{
    color: #db002c;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Cuatro columnas iguales */
    grid-template-rows: repeat(2, 1fr); /* Dos filas iguales */
    gap: 0px 0px; /* Espacio entre elementos */
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 73%;
    top: 0;
    left: 0;
    margin: 1.5%;
    font-family: 'Consolas', sans-serif;
  }
  .grid-containerOrder{
    display: grid;
    grid-template-columns: repeat(4,200px);
    grid-template-rows: repeat(2, 0px);
    gap: 0px 0px;
    font-family: 'Wild Mexico';
    font-size: 35px;
    justify-content: center;
    align-items: center;
  }
  .grid-containerOrderEnd{
    display: grid;
    grid-template-columns: repeat(4,200px);
    grid-template-rows: repeat(2, 0px);
    gap: 0px 0px;
    font-family: 'Wild Mexico';
    font-size: 35px;
    justify-content: center;
    align-items: center;
    margin-top:4%;
  }
  #tituloOrden{
    font-size: 60px;
    font-family: 'Consolas', sans-serif;
    text-shadow: -4px 0 rgb(0, 0, 0), 0 4px rgb(0, 0, 0), 4px 0 rgb(0, 0, 0), 0 -4px rgb(0, 0, 0);
    color: white;
    text-align: center;
    margin-top: 12%;
    margin-bottom: 15%;
  }
  #tituloOrdenEnd{
    font-size: 60px;
    font-family: 'Consolas', sans-serif;
    text-shadow: -4px 0 rgb(0, 0, 0), 0 4px rgb(0, 0, 0), 4px 0 rgb(0, 0, 0), 0 -4px rgb(0, 0, 0);
    color: white;
    text-align: center;
    margin-top: 12%;
    margin-bottom: 9%;
  }
  .tituloOrder{
    font-size: 45px;
    font-family: 'Consolas', sans-serif;
    text-align: center;
    margin-top: -10px;
    font-family: 'Wild Mexico';
    border: 5px dashed black;
    padding: 2px 5px;
    margin-right: 20px;
  }
  .tituloOrdenEnd{
    font-size: 30px;
    margin-right: 20px;
    font-family: 'Wild Mexico';
    border: 5px dashed black;
  }
  #botonOrdenD{
    background-color: black;
    color:white;
    border-radius: 5px;
    border: 1px solid black;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    bottom: 12%;
    left: 41.5%;
  }
  #botonOrdenEnd{
    background-color: black;
    color:white;
    border-radius: 5px;
    border: 1px solid black;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    bottom: 30%;
    left: 41%;
  }
  #botonOrden1{
    background-color: rgb(88, 255, 88);
    color:black;
    border-radius: 5px;
    border: 1px solid white;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin-left: -3.5%;
    width: 85%;
  }
  #botonOrden2{
    background-color: rgb(255, 64, 64);
    color:black;
    border-radius: 5px;
    border: 1px solid white;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin-left: -3.5%;
    width: 85%;
  }
  #botonOrden3{
    background-color: rgb(66, 66, 255);
    color:black;
    border-radius: 5px;
    border: 1px solid white;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin-left: -3.5%;
    width: 85%;
  }
  #botonOrden4{
    background-color: rgb(255, 255, 78);
    color:black;
    border-radius: 5px;
    border: 1px solid white;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin-left: -3.5%;
    width: 85%;
  }
  #orderEnd-1{
    font-family: 'consolas', sans-serif;
    color: rgb(88, 255, 88);
    text-shadow: -1.5px 0 rgb(0, 0, 0), 0 1.5px rgb(0, 0, 0), 1.5px 0 rgb(0, 0, 0), 0 -1.5px rgb(0, 0, 0);
    margin-right: 10%;
  }
    #orderEnd-2{
        font-family: 'consolas', sans-serif;
        color: rgb(255, 64, 64);
        text-shadow: -1.5px 0 rgb(0, 0, 0), 0 1.5px rgb(0, 0, 0), 1.5px 0 rgb(0, 0, 0), 0 -1.5px rgb(0, 0, 0);
        margin-right: 9%;
    }
    #orderEnd-3{
        font-family: 'consolas', sans-serif;
        color: rgb(66, 66, 255);
        text-shadow: -1.5px 0 rgb(0, 0, 0), 0 1.5px rgb(0, 0, 0), 1.5px 0 rgb(0, 0, 0), 0 -1.5px rgb(0, 0, 0);
        margin-right: 10%;
    }
    #orderEnd-4{
        font-family: 'consolas', sans-serif;
        color: rgb(255, 255, 78);
        text-shadow: -1.5px 0 rgb(0, 0, 0), 0 1.5px rgb(0, 0, 0), 1.5px 0 rgb(0, 0, 0), 0 -1.5px rgb(0, 0, 0);
        margin-right: 10%;
    }
  .player-info {
    padding: 0px;
    border-radius: 7px;
    height: 26vw;
    font-weight: bold;
    border: 3px solid rgb(255, 255, 255);
    padding-left: 30px;
  }
#PIJ1{
    background-color: rgb(56, 255, 56);
}
#PIJ1 h3{
    position: relative;
    top: -5%;
    left: -5%;
    font-family: 'Wild Mexico';
    border: 5px dashed black;
    padding: 2px 5px;
}

#PIJ2{
    background-color: rgb(253, 36, 36);
}
#PIJ2 h3{
    position: relative;
    top: -5%;
    left: -5%;
    font-family: 'Wild Mexico';
    border: 5px dashed black;
    padding: 2px 5px;
}

#PIJ3{
    background-color: rgb(55, 55, 253);
}
#PIJ3 h3{
    position: relative;
    top: -5%;
    left: -5%;
    font-family: 'Wild Mexico';
    border: 5px dashed black;
    padding: 2px 5px;
}

#PIJ4{
    background-color: rgb(254, 254, 33);
}
#PIJ4 h3{
    position: relative;
    top: -5%;
    left: -5%;
    font-family: 'Wild Mexico';
    border: 5px dashed black;
    padding: 2px 5px;
}
@font-face {
    font-family: 'Wild Mexico';
    src: url('./Wild\ Mexico.ttf');
}
#user-info-form-1{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    top: 11%;
    left: 22%;
}
#user-name-1{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    margin-top: 15%;
    left: -1%;
    width: 130%;
}
#name1{
    float: left;
    width: 100%;
    margin-left: 15%;
    margin-right: 20%;
    margin-top: 2.5%;
}
#user-state-1{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    margin-left: -232%;
    margin-top: 40%;
    left: 145%;
    width: 115%;
    height: 20%;
}
#state1{
    position: absolute;
    width: 200%;
    margin-left: -180%;
    margin-top: 30%;
}
#user-municipality-1{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    margin-left: -120%;
    margin-top: 70%;
    height: 20%;
    left: 125%;
    width: 115%;
}
#municipality1{
    position: absolute;
    width: 200%;
    margin-left: -90%;
    margin-top: 60%;
}
#jugadorF1{
    float: left;
    margin-left: 1%;
    margin-top: 7%;
    font-size: 36px;
    border: 1px ;
}
#user-info-form-2{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    top: 3.5%;
    left: 73%;
}
#user-name-2{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    margin-top: 45%;
    left: -10%;
    width: 130%;
}
#name2{
    float: left;
    width: 100%;
    margin-left: 5%;
    margin-right: 20%;
    margin-top: 31%;
}
#user-state-2{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    margin-left: -225%;
    margin-top: 70%;
    left: 135%;
    width: 115%;
    height: 20%;
}
#state2{
    position: absolute;
    width: 200%;
    margin-left: -260%;
    margin-top: 60%;
}
#user-municipality-2{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    margin-left: -123%;
    margin-top: 100%;
    height: 20%;
    left: 125%;
    width: 115%;
}
#municipality2{
    position: absolute;
    width: 200%;
    margin-left: -96%;
    margin-top: 90%;
}
#jugadorF2{
    float: left;
    margin-left: 1%;
    margin-top: 7%;
    font-size: 36px;
}

#user-info-form-3{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    top: 54%;
    left: 22%;
}
#user-name-3{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    margin-top: 45%;
    left: -1%;
    width: 130%;
}
#name3{
    float: left;
    width: 100%;
    margin-left: 15%;
    margin-right: 20%;
    margin-top: 31%;
}
#user-state-3{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    margin-left: -222%;
    margin-top: 72%;
    left: 135%;
    width: 115%;
    height: 20%;
}
#state3{
    position: absolute;
    width: 200%;
    margin-left: -265%;
    margin-top: 62%;
}
#user-municipality-3{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    margin-left: -120%;
    margin-top: 100%;
    height: 20%;
    left: 125%;
    width: 115%;
}
#municipality3{
    position: absolute;
    width: 200%;
    margin-left: -90%;
    margin-top: 90%;
}
#jugadorF3{
    float: left;
    margin-left: 1%;
    margin-top: 7%;
    font-size: 36px;
}

#user-info-form-4{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    top: 54%;
    left: 72%;
}
#user-name-4{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    margin-top: 45%;
    left: -1%;
    width: 130%;
}
#name4{
    float: left;
    width: 100%;
    margin-left: 15%;
    margin-right: 20%;
    margin-top: 31%;
}
#user-state-4{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    margin-left: -222%;
    margin-top: 75%;
    left: 135%;
    width: 115%;
    height: 20%;
}
#state4{
    position: absolute;
    width: 200%;
    margin-left: -265%;
    margin-top: 65%;
}
#user-municipality-4{
    position: absolute;
    font-family: 'Consolas', sans-serif;
    margin-left: -118%;
    margin-top: 100%;
    height: 20%;
    left: 125%;
    width: 115%;
}
#municipality4{
    position: absolute;
    width: 200%;
    margin-left: -90.5%;
    margin-top: 90%;
}
#jugadorF4{
    float: left;
    margin-left: 1%;
    margin-top: 7%;
    font-size: 36px;
}
#botonIJ{
    position: absolute;
    bottom: 5%;
    left: 78.5%;
    background-color: black;
    color:white;
    border-radius: 5px;
    border: 1px solid black;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    font-size: 20px;
}
#divAyuda{
    position: absolute;
    background-color: rgb(255, 173, 49);
    width: 24%;
    height: 78%;
    left:75%;
    top:3%;
    border-radius: 5px;
    padding-top: 25px;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
}
.screen {
    display: none;
    text-align: center;
    width: 100%; /* Asegura que ocupe todo el ancho */
    overflow: hidden;
}

.show {
    display: block;
}
#loading-text {
    animation: blink 1s infinite;
    margin-top: 80px;
    margin-bottom: 150px;
    font-size: 24px;
    cursor: pointer;
    color: rgb(0, 0, 0);
    text-shadow: -2px 0 rgb(255, 255, 255), 0 2px rgb(255, 255, 255), 2px 0 rgb(255, 255, 255), 0 -2px rgb(255, 255, 255);
    font-family: 'Consolas', sans-serif;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
#start0{
    position: absolute;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 110vw;
    height: 120vh;
    top: -9%;
    left: -4.9%;
    box-shadow: 0px 0px 500px rgba(0, 0, 0, 1);
}

#inicio0{
    width: 100vw; /* 100% del ancho del viewport */
    height: 100vh; /* 100% de la altura del viewport */
    background-color: #373737; /* Color de fondo para visualizar */ 
           
}
.screen-blanco{
    background-color: white; /* Color de fondo para visualizar */
}

.screen-negro{
    background-color: black; /* Color de fondo para visualizar */
}
#TituloVideojuego{
    font-size: 170px;
    color: #ffffff;
    margin: 10px;
    margin-top: 55%;
    cursor: default;
    text-shadow: -10px 0 black, 0 10px black, 10px 0 black, 0 -10px black;
    font-family: 'Consolas', sans-serif;    
}

#SubtituloVideojuego{
    font-size: 28px;
    color: white;
    margin: 10px;
    text-shadow: -2.3px 0 black, 0 2.3px black, 2.3px 0 black, 0 -2.3px black;
    font-family: 'Consolas', sans-serif;
    cursor: default;
    width: 150%;
    margin-left: -25%;
}
#textoCentrado {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrar horizontal y verticalmente */
    z-index: 2; /* Asegura que el texto esté sobre la imagen */
    text-align: center;
    color: rgb(0, 0, 0); /* Texto en blanco para contraste */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Sombra para mejorar legibilidad */     
}
#menu-screen{
    margin: 0;
    width: 220vh;
    height: 100vh; /* Altura igual al viewport */
    background-image: url('./menu2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.butonesMenu{
    border-radius: 5px;
    border-color: #ffffff;
    color: rgb(189, 113, 32);
    background-color: rgb(255, 255, 255);
    font-family: 'Consolas', sans-serif;
    font-size: 28px;
    width: 350px;
    height: 120;;
    box-shadow: -6px -6px 0px rgba(0, 0, 0, 0.7);
}
.button-container {
    display: flex;
    flex-direction: column; /* Asegura que los botones estén en vertical */
    align-items: center; /* Centra los botones horizontalmente */
}
button {
    margin: 10px; /* Espaciado entre botones */
    padding: 10px 20px; /* Tamaño del botón */
    font-size: 16px; /* Tamaño de fuente */
    width: 200px; /* Ancho del botón */
    cursor: pointer;
}
#about-button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    width: 200px; /* Ancho del botón */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}
#title-screen {
    width: 300vh; /* Ancho completo */
    height: 100vh; /* Altura completa */
    background-color: black; /* Fondo negro para esta sección */
    
}
#fondoLoading {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 4%;
    width: 90%;
    height: 110vh;
    background-image: url('cargando.gif'); /* Reemplaza con tu fondo */
    background-size: cover;
    background-position: center;
    
}
#tituloMenu{
    margin-top: 100px;
    font-family: 'Consolas', sans-serif;
    font-size: 54px;
    text-shadow: -4px 0 rgb(0, 0, 0), 0 4px rgb(0, 0, 0), 4px 0 rgb(0, 0, 0), 0 -4px rgb(0, 0, 0);
    color: white;
    cursor: default;
}
#descriptionAcercaDe {/* Estilos para el área de descripción */
    display: none;
    position: absolute;
    background-color: #FBEC5D;
    border: 3px solid #000000;
    padding: 10px;
    font-size: 17px;
    border-radius: 5px;
    margin-top: 10px; /* Ajustar según sea necesario */
    margin-left: -30px;
    top: 25%; /* Ajustar para posicionar correctamente */
    left: 70%; /* Ajustar para centrar si es necesario */
    width: 30%;
    height: 58%;
    font-family: 'Consolas', sans-serif;
    white-space: pre-wrap; /* Interpreta \n y \t correctamente */
    tab-size: 34; /* Tamaño de tabulación */
    text-align: left;
}

#descriptionAcercaDe2{/* Estilos para el área de descripción */
    display: none;
    position: absolute;
    background-color: #FBEC5D;
    border: 3px solid #000000;
    padding: 10px;
    font-size: 17px;
    border-radius: 5px;
    margin-top: 10px; /* Ajustar según sea necesario */
    margin-left: -30px;
    top: 25%; /* Ajustar para posicionar correctamente */
    left: 2.7%; /* Ajustar para centrar si es necesario */
    width: 30%;
    height: 57%;
    font-family: 'Consolas', sans-serif;
    white-space: pre-wrap; /* Interpreta \n y \t correctamente */
    tab-size: 34; /* Tamaño de tabulación */
    text-align: left;
}


#descriptionLocal {/* Estilos para el área de descripción */
    display: none;
    position: absolute;
    background-color: #FBEC5D;
    border: 3px solid #000000;
    padding: 10px;
    font-size: 17px;
    border-radius: 5px;
    margin-top: 10px; /* Ajustar según sea necesario */
    margin-left: -30px;
    top: 22%; /* Ajustar para posicionar correctamente */
    left: 70%; /* Ajustar para centrar si es necesario */
    width: 30%;
    height: 72%;
    text-align: left;
    font-family: 'Consolas', sans-serif;
    white-space: pre-wrap; /* Interpreta \n y \t correctamente */
    tab-size: 34; /* Tamaño de tabulación */
}

#descriptionMultijugador {/* Estilos para el área de descripción */
    display: none;
    position: absolute;
    background-color: #FBEC5D;
    border: 3px solid #000000;
    padding: 10px;
    font-size: 17px;
    border-radius: 5px;
    margin-top: 10px; /* Ajustar según sea necesario */
    margin-left: -30px;
    top: 25%; /* Ajustar para posicionar correctamente */
    left: 70%; /* Ajustar para centrar si es necesario */
    width: 30%;
    height: 53%;
    font-family: 'Consolas', sans-serif;
    white-space: pre-wrap; /* Interpreta \n y \t correctamente */
    tab-size: 34; /* Tamaño de tabulación */
    text-align: left;
}

#descriptionComentarios {/* Estilos para el área de descripción */
    display: none;
    position: absolute;
    background-color: #FBEC5D;
    border: 3px solid #000000;
    padding: 10px;
    font-size: 17px;
    border-radius: 5px;
    margin-top: 10px; /* Ajustar según sea necesario */
    margin-left: -30px;
    top: 25%; /* Ajustar para posicionar correctamente */
    left: 70%; /* Ajustar para centrar si es necesario */
    width: 30%;
    height: 53%;
    font-family: 'Consolas', sans-serif;
    white-space: pre-wrap; /* Interpreta \n y \t correctamente */
    tab-size: 34; /* Tamaño de tabulación */
    text-align: left;
}
#about-area {
    margin: 10px;
    padding: 10px;
    font-size: 28px;
    width: 400px; /* Ancho del área */
    height: 35px;;
    text-align: center; /* Centra el texto */
    border: 1px solid rgb(189, 113, 32); /* Borde para hacer visible el área */
    border-radius: 5px; /* Bordes redondeados */
    background-color: rgb(189, 113, 32); /* Color de fondo */
    cursor: help; /* Cambia el cursor al pasar sobre el área */
    font-family: 'Consolas', sans-serif;
    box-shadow: 6px 6px 0px rgba(206, 17, 38, 0.8),
                -6px -6px 0px rgba(0, 104, 71, 0.8);
    color: white;
    
}
/* Estilo para el contenedor de coordenadas en la esquina superior derecha */
#coordinates {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
}

#map-screen {
    position: relative; /* Para que los elementos dentro se coloquen correctamente */
    overflow: scroll; /* Permite el desplazamiento dentro de este contenedor */
    height: 100vh; /* Ocupa toda la altura de la ventana */
    width: 100%; /* Ocupa todo el ancho de la ventana */
    /* overflow: hidden; */
}
#map-screen::-webkit-scrollbar {
    background-color: black;
}

/* Estilo del "track" (canal por donde se mueve el thumb) */
#map-screen::-webkit-scrollbar-track {
    background-color: black;
    border-radius: 10px; /* Bordes redondeados */
}

/* Estilo del "thumb" (la parte que se mueve) */
#map-screen::-webkit-scrollbar-thumb {
    background-color: white; /* Color principal */
    border-radius: 5px;
}

/* Estilo al pasar el mouse por el "thumb" */
#map-screen::-webkit-scrollbar-thumb:hover {
    background-color: rgb(211, 211, 211); /* Color más oscuro al pasar el mouse */
}
.map-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150%;
    height: auto;
    object-fit: contain; /* Mantiene las proporciones originales sin deformar */
}
.map-container img {
    max-width: none;
    max-height: none;
    width: 9900px;
    height: 7650px;
}
#map {
    width: 100%; /* Aumenta el ancho del mapa al 100% del contenedor */
    height: auto; /* Mantiene la altura original */
    /* Ajusta el tamaño para hacer zoom */
    transform: scale(5); /* Aumenta el zoom (puedes ajustar este valor) */
    transform-origin: top left; /* Mantiene la esquina superior izquierda como punto de referencia */
    object-fit: contain; /* Mantiene las proporciones originales sin deformar */
}
#lluvia {
    position: fixed; /* El GIF permanece fijo en la ventana del usuario */
    top: 0; /* Comienza desde la parte superior de la ventana */
    left: 0; /* Comienza desde la parte izquierda de la ventana */
    width: 100%; /* Cubre todo el ancho de la ventana */
    height: 100%; /* Cubre toda la altura de la ventana */
    pointer-events: none; /* Evita que interfiera con clics o selecciones */
    z-index: 2; /* Se asegura de estar encima del contenido del mapa */
    visibility: hidden; /* Inicialmente oculto */
  }
  #nieve {
    position: fixed; /* El GIF permanece fijo en la ventana del usuario */
    top: 0; /* Comienza desde la parte superior de la ventana */
    left: 0; /* Comienza desde la parte izquierda de la ventana */
    width: 100%; /* Cubre todo el ancho de la ventana */
    height: 100%; /* Cubre toda la altura de la ventana */
    pointer-events: none; /* Evita que interfiera con clics o selecciones */
    z-index: 2; /* Se asegura de estar encima del contenido del mapa */
    visibility: hidden; /* Inicialmente oculto */
  }
  #humoNegro {
    position: fixed; /* El GIF permanece fijo en la ventana del usuario */
    top: 0; /* Comienza desde la parte superior de la ventana */
    left: 0; /* Comienza desde la parte izquierda de la ventana */
    width: 100%; /* Cubre todo el ancho de la ventana */
    height: 100%; /* Cubre toda la altura de la ventana */
    pointer-events: none; /* Evita que interfiera con clics o selecciones */
    z-index: 2; /* Se asegura de estar encima del contenido del mapa */
    visibility: hidden; /* Inicialmente oculto */
  }

#xoloi{
    visibility: hidden;
}
  

#player1 {
    position: absolute;
    width: auto;
    height: 13%;
    transform: translate(-40%, -90%);
}

#player2 {/* Estilos para el jugador */
    position: absolute;
    width: auto;
    height: 13%;
    transform: translate(-40%, -90%);
}

#player3 {/* Estilos para el jugador */
    position: absolute;
    width: auto;
    height: 13%;
    transform: translate(-40%, -90%);
}

#player4 {/* Estilos para el jugador */
    position: absolute;
    width: auto;
    height: 13%;
    transform: translate(-40%, -90%);
}

#player-info-screen {
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    border: 3px solid black;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
    grid-gap: 10px; /* Espacio entre elementos */
    width: 99%;
    color:white;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
  }

  #player-info-screen h3 {
    font-size: 35px;
    margin: 0;
    font-family: 'Consolas', sans-serif;
    
    
  }
  #player-llegada{
    color:black;
    text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
    font-weight: dashed;
  }

#propiedades-cuadro {
    position: fixed;
    top: 53.5%;
    left: 10px;
    background-color: rgb(157, 217, 238);
    color: black;
    border: 3px solid black;
    padding: 10px;
    border-radius: 5px;
    font-size: 20px;
    width: 11%;
    height: 6%;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    cursor: pointer;
}

#mispropiedades{
    pointer-events: none;
    align-items: center;
    margin-top: 6%;
}
#mispropiedades-name{
    pointer-events: none; /* Evita que interfiera con el clic */
    font-size: 30px;
    margin: 0px 0;
    align-items: center;
    vertical-align: middle; 
}

#mispropiedades-terminar {
    position: fixed;
    top: 71.2%;
    left: 79.5%;
    height: 6%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#propiedad-name {
    pointer-events: none; /* Evita que interfiera con el clic */
    font-size: 24px;
    margin: 1px 0;
}

#mispropiedades-info {
    position: fixed;
    top: 46%;
    left: 50%;
    width: 55%;
    height: 60%;
    transform: translate(-50%, -41%);
    background-color: rgb(113, 209, 241);
    border: 6px solid black;
    color: black;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    transition: visibility 0.3s ease, opacity 0.3s ease;
    justify-content: space-between;
    overflow-y: visible; 
    overflow-x: hidden;
}

/* Estilo general del scrollbar */
#mispropiedades-info::-webkit-scrollbar {
    width: 6px; /* Ancho del scrollbar */
    background-color: rgb(113, 209, 241);
}

/* Estilo del "track" (canal por donde se mueve el thumb) */
#mispropiedades-info::-webkit-scrollbar-track {
    background-color: rgb(113, 209, 241);
    border-radius: 10px; /* Bordes redondeados */
}

/* Estilo del "thumb" (la parte que se mueve) */
#mispropiedades-info::-webkit-scrollbar-thumb {
    background-color: white; /* Color principal */
    border-radius: 10px; /* Bordes redondeados */
}

/* Estilo al pasar el mouse por el "thumb" */
#mispropiedades-info::-webkit-scrollbar-thumb:hover {
    background-color: rgb(228, 228, 228); /* Color más oscuro al pasar el mouse */
}


.mispropiedades{
    text-align: left;
    top: 50px;
    font-size: 22px;
    margin: 15px 0px;
    padding: 0px 5px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.1);
}

#mispropiedades-vender {
    position: fixed;
    top: 25%;
    left: 79.5%;
    height: 6%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#mispropiedades-cancelar {
    position: fixed;
    top: 33%;
    left: 79.5%;
    height: 6%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}


#terminar-cuadro {
    position: fixed;
    top: 63%;
    left: 10px;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 10px;
    border-radius: 5px;
    font-size: 20px;
    width: 8%;
    height: 6%;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    cursor: pointer;
}

#Terminar{
    pointer-events: none;
    align-items: center;
    margin-top: 6%;
}
#tituloMJ{
    position: fixed;
    top:22%;
    left: 10px;
    background-color:rgb(252, 167, 76);
    color:black;
    border: 3px solid black;
    padding: 10px;
    border-radius: 5px;
    font-size: 30px;
    width: 20%;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    cursor: default;
}

#Dado-cuadro {
    position: fixed;
    top: 34.5%;
    left: 10px;
    background-color: rgb(73, 254, 73);
    color: black;
    border: 3px solid black;
    padding: 10px;
    border-radius: 5px;
    font-size: 20px;
    width: 5%;
    height: 6%;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    cursor: pointer;
}

#Dado-mapa{
    pointer-events: none;
    align-items: center;
    margin-top: 6%;
    font-size: 24px;
}

#Dado-resto{
    position: fixed;
    top: 27.5%;
    left: 7.7%;
    background-color: rgb(255, 74, 74);
    color: black;
    border: 3px solid black;
    padding: 10px;
    border-radius: 5px;
    font-size: 30px;
    align-items: center;
    vertical-align: middle;
    width: 5%;
    height: 6%;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    cursor: default;
}







.right-align {
    display: inline-block;
    text-align: right;
    width: 100%; /* Ajusta según sea necesario */
}

#municipio-info {
    position: fixed;
    top: 46%;
    left: 50%;
    width: 55%;
    height: 60%;
    transform: translate(-50%, -41%);
    background-color: rgb(156, 219, 240);
    border: 6px solid rgb(188, 187, 185);
    color: black;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
    visibility: visible;
    transition: visibility 0.3s ease, opacity 0.3s ease;
    justify-content: space-between;
}

#verderojo-info {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 8%;
    transform: translate(-50%, -41%);
    background-color: rgb(1, 197, 135); /* Rojo */
    border: 10px solid rgb(188, 187, 185);
    color: white;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 30px;
    text-align: center;
    visibility: visible;
    transition: visibility 0.3s ease, opacity 0.3s ease;
    /* Nuevas Propiedades */
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */

}

#verderojo-name {
    pointer-events: none; /* Evita que interfiera con el clic */
    font-size: 30px;
    margin: 0px 0;
    align-items: center;
    vertical-align: middle;
}

#blancatricolor-info {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 8%;
    transform: translate(-50%, -41%);
    background-color: white; /* Tricolor */
    border: 10px solid rgb(188, 187, 185);
    color: white;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 30px;
    text-align: center;
    visibility: hidden;
    transition: visibility 0.3s ease, opacity 0.3s ease;
    /* Nuevas Propiedades */
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */

}

#blancatricolor-name {
    pointer-events: none; /* Evita que interfiera con el clic */
    font-size: 24px;
    margin: 1px 0;
    visibility: hidden;
}

#municipio-name {
    pointer-events: none; /* Evita que interfiera con el clic */
    font-size: 30px;
    margin: 0px 0;
    align-items: center;
    vertical-align: middle;
}

#verderojo-terminar {
    position: fixed;
    top: 82.3%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
}

#blancatricolor-terminar {
    position: fixed;
    top: 320px;
    left: -104px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    visibility: hidden;
}




#oxxo-info {
    position: fixed;
    top: 42%;
    left: 50%;
    width: 55%;
    height: 50%;
    transform: translate(-50%, -41%);
    background-color: rgb(255 240 1);
    border: 6px solid rgb(188, 187, 185);
    color: black;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    transition: visibility 0.3s ease, opacity 0.3s ease;
    justify-content: space-between;
}



#municipio-oxxo-cdmx {
    position: fixed;
    top: 69.5%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: rgb(255 240 1);
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
}

#municipio-cdmx {
    position: fixed;
    top: 68%;
    left: 100.8%;
    height: 8%;
    text-align: center;
    background-color: black;
    color: rgb(237, 159, 77);
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#municipio-terminar {
    position: fixed;
    top: 82.3%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
}


#oxxo-terminar {
    position: fixed;
    top: 80.5%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
}

#comment-section {
    display: none;
    position: absolute;
    border: 2px solid #000000;
    top: 25%;
    right: 68%;
    width: 28%;
    height: 60%;
    padding: 10px;
    background-color: purple;
    color: #00a2ff;
    border-radius: 5px;
    font-weight: bold;
    font-size: 24px;;
    font-family: 'consolas', sans-serif;
  }
    #comment-section p {
        margin: 10px 10px 20px;
        font-size: 28px;
        font-family: 'consolas', sans-serif;
    }
  #comment-section textarea {
    width: 100%;
    height: 59%;
    margin-bottom: -10px;
    margin-left: -4px;
    background-color: #ddfffc;
    border: 2px solid #d9ff00;;
    color: black;
    font-family: 'consolas', sans-serif;
  }
  #comment-section button {
    margin-right: 10px;
    font-weight: bold;
    font-family: 'consolas', sans-serif;
  }

  #send-comment{
    background-color: pink;
    border-color: rgb(81, 255, 0);
  }

  
  #close-comment{
    background-color: #61ffef;
    color: black;
    border-color: orange;
  }

#llegada-figure{
    width: 70px; /* Tamaño del círculo */
    height: 70px; /* Tamaño del círculo */
    pointer-events: none;
    transform: translate(-50%, -50%); /* Centra el círculo */ 
    background-image: url('llegadaFigura.gif');
}

#posada-figure{
    width: 160px; /* Tamaño del círculo */
    height: 120px; /* Tamaño del círculo */
    pointer-events: none;
    transform: translate(-50%, -90%); /* Centra el círculo */ 
    background-image: url('./posadaFA.gif');
    visibility: hidden;
}

#efectoMaldicion{
    width: 150px; /* Tamaño del círculo */
    height: 150px; /* Tamaño del círculo */
    pointer-events: none;
    transform: translate(-42%, -70%); /* Centra el círculo */ 
    background-image: url('./maldicion.gif');
    visibility: hidden;
}

.municipio-cosas {
    text-align: left;
    font-size: 22px;
    top: 0%;
    margin: 13px 0;
    cursor: pointer;
    padding: 0px 5px;
    background-color: white;
    position: relative;
    border-radius: 5px;
}


#municipio-cosas-terminar {
    position: fixed;
    top: 20%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#municipio-cosas-comprar {
    position: fixed;
    top: 7%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: rgb(156, 219, 240);
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

.oxxo-cosas{
    text-align: left;
    font-size: 22px;
    top: 0%;
    margin: 13px 0;
    cursor: pointer;
    padding: 0px 5px;
    background-color: white;
    position: relative;
    border-radius: 5px;
}

#oxxo-cosas-terminar {
    position: fixed;
    top: 20.5%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#oxxo-cosas-comprar {
    position: fixed;
    top: 7%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: rgb(255 240 1);
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#oxxo-cosas-vender {
    position: fixed;
    top: 67%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: rgb(255 240 1);
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
}

#vender-oxxo-terminar {
    position: fixed;
    top: 80.5%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#miscartas-info {
    position: fixed;
    top: 42%;
    left: 50%;
    width: 55%;
    height: 50%;
    transform: translate(-50%, -41%);
    background-color: rgb(255 240 1);
    border: 6px solid rgb(188, 187, 185);
    color: black;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    transition: visibility 0.3s ease, opacity 0.3s ease;
    justify-content: space-between;
}

#vender-oxxo-name{
    pointer-events: none; /* Evita que interfiera con el clic */
    font-size: 30px;
    margin: 0px 0;
    align-items: center;
    vertical-align: middle;
}

.miscartas{
    text-align: left;
    font-size: 22px;
    top: 0%;
    margin: 13px 0;
    cursor: pointer;
    padding: 0px 5px;
    background-color: white;
    position: relative;
    border-radius: 5px;
}
.miscartasJ{
    text-align: left;
    font-size: 22px;
    top: 0%;
    margin: 13px 0;
    cursor: pointer;
    padding: 0px 5px;
    background-color: black;
    position: relative;
    border-radius: 5px;
    color:white;
}

#vender-cancelar-oxxo {
    position: fixed;
    top: 20.5%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#vender-carta-oxxo {
    position: fixed;
    top: 7%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: rgb(255 240 1);
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#helicoptero-info {
    position: fixed;
    top: 46%;
    left: 50%;
    width: 40%;
    height: 50%;
    transform: translate(-50%, -41%);
    background-color: rgb(63, 71, 205);
    border: 6px solid rgb(188, 187, 185);
    color: white;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    transition: visibility 0.3s ease, opacity 0.3s ease;
    justify-content: space-between;
}
#oxxo-name{
    pointer-events: none; /* Evita que interfiera con el clic */
    font-size: 30px;
    margin: 0px 0;
    align-items: center;
    vertical-align: middle;
}

#helicoptero-name {
    pointer-events: none; /* Evita que interfiera con el clic */
    font-size: 32px;
    margin: 1px 0;
    font-weight: bold;
    visibility: hidden;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

#helicoptero-Norte {
    position: fixed;
    top: 27%;
    left: 40%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#helicoptero-Sur {
    position: fixed;
    top: 53%;
    left: 40%;
    height: 10%;
    width: 16%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#helicoptero-Este {
    position: fixed;
    top: 40%;
    left: 59.8%;
    height: 10%;
    width: 16%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#helicoptero-Oeste {
    position: fixed;
    top: 40%;
    left: 20%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#respuestaAguila{
    position: fixed;
    top: 88%;
    left: 27%;
    width: 25%;
    font-family: 'Consolas', sans-serif;
    font-size: 18px;
    color: black;
    background-color: rgb(233, 207, 144);
    padding: 7px;
    border: 2px solid black;
    border-radius: 10px;
    visibility: hidden;
}

#estacion-transicion{
    position: fixed;
    top: 30%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -41%);
    background-color: rgba(0, 0, 0, 255);
    padding: 10px 20px;
    border-radius: 10px;
    text-align: center;
    align-items: center;
    visibility: hidden;
}


#estacion-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 160%;
    z-index: 2; /* Se asegura de estar encima del contenido del mapa */
}

#evento-cuadro{
    position: fixed;
    top: 10%;
    left: 30%;
    width: 500px;
    height: 500px;
    font-size: 44px;
    visibility: hidden;
}


#evento-name {
    pointer-events: none; /* Evita que interfiera con el clic */
    font-size: 24px;
    margin: 1px 0;
    text-align: center;
    align-items: center;
    visibility: hidden;
    position: fixed;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    background-color: black;
    color: white;
    padding: 10px;
    top: 72%;
    left: 26%;
    width: auto;
    height: auto;
}

#evento-descripcion {
    text-align: left;
    font-size: 28px;
    white-space: pre-wrap; /* Interpreta \n y \t correctamente */
    tab-size: 34; /* Tamaño de tabulación */
    visibility: hidden;
    position: fixed;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    background-color: black;
    color: white;
    padding: 10px;
    top: 75%;
    left: 26%;
    width: 46%;
    height: 10%;

}
.linea-media {
    position: relative;
    color: white; /* Color del texto */
    background-color: transparent; /* Fondo opcional */
    font-size: 20px; /* Tamaño del texto */
    text-align: center; /* Centra horizontalmente el texto */
  }
  
  .linea-media::after {
    content: ""; /* Genera la línea */
    position: absolute;
    left: 1%; /* Margen opcional */
    right: 10%;
    top: 50%; /* Posición vertical */
    height: 0.1px; /* Grosor de la línea */
    width: 98%;
    background-color: rgba(255, 255, 255,0.7); /* Color base de la línea */
    box-shadow: 
    0 0 15px 5px rgba(255, 255, 255, 0.7), /* Sombra central */
    0 0 25px 10px rgba(255, 255, 255, 0.5), /* Extensión superior */
    0 0 35px 15px rgba(255, 255, 255, 0.3); /* Extensión más tenue */
    transform: translateY(-50%); /* Centrar la línea */
  }
  
  

#fondoQuiz{
    position: fixed;
    top: 5%;
    left: 12%;
    height: 61%;
    width: 70%;
    text-align: center;
    vertical-align: middle;
    background-color: rgb(0, 0, 179);
    border: 15px solid rgb(255, 0, 195);
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 28px;
    font-family: 'Consolas', sans-serif;
    cursor: default;
    visibility: hidden;
}

#anciano-sello {
    position: fixed;
    top: 74%;
    left: 64.7%;
    height: auto;
    width: 7.1%;
    text-align: center;
    vertical-align: middle;
    background-color: black;
    color: yellow;
    border: 3px solid white;
    padding: 5px 10px;
    font-size: 28px;
    font-family: 'Consolas', sans-serif;
    cursor: pointer;
    visibility: hidden;
}

#aguilaBoton{
    position: fixed;
    top: 84.3%;
    left: 54%;
    height: auto;
    width: 8%;
    text-align: center;
    vertical-align: middle;
    background-color: rgb(233, 207, 144);
    color: black;
    border: 3px solid black;
    padding: 5px 10px;
    font-size: 20px;
    font-family: 'Consolas', sans-serif;
    border-radius: 10px;
    cursor: pointer;
    visibility: hidden;
}

#piñata{
    position: fixed;
    top: 80%;
    left: 62%;
    height: auto;
    width: 8.3%;
    text-align: center;
    vertical-align: middle;
    background-color: black;
    color: rgb(189, 113, 32);
    border: 3px solid white;
    padding: 5px 10px;
    font-size: 28px;
    font-family: 'Consolas', sans-serif;
    cursor: pointer;
    visibility: hidden;
}

#Jugador1CHANC {
    position: fixed;
    top: 8%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(88, 255, 88, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador1T {
    position: fixed;
    top: 8%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(88, 255, 88, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador1CH {
    position: fixed;
    top: 8%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(88, 255, 88, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador1C {
    position: fixed;
    top: 8%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(88, 255, 88, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador1M {
    position: fixed;
    top: 8%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(88, 255, 88, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador1S {
    position: fixed;
    top: 8%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(88, 255, 88, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador1 {
    position: fixed;
    top: 8%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(88, 255, 88, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#RespuestaA {
    position: fixed;
    top: 6%;
    left: 13.55%;
    height: 10%;
    width: 70.4%;
    background-color: rgb(47, 47, 255);
    border: 2px solid white;
    color: white;
    border-radius: 10px;
    font-size: 30px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    visibility: hidden;    
}

#Jugador2CHANC {
    position: fixed;
    top: 24%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 64, 64, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador2T {
    position: fixed;
    top: 24%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 64, 64, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador2CH {
    position: fixed;
    top: 24%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 64, 64, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador2C {
    position: fixed;
    top: 24%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 64, 64, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador2M {
    position: fixed;
    top: 24%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 64, 64, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador2S {
    position: fixed;
    top: 24%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 64, 64, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador2 {
    position: fixed;
    top: 24%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 64, 64, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#RespuestaB {
    position: fixed;
    top: 20%;
    left: 13.55%;
    height: 10%;
    width: 70.4%;
    background-color: rgb(47, 47, 255);
    border: 2px solid white;
    color: white;
    border-radius: 10px;
    font-size: 30px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    visibility: hidden;  
}

#Jugador3CHANC {
    position: fixed;
    top: 40%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color:rgba(66, 66, 255, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador3T {
    position: fixed;
    top: 40%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color:rgba(66, 66, 255, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador3CH {
    position: fixed;
    top: 40%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color:rgba(66, 66, 255, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador3C {
    position: fixed;
    top: 40%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color:rgba(66, 66, 255, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador3M {
    position: fixed;
    top: 40%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color:rgba(66, 66, 255, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador3S {
    position: fixed;
    top: 40%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color:rgba(66, 66, 255, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador3 {
    position: fixed;
    top: 40%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color:rgba(66, 66, 255, 0.9);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#RespuestaC {
    position: fixed;
    top: 35%;
    left: 13.55%;
    height: 10%;
    width: 70.4%;
    background-color: rgb(47, 47, 255);
    border: 2px solid white;
    color: white;
    border-radius: 10px;
    font-size: 30px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    visibility: hidden;  
}

#Jugador4CHANC {
    position: fixed;
    top: 56%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 255, 78, 0.9);
    font-family: 'Consolas', sans-serif;
    color: black;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador4T {
    position: fixed;
    top: 56%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 255, 78, 0.9);
    font-family: 'Consolas', sans-serif;
    color: black;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador4CH {
    position: fixed;
    top: 56%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 255, 78, 0.9);
    font-family: 'Consolas', sans-serif;
    color: black;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador4C {
    position: fixed;
    top: 56%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 255, 78, 0.9);
    font-family: 'Consolas', sans-serif;
    color: black;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador4M {
    position: fixed;
    top: 56%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 255, 78, 0.9);
    font-family: 'Consolas', sans-serif;
    color: black;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador4S {
    position: fixed;
    top: 56%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 255, 78, 0.9);
    font-family: 'Consolas', sans-serif;
    color: black;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Jugador4 {
    position: fixed;
    top: 56%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(255, 255, 78, 0.9);
    font-family: 'Consolas', sans-serif;
    color: black;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#RespuestaD {
    position: fixed;
    top: 50%;
    left: 13.55%;
    height: 10%;
    width: 70.4%;
    background-color: rgb(47, 47, 255);
    border: 2px solid white;
    color: white;
    border-radius: 10px;
    font-size: 30px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    visibility: hidden;  
}

#oxxoCasilla1{
    position: fixed;
    top: 20%;
    left: 31.5%;
    height: 5%;
    width: 35%;
    text-align: center;
    background-color: white;
    color: black;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#oxxoCasilla2{
    position: fixed;
    top: 35%;
    left: 31.5%;
    height: 5%;
    width: 35%;
    text-align: center;
    background-color: white;
    color: black;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#oxxoCasilla3{
    position: fixed;
    top: 50%;
    left: 31.5%;
    height: 5%;
    width: 35%;
    text-align: center;
    background-color: white;
    color: black;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#salsa1 {
    position: fixed;
    top: 8%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: hsl(5.03deg 85.64% 61.76%);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#salsa2 {
    position: fixed;
    top: 24%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgb(123, 172, 1);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#salsa3 {
    position: fixed;
    top: 40%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgb(190, 255, 86);
    color: black;
    font-family: 'Consolas', sans-serif;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#salsa4 {
    position: fixed;
    top: 56%;
    left: 35%;
    width: 27%;
    height: 10%;
    text-align: center;
    background-color: rgba(172, 35, 24);
    font-family: 'Consolas', sans-serif;
    color: black;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 32px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#anciano-aguila {
    position: fixed;
    top: 80.3%;
    left: 64.7%;
    height: auto;
    width: auto;
    text-align: center;
    vertical-align: middle;
    background-color: black;
    color: rgb(253, 145, 29);
    border: 3px solid white;
    padding: 5px 10px;
    font-size: 28px;
    font-family: 'Consolas', sans-serif;
    cursor: pointer;
    visibility: hidden;
}

#cartas-cuadro {
    position: fixed;
    top: 44%;
    left: 10px;
    background-color: white;
    color: black;
    border: 3px solid black;
    padding: 10px;
    border-radius: 5px;
    font-size: 20px;
    width: 6%;
    height: 6%;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    cursor: pointer;
}

#miscartas{
    pointer-events: none;
    align-items: center;
    margin-top: 6%;
}

#cartas-info {
    position: fixed;
    top: 46%;
    left: 50%;
    width: 55%;
    height: 60%;
    transform: translate(-50%, -41%);
    background-color: white;
    border: 6px solid black;
    color: black;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    transition: visibility 0.3s ease, opacity 0.3s ease;
    justify-content: space-between;
}

#miscartas-name{
    pointer-events: none; /* Evita que interfiera con el clic */
    font-size: 30px;
    margin: 0px 0;
    align-items: center;
    vertical-align: middle;   
}

#miscartas-terminar {
    position: fixed;
    top: 82.3%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#miscartas-cancelar {
    position: fixed;
    top: 20.5%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#miscartas-usar {
    position: fixed;
    top: 7.5%;
    left: 100.8%;
    height: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border: 3px solid white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex; /* Activar el modelo Flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    visibility: hidden;
}

#Dado-explicacion{
    position: fixed;
    top: 73%;
    left: 30%;
    height: 100px;
    width: 500px;
    text-align: left;
    vertical-align: middle;
    background-color: rgb(255, 206, 133);
    color: black;
    border: 3px solid black;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 28px;
    white-space: pre-wrap; /* Interpreta \n y \t correctamente */
    visibility: hidden;
}

#mispropiedades-explicacion{
    position: fixed;
    top: 77%;
    left: 30%;
    height: 100px;
    width: 500px;
    text-align: left;
    vertical-align: middle;
    background-color: rgb(255, 206, 133);
    color: black;
    border: 3px solid black;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 28px;
    visibility: hidden;
}

#miscartas-explicacion{
    position: fixed;
    top: 77%;
    left: 30%;
    height: 100px;
    width: 500px;
    text-align: left;
    vertical-align: middle;
    background-color: rgb(255, 206, 133);
    color: black;
    border: 3px solid black;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 28px;
    visibility: hidden;
}

#Terminar-explicacion{
    position: fixed;
    top: 77%;
    left: 30%;
    height: 100px;
    width: 500px;
    text-align: left;
    vertical-align: middle;
    background-color: rgb(255, 206, 133);
    color: black;
    border: 3px solid black;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 28px;
    visibility: hidden;
}

#municipio-descripcion{
    position: fixed;
    top: 93.5%;
    left: -4%;
    height: 20.5%;
    width: 105%;
    text-align: left;
    vertical-align: middle;
    background-color: rgb(255, 206, 133);
    color: black;
    border: 3px solid black;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 22px;
    visibility: hidden;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
}

#oxxo-descripcion{
    position: fixed;
    top: 93.5%;
    left: -1%;
    height: 29%;
    width: 98.5%;
    text-align: left;
    vertical-align: middle;
    background-color: rgb(255, 206, 133);
    color: black;
    border: 3px solid black;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 24px;
    visibility: hidden;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
}

#misvendercartas-descripcion{
    position: fixed;
    top: 93.5%;
    left: -1%;
    height: 29%;
    width: 98.5%;
    text-align: left;
    vertical-align: middle;
    background-color: rgb(255, 206, 133);
    color: black;
    border: 3px solid black;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 24px;
    visibility: hidden;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
}


#miscartas-descripcion{
    position: fixed;
    top: 93.5%;
    left: -6%;
    height: 18.5%;
    width: 110%;
    text-align: left;
    vertical-align: middle;
    background-color: rgb(255, 206, 133);
    color: black;
    border: 3px solid black;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 24px;
    visibility: hidden;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
}

#mispropiedades-descripcion{
    position: fixed;
    top: 83%;
    left: 19.5%;
    height: 13%;
    width: 59%;
    text-align: left;
    vertical-align: middle;
    background-color: rgb(255, 206, 133);
    color: black;
    border: 3px solid black;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 22px;
    visibility: hidden;
    font-family: 'Consolas', sans-serif;
    font-weight: bold;
}

#Dado1{
    position: fixed;
    top: 70%;
    left: 40%;
    height: 15%;
    width: 8%;
    visibility: hidden;
}

#dado-order-1{
    position: fixed;
    top: 51.5%;
    left: 21.9%;
    height: 15%;
    width: 8%;
    visibility: hidden;
}

#Dado2{
    position: fixed;
    top: 70%;
    left: 50%;
    height: 15%;
    width: 8%;
    visibility: hidden;
}

#dado-order-2{
    position: fixed;
    top: 51.5%;
    left: 37.5%;
    height: 15%;
    width: 8%;
    visibility: hidden;
}

#Dado3{
    position: fixed;
    top: 55%;
    left: 45%;
    height: 15%;
    width: 8%;
    visibility: hidden;
}

#dado-order-3{
    position: fixed;
    top: 51.5%;
    left: 53%;
    height: 15%;
    width: 8%;
    visibility: hidden;
}

#Dado4{
    position: fixed;
    top: 55%;
    left: 55%;
    height: 15%;
    width: 8%;
    visibility: hidden;
}

#dado-order-4{
    position: fixed;
    top: 51.5%;
    left: 68.5%;
    height: 15%;
    width: 8%;
    visibility: hidden;
}

#Dado5{
    position: fixed;
    top: 70%;
    left: 60%;
    height: 15%;
    width: 8%;
    visibility: hidden;
}

#Dado6{
    position: fixed;
    top: 40%;
    left: 50%;
    height: 15%;
    width: 8%;
    visibility: hidden;
}

#dadoE1{
    position: fixed;
    top: 15%;
    left: 37.5%;
    height: 15%;
    width: 8%;
    visibility: hidden;
    cursor: pointer;
}

#dadoE2{
    position: fixed;
    top: 15%;
    left: 53.5%;
    height: 15%;
    width: 8%;
    visibility: hidden;
    cursor: pointer;
}

#dadoE3{
    position: fixed;
    top: 37%;
    left: 37.5%;
    height: 15%;
    width: 8%;
    visibility: hidden;
    cursor: pointer;
}

#dadoE4{
    position: fixed;
    top: 37%;
    left: 53.5%;
    height: 15%;
    width: 8%;
    visibility: hidden;
    cursor: pointer;
}

#dadoE5{
    position: fixed;
    top: 59%;
    left: 37.5%;
    height: 15%;
    width: 8%;
    visibility: hidden;
    cursor: pointer;
}

#dadoE6{
    position: fixed;
    top: 59%;
    left: 53.5%;
    height: 15%;
    width: 8%;
    visibility: hidden;
    cursor: pointer;
}