/* ==========================================
   SalmasFlix — Games · Memory Match
   Extracted from games.css in Phase 7.3.

   Turn-based card-matching game. All rules scoped to `.mm-*` classes
   so this file has zero cascade impact on other games.

   Theme-token discipline: every accent routes through var(--primary)
   and var(--secondary). "My match" glow uses primary; "Opponent match"
   glow uses secondary. Both retint on every preset.
   ========================================== */

@layer features {


.mm-container { max-width: 600px; }
.mm-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 460px;
    margin: 12px auto 0;
    padding: 0 8px;
}
.mm-card {
    aspect-ratio: 1;
    perspective: 600px;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}
.mm-card.mm-clickable { cursor: pointer; }
.mm-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.45s ease;
    transform-style: preserve-3d;
}
.mm-card.flipped .mm-card-inner {
    transform: rotateY(180deg);
}
.mm-card-front, .mm-card-back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    font-weight: 700;
}
.mm-card-front {
    background: linear-gradient(135deg, rgba(var(--secondary-rgb),0.35), rgba(13,11,30,0.6));
    border: 1.5px solid rgba(var(--secondary-rgb),0.4);
    color: rgba(var(--primary-rgb),0.55);
    font-size: clamp(1.4rem, 4.5vw, 1.8rem);
}
.mm-card-back {
    background: linear-gradient(135deg, rgba(25,20,50,0.85), rgba(13,11,30,0.95));
    border: 1.5px solid rgba(var(--secondary-rgb),0.3);
    transform: rotateY(180deg);
    font-size: clamp(1.6rem, 5vw, 2.2rem);
}
.mm-card.matched .mm-card-inner { transform: rotateY(180deg); }
.mm-card.matched { pointer-events: none; }
.mm-card.matched-mine .mm-card-back {
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(var(--primary-rgb),0.4);
    background: rgba(var(--primary-rgb),0.1);
}
.mm-card.matched-theirs .mm-card-back {
    border-color: var(--secondary);
    box-shadow: 0 0 12px rgba(var(--secondary-rgb),0.4);
    background: rgba(var(--secondary-rgb),0.15);
}
.mm-card.mm-clickable:hover .mm-card-front {
    border-color: rgba(var(--primary-rgb),0.6);
    background: linear-gradient(135deg, rgba(var(--secondary-rgb),0.5), rgba(13,11,30,0.6));
}
.mm-card.mm-clickable:active .mm-card-inner {
    transform: scale(0.95);
}
@media (max-width: 480px) {
    .mm-board { gap: 8px; max-width: 380px; }
}


} /* end @layer features */