/* ===================================================================
   Memory Match - shared primitives (cards)
   =================================================================== */

:root {
    --mem-card-back: linear-gradient(135deg, #2a1c4a, #1a1230);
    --mem-card-front: linear-gradient(140deg, #f6f4ee, #e6e2d5);
    --mem-owner-color: var(--c-violet);
}

.mem-card {
    position: relative;
    aspect-ratio: 1 / 1;
    perspective: 600px;
    cursor: pointer;
    transition: transform .12s ease;
}
.mem-card:hover { transform: translateY(-2px); }
.mem-card__inner {
    position: relative;
    width: 100%; height: 100%;
    transition: transform .55s cubic-bezier(.4,1.6,.5,1);
    transform-style: preserve-3d;
}
.mem-card.is-flipped .mem-card__inner { transform: rotateY(180deg); }

.mem-card__face {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.4),
                0 0 0 1px rgba(255,255,255,.07) inset;
}
.mem-card__face--back {
    background: var(--mem-card-back);
    color: rgba(155,107,255,.7);
    font-family: var(--f-display);
    font-size: clamp(1.2rem, 3vw, 2rem);
    background-image:
        radial-gradient(circle at 30% 30%, rgba(155,107,255,.18), transparent 60%),
        var(--mem-card-back);
    border: 1px solid rgba(155,107,255,.35);
}
.mem-card__face--front {
    background: var(--mem-card-front);
    transform: rotateY(180deg);
    font-size: clamp(1.6rem, 4.5vw, 3.4rem);
    color: #1a1a1a;
    border: 1px solid rgba(0,0,0,.1);
}
.mem-card.is-matched .mem-card__face--front {
    box-shadow: 0 0 0 3px var(--mem-owner-color) inset,
                0 6px 18px rgba(0,0,0,.4);
}
.mem-card.is-matched { animation: memMatch .55s ease; opacity: .92; }
@keyframes memMatch {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.08); }
    70%  { transform: scale(.94); }
    100% { transform: scale(1); }
}
.mem-card.is-peeking { animation: memPeek 1.4s ease-in-out infinite alternate; }
@keyframes memPeek {
    from { box-shadow: 0 6px 18px rgba(0,0,0,.4); }
    to   { box-shadow: 0 6px 24px rgba(246,200,19,.45); }
}