html,body,#root{background-color:#f0f0f0;height:100%;margin:0;font-family:Segoe UI Emoji,Apple Color Emoji,Noto Color Emoji,sans-serif}.app-container{box-sizing:border-box;flex-direction:column;width:100%;height:100%;padding:2vw;display:flex}h1{text-align:center;color:#333;margin-bottom:2vh}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.controls button{color:#fff;cursor:pointer;background-color:#2a9d8f;border:none;border-radius:8px;padding:.5rem 1rem;transition:background-color .2s}.controls button:hover{background-color:#21867a}.grid-container{flex:1;place-content:start center;gap:12px;width:100%;display:grid}.card{perspective:1000px;cursor:pointer;width:90px;height:120px;position:relative}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.4,.2,.2,1);position:relative}.card.flipped .card-inner,.card.matched .card-inner{transform:rotateY(180deg)}.card-front,.card-back{backface-visibility:hidden;-webkit-user-select:none;user-select:none;border-radius:12px;justify-content:center;align-items:center;width:100%;height:100%;font-size:2rem;display:flex;position:absolute;box-shadow:0 4px 12px #00000026}.card-front{background:linear-gradient(145deg,#d6d6d6,#c4c4c4)}.card-back{background:#fff;transform:rotateY(180deg)}.card:after{content:"";pointer-events:none;opacity:0;border-radius:12px;position:absolute;inset:0}.card.matched:after{animation:.7s ease-out forwards matchGlow}@keyframes matchGlow{0%{opacity:0;box-shadow:0 0 #ffd70000}40%{opacity:1;box-shadow:0 0 18px #ffd700e6,0 0 30px #ffd70099}to{opacity:0;box-shadow:0 0 #ffd70000}}.modal{z-index:10;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;animation:.25s fadeIn;display:flex;position:fixed;top:0;left:0}.modal-content{text-align:center;background:#fff;border-radius:16px;width:350px;max-width:90%;padding:30px 25px;animation:.25s slideUp;box-shadow:0 8px 25px #00000040}.modal-content h2{color:#2a9d8f;margin-bottom:15px;font-size:1.5rem}.modal-content p{color:#333;margin-bottom:20px}.modal-content select{border:1px solid #ccc;border-radius:8px;padding:8px 12px;font-size:1rem}.modal-content button{color:#fff;cursor:pointer;background-color:#2a9d8f;border:none;border-radius:8px;padding:10px 20px;font-size:1rem;transition:background-color .3s}.modal-content button:hover{background-color:#21867a}#confetti-canvas{pointer-events:none;z-index:9999;width:100%;height:100%;position:fixed;top:0;left:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@media (width<=500px){.card{width:70px;height:95px}.card-front,.card-back{font-size:1.5rem}}@media (width<=350px){.card{width:60px;height:80px}.card-front,.card-back{font-size:1.2rem}}@media (width<=768px){.modal{box-sizing:border-box;padding:20px}.modal-content{border-radius:14px;width:100%;max-width:420px;margin:auto}}@media (width<=480px){.modal{padding:24px 16px}.modal-content{border-radius:12px;max-width:100%;padding:22px 18px}}@media (width<=360px){.modal{padding:28px 14px}.modal-content{padding:20px 16px}}