.memory-grid{max-width:32vw;margin:auto}.memory-card{position:relative;transform-style:preserve-3d;transition:transform .5s ease}.memory-card.is-flipped{transform:rotateY(180deg)}.memory-card__front,.memory-card__back{position:absolute;inset:0;backface-visibility:hidden;border-radius:.75rem;overflow:hidden}.memory-card__front{transform:rotateY(180deg);background:#fff;border:2px solid #e5e7eb;display:flex;align-items:center;justify-content:center}.memory-card__back{transform:rotateY(0);background:linear-gradient(135deg,#1e40af,#3b82f6);border:3px solid #1e3a8a}.card-back-design{width:calc(100% - 8px);height:calc(100% - 8px);margin:4px;border-radius:.5rem;background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(255,255,255,.1) 5px,rgba(255,255,255,.1) 10px),linear-gradient(135deg,#1e40af,#2563eb);display:flex;align-items:center;justify-content:center}.card-back-design:after{content:"?";font-size:2rem;font-weight:700;color:#ffffffb3}.memory-card-matched{transition:opacity .4s ease,transform .4s ease;opacity:0;transform:scale(.8);pointer-events:none}.memory-locked{cursor:not-allowed;pointer-events:none}.memory-card-shuffle{transition:transform .3s ease,opacity .3s ease;opacity:0;transform:scale(.5) rotate(180deg)}.shuffle-popup{animation:shuffle-pulse .6s ease-in-out infinite alternate}@keyframes shuffle-pulse{0%{transform:scale(1)}to{transform:scale(1.05)}}
