:root{--bg-dark: #050505;--glass-bg: rgba(255, 255, 255, .03);--glass-border: rgba(255, 255, 255, .08);--primary-glow: #8b5cf6;--secondary-glow: #06b6d4;--accent-glow: #d946ef;--text-main: #ffffff;--text-muted: #94a3b8}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-dark);height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;padding:10px;color:var(--text-main);overflow:hidden;position:relative}body:before,body:after{content:"";position:absolute;width:150vw;height:150vw;border-radius:50%;filter:blur(80px);z-index:-1;opacity:.4;animation:floatLights 20s infinite alternate ease-in-out;pointer-events:none}body:before{background:radial-gradient(circle,var(--primary-glow),transparent 70%);top:-20%;left:-10%;animation-delay:0s}body:after{background:radial-gradient(circle,var(--secondary-glow),transparent 70%);bottom:-20%;right:-10%;animation-delay:-10s}@keyframes floatLights{0%{transform:translate(0) scale(1)}50%{transform:translate(50px,-50px) scale(1.1)}to{transform:translate(-30px,30px) scale(.9)}}#root{width:100%;max-width:100%;z-index:1}.app{display:flex;flex-direction:column;align-items:center;gap:15px;height:100%;width:100%;justify-content:center}.game-header{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:10px 20px;border-radius:16px;box-shadow:0 8px 32px #0000004d;width:90%;max-width:min(90vw,60vh);border:1px solid var(--glass-border)}.game-header:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--secondary-glow),transparent);opacity:.5}.game-header h1{font-size:1.5rem;background:linear-gradient(135deg,#fff 30%,var(--secondary-glow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-transform:uppercase;letter-spacing:1px;margin:0;text-shadow:0 0 20px rgba(6,182,212,.3)}.stats{display:flex;gap:30px;justify-content:center;width:100%}.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}.stat-label{font-size:.75rem;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:1px}.stat-value{font-size:1.2rem;font-weight:800;font-family:monospace;color:var(--text-main);text-shadow:0 0 10px rgba(255,255,255,.2);transition:color .3s}.stat-value:hover{color:var(--primary-glow);text-shadow:0 0 20px var(--primary-glow)}.reset-btn{background:linear-gradient(135deg,var(--primary-glow),var(--accent-glow));color:#fff;border:none;padding:8px 20px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;border-radius:6px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px #8b5cf666;position:relative;overflow:hidden}.reset-btn:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:.5s}.reset-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px #8b5cf699}.reset-btn:hover:after{left:100%}.reset-btn:active{transform:translateY(1px)}.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:90%;max-width:min(90vw,60vh);margin:0 auto;perspective:1000px}.card{aspect-ratio:1;position:relative;cursor:pointer;transform-style:preserve-3d}.card-front,.card-back{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:12px;backface-visibility:hidden;transition:transform .6s cubic-bezier(.4,0,.2,1),box-shadow .3s;box-shadow:0 4px 6px #0000004d}.card-front{background:linear-gradient(145deg,#1e1e24,#121216);font-size:1.5rem;border:1px solid var(--glass-border);color:#ffffff1a;transform:rotateY(0)}.card-front:after{content:"?";font-weight:900;background:linear-gradient(to bottom right,var(--text-muted),var(--bg-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.card-back{background:linear-gradient(145deg,#2a2a35,#1a1a22);font-size:2.5rem;transform:rotateY(180deg);border:1px solid var(--primary-glow);box-shadow:inset 0 0 20px #8b5cf61a}.card:hover:not(.matched):not(.flipped) .card-front{transform:rotateY(0) scale(1.02);box-shadow:0 0 15px #06b6d44d;border-color:var(--secondary-glow)}.card:active:not(.matched){transform:scale(.98)}.card.flipped .card-front{transform:rotateY(-180deg)}.card.flipped .card-back{transform:rotateY(0)}.card.matched{pointer-events:none;animation:pulseMatch .5s ease-out forwards}.card.matched .card-back{background:#22d3ee1a;border:2px solid var(--secondary-glow);box-shadow:0 0 30px var(--secondary-glow),inset 0 0 20px #22d3ee33;color:#fff}@keyframes pulseMatch{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.win-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#050505f2;padding:30px 50px;border-radius:20px;text-align:center;border:1px solid var(--secondary-glow);box-shadow:0 0 50px #06b6d433;z-index:100;max-width:90%;width:auto;animation:popIn .6s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.win-message h2{font-size:2rem;margin-bottom:10px;background:linear-gradient(to right,var(--secondary-glow),var(--accent-glow));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.win-message p{font-size:1rem;color:var(--text-muted);margin-bottom:20px}@media(max-width:480px){.cards-grid{max-width:min(95vw,65vh)}.game-header{padding:8px 15px;gap:5px}.game-header h1{font-size:1.1rem}.card-back{font-size:1.8rem}.reset-btn{padding:6px 15px;font-size:.7rem}}