/*!
 * This file is part of App Builder
 *
 * ©2020 App Builder - https://www.decsoftutils.com
 *//* Código CSS auto generado para la app */
html, body { width: 1600px; height: 900px; }
#textoCartas { position: absolute; top: 1.78%; left: 44.50%; width: 11.50%; height: 5.33%; }
#Image1 { position: absolute; top: 8.89%; left: 1.50%; width: 6.50%; height: 16.00%; }
#Image2 { position: absolute; top: 8.89%; left: 9.50%; width: 6.50%; height: 16.00%; }
#Image3 { position: absolute; top: 8.89%; left: 17.50%; width: 6.50%; height: 16.00%; }
#Image4 { position: absolute; top: 8.89%; left: 25.50%; width: 6.50%; height: 16.00%; }
#Image5 { position: absolute; top: 8.89%; left: 33.50%; width: 6.50%; height: 16.00%; }
#Image6 { position: absolute; top: 8.89%; left: 41.50%; width: 6.50%; height: 16.00%; }
#Image7 { position: absolute; top: 8.89%; left: 49.50%; width: 6.50%; height: 16.00%; }
#Image8 { position: absolute; top: 8.89%; left: 57.50%; width: 6.50%; height: 16.00%; }
#Image9 { position: absolute; top: 8.89%; left: 65.50%; width: 6.50%; height: 16.00%; }
#Image10 { position: absolute; top: 8.89%; left: 73.50%; width: 6.50%; height: 16.00%; }
#Image11 { position: absolute; top: 27.56%; left: 1.50%; width: 6.50%; height: 16.00%; }
#Image12 { position: absolute; top: 27.56%; left: 9.50%; width: 6.50%; height: 16.00%; }
#Image13 { position: absolute; top: 27.56%; left: 17.50%; width: 6.50%; height: 16.00%; }
#Image14 { position: absolute; top: 27.56%; left: 25.50%; width: 6.50%; height: 16.00%; }
#Image15 { position: absolute; top: 27.56%; left: 33.50%; width: 6.50%; height: 16.00%; }
#Image16 { position: absolute; top: 27.56%; left: 41.50%; width: 6.50%; height: 16.00%; }
#Image17 { position: absolute; top: 27.56%; left: 49.50%; width: 6.50%; height: 16.00%; }
#Image18 { position: absolute; top: 27.56%; left: 57.50%; width: 6.50%; height: 16.00%; }
#Image19 { position: absolute; top: 27.56%; left: 65.50%; width: 6.50%; height: 16.00%; }
#Image20 { position: absolute; top: 27.56%; left: 73.50%; width: 6.50%; height: 16.00%; }
#Image21 { position: absolute; top: 45.33%; left: 1.50%; width: 6.50%; height: 16.00%; }
#Image22 { position: absolute; top: 45.33%; left: 9.50%; width: 6.50%; height: 16.00%; }
#Image23 { position: absolute; top: 45.33%; left: 17.50%; width: 6.50%; height: 16.00%; }
#Image24 { position: absolute; top: 45.33%; left: 25.50%; width: 6.50%; height: 16.00%; }
#Image25 { position: absolute; top: 45.33%; left: 33.50%; width: 6.50%; height: 16.00%; }
#Image26 { position: absolute; top: 45.33%; left: 41.50%; width: 6.50%; height: 16.00%; }
#Image27 { position: absolute; top: 45.33%; left: 49.50%; width: 6.50%; height: 16.00%; }
#Image28 { position: absolute; top: 45.33%; left: 57.50%; width: 6.50%; height: 16.00%; }
#Image29 { position: absolute; top: 45.33%; left: 65.50%; width: 6.50%; height: 16.00%; }
#Image30 { position: absolute; top: 45.33%; left: 73.50%; width: 6.50%; height: 16.00%; }
#Image31 { position: absolute; top: 63.11%; left: 1.50%; width: 6.50%; height: 16.00%; }
#Image32 { position: absolute; top: 63.11%; left: 9.50%; width: 6.50%; height: 16.00%; }
#Image33 { position: absolute; top: 63.11%; left: 17.50%; width: 6.50%; height: 16.00%; }
#Image34 { position: absolute; top: 63.11%; left: 25.50%; width: 6.50%; height: 16.00%; }
#Image35 { position: absolute; top: 63.11%; left: 33.50%; width: 6.50%; height: 16.00%; }
#Image36 { position: absolute; top: 63.11%; left: 41.50%; width: 6.50%; height: 16.00%; }
#Image37 { position: absolute; top: 63.11%; left: 49.50%; width: 6.50%; height: 16.00%; }
#Image38 { position: absolute; top: 63.11%; left: 57.50%; width: 6.50%; height: 16.00%; }
#Image39 { position: absolute; top: 63.11%; left: 65.50%; width: 6.50%; height: 16.00%; }
#Image40 { position: absolute; top: 63.11%; left: 73.50%; width: 6.50%; height: 16.00%; }
#Image41 { position: absolute; top: 80.89%; left: 1.50%; width: 6.50%; height: 16.00%; }
#Image42 { position: absolute; top: 80.89%; left: 9.50%; width: 6.50%; height: 16.00%; }
#Image43 { position: absolute; top: 80.89%; left: 17.50%; width: 6.50%; height: 16.00%; }
#Image44 { position: absolute; top: 80.89%; left: 25.50%; width: 6.50%; height: 16.00%; }
#Image45 { position: absolute; top: 80.89%; left: 33.50%; width: 6.50%; height: 16.00%; }
#Image46 { position: absolute; top: 80.89%; left: 41.50%; width: 6.50%; height: 16.00%; }
#Image47 { position: absolute; top: 80.89%; left: 49.50%; width: 6.50%; height: 16.00%; }
#Image48 { position: absolute; top: 80.89%; left: 57.50%; width: 6.50%; height: 16.00%; }
#Image49 { position: absolute; top: 80.89%; left: 65.50%; width: 6.50%; height: 16.00%; }
#Image50 { position: absolute; top: 80.89%; left: 73.50%; width: 6.50%; height: 16.00%; }
#textoBaneado { position: absolute; top: 1.78%; left: 44.00%; width: 12.50%; height: 22.22%; }
#cartaBaneada1 { position: absolute; top: 36.44%; left: 35.00%; width: 8.00%; height: 17.78%; }
#cartaBaneada2 { position: absolute; top: 36.44%; left: 46.50%; width: 8.00%; height: 17.78%; }
#cartaBaneada3 { position: absolute; top: 36.44%; left: 57.50%; width: 8.00%; height: 17.78%; }
/* Código CSS "inline" de la app */@font-face {
  font-family: LuckiestGuy;
  src: url('../files/LuckiestGuy-Regular.ttf');
}

