/* Estilos específicos para Memoria Animal */

#game-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.memory-card {
    height: 120px;
    position: relative;
    cursor: pointer;
    perspective: 1000px;
    /* Necesario para el efecto 3D */
    background-color: transparent;
    /* El fondo lo dan las caras */
    border-radius: 15px;
}

.memory-card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.memory-card.flipped .memory-card-inner {
    transform: rotateY(180deg);
}

.memory-card-front,
.memory-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /* Oculta la cara de atrás */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
}

.memory-card-front {
    background-color: var(--corcholis-orange);
    /* Patrón decorativo SVG inline */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M15,10 Q20,5 25,10 T35,10 M5,20 Q10,15 15,20 T25,20 M15,30 Q20,25 25,30 T35,30" stroke="%23FFFFFF" fill="none" stroke-width="2"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

.memory-card-back {
    background-color: white;
    transform: rotateY(180deg);
    /* Inicialmente girada */
}

.memory-card-emoji {
    font-size: 60px;
    user-select: none;
}

.memory-card.matched .memory-card-inner {
    box-shadow: 0 0 15px var(--corcholis-green);
}

/* Responsividad para móviles */
@media (max-width: 500px) {
    #game-grid {
        gap: 10px;
    }

    .memory-card {
        height: 100px;
    }

    .memory-card-emoji {
        font-size: 40px;
    }
}