/* JUEGO DE MEMORIA - ACTIVIDAD */


/* CONTENEDOR GENERAL */
.contenedor-actividad{
  width: 100%;
  max-width: 1100px;
  margin: 20px auto;
}

/* ÁREA DEL JUEGO */
.area-juego{
  position: relative;
  width: 100%;         /* 🔥 clave */
  max-width: 900px;    /* límite en desktop */
  margin: 0 auto;      /* 🔥 centrado */
  aspect-ratio: 16/9;  /* mantiene proporción */
}

/* TABLERO */
.tablero{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

/* TARJETAS */
.tarjeta{
  width: 100%;
  aspect-ratio: 2/3; /* 🔥 responsive en vez de height fijo */
  position: relative;
  perspective: 1000px;
}

.carta{
width:100%;
height:100%;
position:absolute;
transform-style:preserve-3d;
transition:transform .6s;
cursor:pointer;
}

.carta.volteada{
transform:rotateY(180deg);
}

.cara{
position:absolute;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
font-size: clamp(10px, 1.5vw, 16px); /* 🔥 responsive real */
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: break-word;
text-align:center;
padding:8px;
backface-visibility:hidden;
box-sizing:border-box;
}

.frente{
background:#21202e;
}

.atras{
background:#393939;
color:white;
transform:rotateY(180deg);
}

.instruccion{
    display: flex;
    align-items: center;
    gap: 15px; /* espacio entre botón y texto */
    width: 100%;
}

/* opcional: que el texto no se pegue */
/* .texto-instruccion{
    flex: 1;
} */

.bloqueada .atras{
background:#1f4541;
}

/* IMÁGENES */
.atras img{
width:100%;
height:100%;
object-fit:cover;
border-radius:10px;
}

/* BOTON EMPEZAR */

.empezar{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
padding:12px 30px;
/* border:2px solid #0EA597; */
background:#656d6c;
color:#ffffff;
font-weight:bold;
cursor:pointer;
z-index:5;
}

/* MENSAJE */

#victoria{
text-align:center;
font-size:26px;
color:#0EA597;
margin-top:30px;
display:none;
}

@media (max-width: 768px){

  .tablero{
    grid-template-columns: repeat(3, 1fr); /* menos columnas */
  }

  .area-juego{
    aspect-ratio: auto; /* deja crecer natural */
  }

  .cara{
    font-size: clamp(9px, 3vw, 14px);
    padding: 6px;
  }

}