/* Overrides for Memory Game */
:root {
    --primary: #f97316; /* Orange */
    --secondary: #3b82f6;
    --bg-gradient: linear-gradient(135deg, #ffedd5, #fed7aa, #fdba74);
}

.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 20px auto;
    max-width: 400px;
}

.memory-card {
    width: 100%;
    aspect-ratio: 1/1;
    perspective: 1000px;
    cursor: pointer;
}

.memory-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

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

.memory-card-front, .memory-card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.memory-card-front {
    background: var(--primary);
    background-image: radial-gradient(circle, rgba(255,255,255,0.2) 10%, transparent 10%), radial-gradient(circle, rgba(255,255,255,0.2) 10%, transparent 10%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.memory-card-back {
    background: #fff;
    transform: rotateY(180deg);
    border: 2px solid var(--primary);
}