:root{--textMain: #9067a9;--back: rgba(255, 255, 255, .6);--mainBackGrad: linear-gradient(145deg, #ffffffe5, #f0f0f068);--radius: 20px}body{margin:0;display:flex;height:100dvh;align-items:center;justify-content:center;background:linear-gradient(135deg,#da9fff,#cfdef3);font-family:Poppins,sans-serif}.app{width:clamp(360px,fit-content,1000px);display:flex;flex-direction:column;gap:1rem}.result-container{display:flex;align-items:center;justify-content:center;gap:1rem}.score{flex:1}.score,.timer{padding:1rem;color:var(--textMain);background:radial-gradient(circle 200px at left top,#fff,#f0f0f090);text-align:center;place-self:center;border-radius:var(--radius);font-size:2rem;font-weight:700}.timer{width:fit-content}.board{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;padding:1.2rem;background:#fff9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius)}.card-container{perspective:1000px}.card{width:clamp(60px,20vw,90px);aspect-ratio:1;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.175,.885,.32,1.4);cursor:pointer;-webkit-user-select:none;user-select:none}.card:hover{transform:scale(1.09)}.card.flipped{transform:rotateY(180deg)}.front,.back{position:absolute;width:100%;height:100%;font-size:3rem;display:flex;justify-content:center;align-items:center;backface-visibility:hidden;border:1px solid #ddd;border-radius:20px;box-shadow:0 4px 10px #00000026}.front{background:var(--mainBackGrad)}.back{transform:rotateY(180deg);background:var(--mainBackGrad)}.restart{border:0;padding:1rem;place-self:center;font-size:clamp(1rem,1.5vw,1.5rem);color:var(--textMain);width:60%;border-radius:var(--radius);background:#fff9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.2s cubic-bezier(.19,1,.22,1);font-weight:700}.restart:active{scale:.9}.restart:hover{opacity:.8}.popup{position:absolute;visibility:hidden;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);place-self:center;background:var(--back);padding:1.5rem;border-radius:12px;box-shadow:0 4px 20px #0003;opacity:0;transform:scale(.8);transition:opacity .2s ease,visibility .2s,transform .2s ease;text-align:center}.popup.show{visibility:visible;opacity:1;transform:scale(1)}.popup-content h2{color:#2c3e50;margin:0 0 1rem;font-size:1.8rem;font-weight:700}.popup-content p{color:#34495e;margin:0 0 1.5rem;font-size:1.1rem}.popup-buttons{display:flex;gap:1rem;justify-content:center}.popup-btn{padding:.75rem 1.5rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:background-color .3s,transform .2s}.restart-btn{background-color:#3498db;color:#fff}.restart-btn:hover{background-color:#2980b9;transform:translateY(-2px)}.close-btn{background-color:#e74c3c;color:#fff}.close-btn:hover{background-color:#c0392b;transform:translateY(-2px)}