.memojuego-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 600px; margin: auto; padding: 20px; } .memojuego-card { aspect-ratio: 1 / 1; position: relative; cursor: pointer; perspective: 1000px; } .memojuego-inner { position: absolute; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .memojuego-card.flipped .memojuego-inner { transform: rotateY(180deg); } .memojuego-front, .memojuego-back { position: absolute; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; } .memojuego-front { background: #ccc; } .memojuego-back { transform: rotateY(180deg); background-size: cover; } .memojuego-message { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background: #ffc107; color: #000; font-size: 24px; font-weight: bold; padding: 12px 20px; border-radius: 10px; z-index: 9999; box-shadow: 0 0 15px rgba(0,0,0,0.2); animation: aparecer 0.3s ease; } @keyframes aparecer { from { transform: translateX(-50%) scale(0.9); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } } .memojuego-restart { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #28a745; color: #fff; font-size: 18px; padding: 12px 24px; border: none; border-radius: 8px; z-index: 9999; cursor: pointer; box-shadow: 0 0 10px rgba(0,0,0,0.2); animation: aparecer 0.3s ease; }