.memory-game-wrapper{position:relative;width:fit-content;margin:0 auto}.memory-game-title{margin:20px 0 10px;font-size:.7rem;color:var(--text-color);text-transform:uppercase;letter-spacing:2px;font-family:var(--heading-font);text-shadow:2px 2px 0 rgba(0,0,0,.3)}#memory-game{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:6px;width:280px;margin:20px auto;padding:12px;border-radius:0;background-color:#d8e8f0;cursor:pointer;position:relative;border:4px solid #3aafb9;box-shadow:4px 4px #2d7a82,inset 0 0 0 2px #b8c8d0;image-rendering:pixelated}#memory-game:hover{transform:none}#memory-game::before{content:'CLICK TO START';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--heading-font);font-size:1.2rem;color:#fff;text-shadow:2px 2px 0 #000,0 0 10px rgba(255,255,255,.5);pointer-events:none;z-index:10}#memory-game.game-started::before{display:none}[data-theme=dark] #memory-game{background-color:#0a0a14;box-shadow:4px 4px #2d7a82,inset 0 0 0 2px #050508}.memory-card{position:relative;height:55px;cursor:pointer;transform-style:preserve-3d;transform:scale(1);transition:transform .15s step-end;perspective:1000px}.memory-card:active{transform:scale(.9);transition:transform .05s step-end}.memory-card.flipped{transform:rotateY(180deg)}.front-face,.back-face{position:absolute;width:100%;height:100%;border-radius:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;justify-content:center;align-items:center;box-sizing:border-box;image-rendering:pixelated}.front-face{transform:rotateY(180deg);background:linear-gradient(135deg,#e8f0f8 0%,#d0e0e8 100%);font-size:22px;border:3px solid #3aafb9;box-shadow:inset 2px 2px rgba(255,255,255,.8),inset -2px -2px rgba(0,0,0,.15)}.back-face{background:repeating-linear-gradient( 45deg,#4d9a50,#4d9a50 4px,#5dba60 4px,#5dba60 8px );border:3px solid #3aafb9;box-shadow:inset 2px 2px rgba(255,255,255,.3),inset -2px -2px rgba(0,0,0,.2);transform:rotateY(0)}.back-face::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient( 0,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px );pointer-events:none}.confetti-container{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1000;image-rendering:pixelated;perspective:800px;overflow:hidden}.confetti{position:absolute;border-radius:0;box-shadow:2px 2px rgba(0,0,0,.3);transform-style:preserve-3d;backface-visibility:visible;image-rendering:pixelated}[data-theme=dark] .front-face{background:linear-gradient(135deg,#2a2a4a 0%,#1a1a2e 100%);color:#3aafb9;border-color:#3aafb9;text-shadow:0 0 8px #3aafb9}[data-theme=dark] .back-face{background:repeating-linear-gradient( 45deg,#2d5a30,#2d5a30 4px,#3d7a40 4px,#3d7a40 8px );border-color:#3aafb9}.score-counter.final-score{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--heading-font);font-size:1.2rem;color:#fff;letter-spacing:2px;text-shadow:2px 2px 0 #000,0 0 10px rgba(255,255,255,.5);z-index:20;pointer-events:none;white-space:nowrap}.reset-button{margin:10px auto;padding:10px 20px;background-color:#e8f0f8;color:#2d7a82;border:3px solid #3aafb9;border-radius:0;cursor:pointer;font-size:.5rem;font-family:var(--heading-font);text-transform:uppercase;letter-spacing:1px;display:block;box-shadow:3px 3px #2d7a82,inset 1px 1px rgba(255,255,255,.8);transition:none}.reset-button:hover{background-color:#3aafb9;color:#fff;box-shadow:3px 3px #59C265,inset 1px 1px rgba(255,255,255,.3)}.reset-button:active{transform:translate(2px,2px);box-shadow:1px 1px #2d7a82}[data-theme=dark] .reset-button{background-color:#0a0a14;color:#3aafb9;border-color:#3aafb9;box-shadow:3px 3px #2d7a82,inset 1px 1px rgba(255,255,255,.1)}[data-theme=dark] .reset-button:hover{background-color:#3aafb9;color:#0a0a14}#memory-game::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient( 0,transparent,transparent 2px,rgba(0,0,0,3%) 2px,rgba(0,0,0,3%) 4px );pointer-events:none;z-index:5}.memory-card.flipped .front-face{animation:matched-glow .5s ease-out}@keyframes matched-glow{0%{box-shadow:0 0 rgba(58,175,185,0)}50%{box-shadow:0 0 20px rgba(58,175,185,.8),0 0 40px rgba(58,175,185,.4)}100%{box-shadow:inset 2px 2px rgba(255,255,255,.1),inset -2px -2px rgba(0,0,0,.3)}}