*{padding:0;margin:0;box-sizing:border-box}body{margin:0;padding:0;font-family:Poppins,sans-serif;min-height:100vh;background:linear-gradient(135deg,#a18cd1,#fbc2eb);display:flex;justify-content:center;align-items:center;flex-direction:column}.App{margin:2rem;text-align:center}h1{font-size:3rem;font-weight:700;color:indigo;text-shadow:2px 2px 6px rgba(255,255,255,.8);margin-bottom:20px;text-align:center}@keyframes glowLavender{0%{text-shadow:0px 0px 10px rgba(161,140,209,.6),0px 0px 20px rgba(251,194,235,.5)}to{text-shadow:0px 0px 20px rgba(161,140,209,.9),0px 0px 40px rgba(251,194,235,.8)}}.subtitle{font-size:1.4rem;font-style:italic;color:#6a0dad;text-align:center;margin-top:20px;margin-bottom:25px;text-shadow:2px 2px 6px rgba(255,255,255,0)}.game{margin-top:15px;height:90vh;display:flex;align-items:center;justify-content:center}.cards{margin:auto;display:grid;grid-template-columns:repeat(4,150px);grid-gap:20px;place-content:center}.card{height:200px;width:150px;border:8px solid #fff;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transform:rotateY(180deg);animation:3s flipCard linear;transition:transform .5s;background:#ab73df url(/assets/lav.png) no-repeat center center;background-size:contain}.card img{height:130px;width:130px;visibility:hidden;animation:3s hideImage linear}@keyframes flipCard{0%,70%{transform:rotateY(0);background:linear-gradient(to top,#a18cd1,#fbc2eb)}to{transform:rotateY(180deg);background:url(/assets/bg.png) no-repeat center center;background-size:contain}}@keyframes hideImage{0%{visibility:visible}85%{visibility:hidden}}.card.flipped{transform:rotate(0);background:linear-gradient(to top,#a18cd1,#fbc2eb)}.card.flipped img{visibility:visible}.card.match{background:green}.card.mismatch{background:red}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:9999}.message-box{background:linear-gradient(135deg,#9d4a8e,#9e34d2);padding:60px 80px;border-radius:25px;text-align:center;box-shadow:0 15px 35px #00000080;font-size:2.2rem;font-weight:700;color:#fff;max-width:700px;width:80%;animation:popIn .5s ease-out}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.play-again{margin-top:20px;padding:12px 30px;font-size:1.2rem;font-weight:700;color:#dac6c6;background:linear-gradient(to top,#a18cd1,#fbc2eb);border:none;border-radius:30px;cursor:pointer;transition:all .3s ease-in-out;box-shadow:0 4px 10px #0000004d}.play-again:hover{background:linear-gradient(135deg,#8e1894,#d239e7);color:#fff;transform:scale(1.05);box-shadow:0 6px 15px #0006}.play-again:active{transform:scale(.95)}