/* VARIABLES */
:root {
    --gridHeight: 100px;  /* Tamaño de las fichas */
    --gridWidth: 100px;   /* Tamaño de las fichas */
    --gap: 12px;          /* Reducir espacio entre las fichas */
}

/* MODAL INICIAL */
.modal-content {
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    margin: auto;
    padding: 20px;
    overflow: auto;
}

/* GRID */
.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* Mantener 4 columnas */
    gap: var(--gap);  /* Reducir espacio entre fichas */
    padding: 3%;
    justify-items: center;
    align-items: center;
}

/* Ajustar tamaño de las fichas en el tablero */
.carta input[type='image'] {
    width: var(--gridWidth);
    height: var(--gridHeight);
    object-fit: cover;  /* Mantener la imagen sin deformarla */
}

/* Mostrar las cartas con rotación y escala */
.mostrar {
    transform: rotateY(180deg) scale(1.2);
    -ms-transform: rotateY(180deg) scale(1.2); /* IE 9  */
    -moz-transform: rotateY(180deg) scale(1.2); /* Firefox */
    -webkit-transform: rotateY(180deg) scale(1.2); /* Safari y Chrome */
    -o-transform: rotateY(180deg) scale(1.2); /* Opera */
}

/* BOTONES */
.btn {
    padding: 4px 7px;
    font-size: 14px;
}

.btn:hover, .btn.cancel:hover, .btn.neutral:hover {
    padding: 1px 4px;
}

/* MEDIA QUERY para dispositivos más pequeños */
@media (max-width: 768px) {
    .modal-content {
        width: 90%;
        max-width: none;
        height: 80%;
    }

    .wrapper {
        grid-template-columns: repeat(4, 1fr); /* Mantener 4 columnas */
        gap: 10px;  /* Ajustar espacio entre las fichas */
    }

    .carta input[type='image'] {
        width: 120px;  /* Aumentar tamaño de las fichas */
        height: 120px;
    }

    .btn {
        font-size: 12px; /* Reducir tamaño de los botones */
    }
}

/* MEDIA QUERY para pantallas más pequeñas */
@media (max-width: 480px) {
    .modal-content {
        width: 95%;
    }

    .wrapper {
        grid-template-columns: repeat(4, 1fr);  /* Mantener 4 columnas */
        gap: 8px;  /* Reducir más el espacio entre fichas */
    }

    .carta input[type='image'] {
        width: 110px;  /* Aumentar ligeramente el tamaño de las fichas */
        height: 110px;
    }
}