.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
#contenedorJuego{
    text-align: center;
/*     background-image: url(/subsidio/PublishingImages/feria-escolar/juego/img-puzzle-bg.jpg);
    background-size: contain;
    background-position-x: center;
    background-repeat: no-repeat; */
}
#puzzle {
    width: 375px;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
}

#piezas {
    display: flex;
    flex-wrap: wrap;
    width: 375px;
    margin: auto;
    justify-content: center;
}

.pieza {
    width: 65px;
    height: 36px;
    background-size: cover;
    margin: 10px;
}

.placeholder {
    background: rgb(182,47,212);
    background: linear-gradient(90deg, rgba(182,47,212,1) 0%, rgba(109,109,190,1) 51%, rgba(0,212,255,1) 100%);
    outline: 1px solid black;
    width: 65px;
    height: 36px;
    transition: 3s;
}

.placeholder.hover {
    background: rgb(249,249,249);
    background: linear-gradient(90deg, rgba(249,249,249,1) 0%, rgba(215,211,153,1) 51%, rgba(192,0,255,1) 100%);
}

.placeholder .pieza {
    margin: 0;
}

.ganaste {
    text-align: center;
}

.perdiste {

    text-align: center;
}

#mensaje {
    display: none;
}

#mensajeP {
    display: none;
}

.ganaste #mensaje {
    display: block;
}

.ganaste .placeholder {
    outline: none;
}

.ganaste #piezas {
    display: none;
}

.perdiste #mensajeP {
    display: block;
}

.perdiste .placeholder {
    outline: none;
}

.perdiste #piezas {
    display: none;
}

#btn-gameover {
    display: none;
}


/* boton */
#btn-play{
    background: #72207e;
    background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);
    background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);
    background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);
    background-image: -o-linear-gradient(top, #eb94d0, #2079b0);
    background-image: linear-gradient(to bottom, #72207e, #00abb7);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    text-shadow: 3px 2px 1px #ff6600;
    -webkit-box-shadow: 6px 5px 24px #666666;
    -moz-box-shadow: 6px 5px 24px #666666;
    box-shadow: 3px 3px 15px #666666;
    font-family: cursive;
    color: #fafafa;
    font-size: 27px;
    padding: 19px;
    text-decoration: none;
    margin: 1em;
}

#btn-play:hover {
    background: #2079b0;
    background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
    background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);
    background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
    background-image: -o-linear-gradient(top, #2079b0, #eb94d0);
    background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
    text-decoration: none;
  }

#btn-play:focus{
    outline: none;
}

#btn-gameover{
    background: #72207e;
    background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);
    background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);
    background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);
    background-image: -o-linear-gradient(top, #eb94d0, #2079b0);
    background-image: linear-gradient(to bottom, #72207e, #00abb7);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    text-shadow: 3px 2px 1px #ff6600;
    -webkit-box-shadow: 6px 5px 24px #666666;
    -moz-box-shadow: 6px 5px 24px #666666;
    box-shadow: 3px 3px 15px #666666;
    font-family: cursive;
    color: #fafafa;
    font-size: 27px;
    padding: 19px;
    text-decoration: none;
    margin: 1em;
}

  #btn-gameover:hover{
    background: #2079b0;
    background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
    background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);
    background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
    background-image: -o-linear-gradient(top, #2079b0, #eb94d0);
    background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
    text-decoration: none;
  }

  #btn-gameover:focus{
      outline: none;
  }

  .puntuacion{
    font-family: cursive;
    color: transparent;
    padding: 0.5em;
    -webkit-text-stroke: 1px rgb(119 0 0 / 50%);
    text-shadow: 2px 2px 3px rgb(184 0 206);
}

@media (min-width: 1024px){
    .FE-d-flex{
        display: flex;
    }
    #puzzle {
        width: 650px;
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        justify-content: center;
    }
    
    #piezas {
        display: flex;
        flex-wrap: wrap;
        width: 600px;
        margin: auto;
        justify-content: center;
    }
    
    .pieza {
        width: 100px;
        height: 58px;
        background-size: cover;
        margin: 10px;
    }
    
    .placeholder {
        background: rgb(182,47,212);
        background: linear-gradient(90deg, rgba(182,47,212,1) 0%, rgba(109,109,190,1) 51%, rgba(0,212,255,1) 100%);
        outline: 1px solid black;
        width: 100px;
        height: 58px;
        transition: 3s;
    }

}

@media (min-width: 1440px){
    .FE-d-flex{
        display: flex;
    }
    #puzzle {
        width: 650px;
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        justify-content: center;
    }
    
    #piezas {
        display: flex;
        flex-wrap: wrap;
        width: 600px;
        margin: auto;
        justify-content: center;
    }
    
    .pieza {
        width: 119px;
        height: 69px;
        background-size: cover;
        margin: 10px;
    }
    
    .placeholder {
        background: rgb(182,47,212);
        background: linear-gradient(90deg, rgba(182,47,212,1) 0%, rgba(109,109,190,1) 51%, rgba(0,212,255,1) 100%);
        outline: 1px solid black;
        width: 119px;
        height: 69px;
        transition: 3s;
    }

}

#rompecabeza{
    background-image: url(/subsidio/PublishingImages/feria-escolar/juego/img-puzzle.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}