@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  /* Fondo base galáctico */
  background: radial-gradient(circle, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  position: relative;
}

/* --- Capa 1: Cientos de estrellas diminutas y brillantes --- */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px; /* Super pequeñas */
  height: 1px;
  background: transparent;
  /* Múltiples sombras para crear el efecto de masa estelar */
  box-shadow: 
    /* Sección 1 */
    10vw 10vh #fff, 15vw 25vh #fff, 20vw 80vh #fff, 25vw 55vh #fff, 30vw 12vh #eee, 35vw 90vh #fff, 40vw 33vh #fff, 45vw 67vh #ddd, 50vw 5vh #fff,
    /* Sección 2 */
    55vw 50vh #fff, 60vw 18vh #eee, 65vw 88vh #fff, 70vw 30vh #fff, 75vw 60vh #ddd, 80vw 10vh #fff, 85vw 75vh #fff, 90vw 45vh #eee, 95vw 95vh #fff,
    /* Relleno Extra 1 */
    5vw 5vh #fff, 12vw 18vh #eee, 18vw 33vh #fff, 22vw 45vh #ddd, 28vw 60vh #fff, 32vw 70vh #eee, 38vw 85vh #fff, 42vw 95vh #ddd, 48vw 15vh #fff,
    /* Relleno Extra 2 */
    52vw 28vh #eee, 58vw 38vh #fff, 62vw 50vh #ddd, 68vw 63vh #fff, 72vw 75vh #eee, 78vw 88vh #fff, 82vw 5vh #ddd, 88vw 12vh #fff, 92vw 22vh #eee,
    /* Más densidad */
    3vw 90vh #fff, 17vw 93vh #eee, 27vw 2vh #fff, 37vw 7vh #ddd, 47vw 98vh #fff, 57vw 3vh #eee, 67vw 97vh #fff, 77vw 8vh #ddd, 87vw 99vh #fff,
    /* Relleno final */
    9vw 40vh #fff, 19vw 50vh #eee, 29vw 60vh #fff, 39vw 15vh #ddd, 49vw 25vh #fff, 59vw 35vh #eee, 69vw 45vh #fff, 79vw 55vh #ddd, 89vw 65vh #fff,
    /* Unas pocas más */
    14vw 14vh #fff, 24vw 24vh #fff, 34vw 34vh #fff, 44vw 44vh #fff, 54vw 54vh #fff, 64vw 64vh #fff, 74vw 74vh #fff, 84vw 84vh #fff;

  opacity: 0.9; /* Brillantes */
}

/* --- Capa 2: Estrellas medianas y más tenues (profundidad) --- */
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px; /* Un poco más grandes */
  height: 2px;
  background: transparent;
  box-shadow: 
    12vw 80vh #ddd, 22vw 10vh #eee, 32vw 60vh #fff, 42vw 30vh #ddd, 52vw 90vh #eee, 62vw 50vh #fff, 72vw 15vh #ddd, 82vw 70vh #eee, 92vw 40vh #fff,
    /* Relleno 2nd capa */
    8vw 15vh #ccc, 18vw 25vh #bbb, 28vw 35vh #ccc, 38vw 45vh #bbb, 48vw 55vh #ccc, 58vw 65vh #bbb, 68vw 75vh #ccc, 78vw 85vh #bbb, 88vw 95vh #ccc,
    /* densidad media */
    5vw 55vh #ddd, 15vw 65vh #eee, 25vw 75vh #fff, 35vw 85vh #ddd, 45vw 95vh #eee, 55vw 15vh #fff, 65vw 25vh #ddd, 75vw 35vh #eee, 85vw 45vh #fff,
    /* Extra profundidad */
    50vw 50vh #aaa; /* Una estrella central muy tenue */

  opacity: 0.4; /* Muy tenues */
}

.titulo, .wrapper {
  z-index: 10;
  position: relative;
}
.titulo {
	display: flex;
	position: absolute;
	top:20px;
	font-size:40px;
	font-weight:bold;
	color:white;
}
.wrapper{
  padding: 25px;
  border-radius: 10px;
  background: #F8F8F8;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.cards, .card, .view{
  display: flex;
  align-items: center;
  justify-content: center;
}
.cards{
  height: 400px;
  width: 400px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cards .card{
  cursor: pointer;
  list-style: none;
  user-select: none;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  height: calc(100% / 4 - 10px);
  width: calc(100% / 4 - 10px);
}
.card.shake{
  animation: shake 0.35s ease-in-out;
}
@keyframes shake {
  0%, 100%{
    transform: translateX(0);
  }
  20%{
    transform: translateX(-13px);
  }
  40%{
    transform: translateX(13px);
  }
  60%{
    transform: translateX(-8px);
  }
  80%{
    transform: translateX(8px);
  }
}
.card .view{
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 7px;
  background: #fff;
  pointer-events: none;
  backface-visibility: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  transition: transform 0.25s linear;
}
.card .front-view img{
  width: 19px;
}
.card .back-view img{
  max-width: 45px;
}
.card .back-view{
  transform: rotateY(-180deg);
}
.card.flip .back-view{
  transform: rotateY(0);
}
.card.flip .front-view{
  transform: rotateY(180deg);
}
@media screen and (max-width: 700px) {
  .cards{
    height: 350px;
    width: 350px;
  }
  .card .front-view img{
    width: 17px;
  }
  .card .back-view img{
    max-width: 40px;
  }
}
@media screen and (max-width: 530px) {
  .cards{
    height: 300px;
    width: 300px;
  }
  .card .front-view img{
    width: 15px;
  }
  .card .back-view img{
    max-width: 35px;
  }
}