*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#333}.app{max-width:1200px;margin:0 auto;padding:20px;min-height:100vh}.game-header{text-align:center;margin-bottom:30px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:20px;box-shadow:0 8px 32px #0000001a}.game-header h1{font-size:2.5rem;color:#fff;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.game-stats{display:flex;justify-content:center;gap:40px;margin-bottom:20px}.stat{display:flex;flex-direction:column;align-items:center}.stat-label{color:#fffc;font-size:.9rem;margin-bottom:5px}.stat-value{color:#fff;font-size:1.5rem;font-weight:700}.game-controls{margin-top:20px}.btn{padding:12px 24px;border:none;border-radius:50px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn-start{background:linear-gradient(45deg,#ff6b6b,#ee5a52);color:#fff;box-shadow:0 4px 15px #ff6b6b66}.btn-start:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b99}.btn-reset{background:linear-gradient(45deg,#4ecdc4,#44a08d);color:#fff;box-shadow:0 4px 15px #4ecdc466}.btn-reset:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4ecdc499}.game-board{display:flex;justify-content:center;align-items:center;min-height:500px}.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;max-width:600px;width:100%}.card{aspect-ratio:1;perspective:1000px;cursor:pointer}.card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .6s;transform-style:preserve-3d;border-radius:15px;box-shadow:0 4px 8px #0003}.card.flipped .card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700}.card-front{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:3px solid rgba(255,255,255,.3)}.card-back{background:linear-gradient(135deg,#ffecd2,#fcb69f);color:#333;transform:rotateY(180deg);border:3px solid rgba(255,255,255,.5)}.card:hover .card-inner{transform:scale(1.05)}.card.flipped:hover .card-inner{transform:rotateY(180deg) scale(1.05)}.card.matched .card-inner{animation:matchPulse .6s ease-in-out}.card.matched .card-back{background:linear-gradient(135deg,#a8e6cf,#88d8a3);box-shadow:0 0 20px #a8e6cfb3}@keyframes matchPulse{0%,to{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.1)}}.welcome-screen{text-align:center;color:#fff;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:40px;box-shadow:0 8px 32px #0000001a}.welcome-screen h2{font-size:2rem;margin-bottom:20px}.welcome-screen p{font-size:1.2rem;margin-bottom:30px;opacity:.9}.game-rules{text-align:left;max-width:400px;margin:0 auto}.game-rules h3{margin-bottom:15px;color:gold}.game-rules ul{list-style:none;padding-left:0}.game-rules li{margin-bottom:10px;padding-left:20px;position:relative}.game-rules li:before{content:"-";position:absolute;left:0}.victory-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.victory-content{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:40px;border-radius:20px;text-align:center;box-shadow:0 20px 40px #0000004d;animation:victoryAppear .5s ease-out}.victory-content h2{font-size:2.5rem;margin-bottom:20px}.victory-content p{font-size:1.2rem;margin-bottom:15px;opacity:.9}.btn-play-again{background:linear-gradient(45deg,#ff6b6b,#ee5a52);color:#fff;margin-top:20px;box-shadow:0 4px 15px #ff6b6b66}.btn-play-again:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b99}@keyframes victoryAppear{0%{opacity:0;transform:scale(.8) translateY(-50px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width: 1024px){.app{max-width:100vw;padding:15px}.cards-grid{max-width:90vw;gap:12px}.game-header{padding:15px}}@media (max-width: 768px){.cards-grid{grid-template-columns:repeat(3,1fr);gap:8px;max-width:95vw}.game-header{padding:12px;margin-bottom:20px}.game-header h1{font-size:1.8rem;margin-bottom:15px}.game-stats{gap:15px;flex-wrap:wrap}.stat{min-width:120px}.stat-value{font-size:1.2rem}.card-front,.card-back{font-size:1.3rem}.victory-content{padding:20px;margin:15px}.victory-content h2{font-size:2rem}.welcome-screen{padding:25px}.welcome-screen h2{font-size:1.5rem}}@media (max-width: 480px){.app{padding:8px}.game-header{padding:8px;margin-bottom:12px}.game-header h1{font-size:1.5rem;margin-bottom:10px}.game-stats{flex-direction:column;gap:8px;align-items:center}.stat{flex-direction:row;gap:10px;align-items:center;justify-content:center}.stat-label{margin-bottom:0;font-size:.8rem}.stat-value{font-size:1rem}.cards-grid{grid-template-columns:repeat(2,1fr);gap:5px;max-width:100vw}.card-front,.card-back{font-size:1rem}.btn,.btn-start,.btn-reset,.btn-play-again{font-size:.8rem;padding:6px 12px;letter-spacing:.5px}.welcome-screen{padding:12px}.welcome-screen h2{font-size:1.2rem;margin-bottom:10px}.welcome-screen p{font-size:1rem;margin-bottom:15px}.game-rules{max-width:100%}.game-rules h3{font-size:1rem;margin-bottom:8px}.game-rules li{font-size:.9rem;margin-bottom:5px}.victory-content{margin:5px;padding:12px 8px}.victory-content h2{font-size:1.5rem;margin-bottom:10px}.victory-content p{font-size:1rem;margin-bottom:8px}.game-board{min-height:300px}}@media (max-width: 320px){.app{padding:5px}.cards-grid{gap:3px}.card-front,.card-back{font-size:.8rem}.game-header h1{font-size:1.2rem}.btn,.btn-start,.btn-reset,.btn-play-again{font-size:.7rem;padding:5px 10px}}
