.mem-card { max-width: 660px; }
.mem-bar { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mem-levels { display: flex; gap: .3rem; }
.mem-lv { font-family: var(--kf); font-weight: 600; border: 2px solid #e0d0ff; background: #f7f2ff; color: #6a4bbc; border-radius: 999px; padding: .35rem .85rem; cursor: pointer; font-size: .85rem; }
.mem-lv.active { background: #d0bcff; }
.mem-stat { font-family: var(--kf); color: #6a4bbc; font-size: .95rem; }

.mem-grid { display: grid; gap: .6rem; justify-content: center; margin: 0 auto 1rem; max-width: 460px; }
.mem-card-btn {
    aspect-ratio: 1; border: none; border-radius: 16px; cursor: pointer;
    font-size: clamp(1.8rem, 8vw, 2.8rem);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #9775fa, #7048e8);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .15); transition: transform .12s, background .12s;
}
.mem-card-btn .face { opacity: 0; transition: opacity .12s; }
.mem-card-btn.flipped { background: #fff; border: 3px solid #d0bcff; }
.mem-card-btn.flipped .face { opacity: 1; }
.mem-card-btn.matched { background: #e9fbef; border: 3px solid #69db7c; cursor: default; }
.mem-card-btn.matched .face { opacity: 1; }
.mem-card-btn:active { transform: scale(.96); }