.pantalla_cartas {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    row-gap: 30px;
    background-image: url(../images/fondo.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 25px;
}


.carta {
  position: relative !important;
  width: 280px !important;
  height: 378px !important;
  top: auto !important;
  left: auto !important;
  display: flex;
  align-self: center;
  justify-self: center;
  cursor: pointer;
  transition: display 0.5s, transform 0.2s ease-in-out, filter 0.3s ease-in-out;
}

.texto_cartas {
  font-family: 'LuckiestGuy', Courier, monospace;
  position: relative !important;
  color: orangered;
  font-size: 60px;
  font-weight: bold;
  padding: 20px 20px 40px;
  width: fit-content !important;
  height: fit-content !important;
  grid-column: span 5;
  order: -1;
  top: auto !important;
  left: auto !important;
  display: flex;
  align-self: center;
  justify-self: center;
  text-align: center;
  transition: display 0.5s, transform 0.2s ease-in-out, filter 0.3s ease-in-out;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
}

.pantalla_baneo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    row-gap: 10px;
    background-image: url(../images/fondo.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 25px;
}

.texto_baneadas {
  font-family: 'LuckiestGuy', Courier, monospace;
  position: relative !important;
  color: orangered;
  font-size: 60px;
  padding: 20px;
  width: fit-content !important;
  height: fit-content !important;
  grid-column: span 3;
  order: -1;
  top: auto !important;
  left: auto !important;
  display: flex;
  align-self: center;
  justify-self: center;
  text-align: center;
  transition: display 0.5s, transform 0.2s ease-in-out, filter 0.3s ease-in-out;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
}


.carta.oculta {
  display: none !important;
}

@keyframes agitar {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(2deg); }
  40% { transform: rotate(-2deg); }
  60% { transform: rotate(2deg); }
  80% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

.carta:hover {
  animation: agitar 0.4s ease-in-out;
}



@keyframes efectoBaneo {
  0% { transform: scale(1); filter: grayscale(0%); }
  20% { transform: scale(1.2); filter: grayscale(0%); }
  40% { transform: scale(0.9); filter: grayscale(0%); }
  60% { transform: scale(1.05); filter: grayscale(0%); }
  70% { transform: scale(1); filter: grayscale(0%); }
  100% { transform: scale(1); filter: grayscale(100%); }
}

.carta.baneada {
  animation: efectoBaneo 1s ease-in-out forwards;
  width: 420px !important;
  height: 567px !important;
  cursor: auto;
}

.cartaGrisSeleccionada {
  background-image: linear-gradient(180deg, #ffb100, #f30000);
  clip-path: polygon(50% 0%, 100% 15%, 100% 85%, 50% 100%, 0% 85%, 0% 15%);
  filter: brightness(0.5);
  cursor: auto;
}

.cartaVerdeSeleccionada {
  background-image: linear-gradient(180deg, #ffb100, #f30000);
  border-radius: 90px;
  filter: brightness(0.5);
  cursor: auto;
}

.cartaAzulSeleccionada {
  background-image: linear-gradient(180deg, #ffb100, #f30000);
  clip-path: polygon(9% 0%, 91% 0%, 100% 75%, 50% 100%, 0% 75%);
  filter: brightness(0.5);
  cursor: auto;
}

.cartaMoradaSeleccionada {
  background-image: linear-gradient(180deg, #ffb100, #f30000);
  clip-path: polygon(50% 0%, 100% 10%, 100% 100%, 0% 100%, 0% 10%);
  border-radius: 0px 0px 112px 112px;
  filter: brightness(0.5);
  cursor: auto;
}

.cartaMoradaSeleccionada:hover, .cartaAzulSeleccionada:hover, .cartaVerdeSeleccionada:hover, .cartaGrisSeleccionada:hover {
  animation: none;
}