.game-container{min-height:100vh;min-height:100dvh}@media (max-width:480px){.game-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:4px 0;min-height:100dvh}}.card-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-gap:16px;background-color:#d6d3d1;box-shadow:0 6px 0 rgb(161,161,170);border:2px solid #a1a1aa;margin-top:24px;margin-bottom:24px;border-radius:.75rem;padding:24px;position:relative;max-width:100%}@media (max-width:480px){.card-grid{grid-gap:8px;margin:8px 0 4px;padding:8px;box-shadow:0 3px 0 rgb(161,161,170);box-sizing:border-box}}@media (min-width:1024px){.card-grid{min-width:32rem}}.menu{justify-content:center}.custom-button,.menu{display:flex;align-items:center;gap:1rem}.custom-button{background-color:#d9f99d;color:#3C5AA6;transition:.1s ease-in;font-weight:600;border:2px solid #a1a1aa;box-shadow:0 6px 0 rgb(161,161,170);cursor:pointer;height:2.5rem;border-radius:.375rem;padding:1.5rem 2.5rem;font-size:16px}@media (max-width:480px){.custom-button{height:2rem;padding:1rem 1.5rem;box-shadow:0 3px 0 rgb(161,161,170);gap:.5rem;margin-bottom:0}.custom-button:active{box-shadow:0 1px 0 rgb(161,161,170);transform:translateY(2px)}.custom-button img{height:24px}.custom-button p{font-size:14px}}.custom-button img{height:32px}.custom-button p{font-size:24px}.custom-button:active{box-shadow:0 2px 0 rgb(161,161,170);transform:translateY(4px)}.card{position:relative}.card,.card img{-webkit-user-select:none;-moz-user-select:none;user-select:none}.card img{max-width:100%;height:100px;object-fit:contain;display:block;cursor:pointer;background-color:transparent}.card .front{transform:rotateY(90deg);transition:all .2s ease-in;position:absolute}.flipped .front{transform:rotateY(0deg);transition-delay:.2s}.card .back{transition:all .2s ease-in;transition-delay:.2s;position:relative;z-index:10}.flipped .back{transform:rotateY(90deg);transition-delay:0s}.card .rotate{will-change:transform}.card .rotate:hover{animation:rotateAnimation 1s cubic-bezier(.68,-.55,.27,1.55) infinite alternate}.card .rotate:active{animation:none;transform:rotate(0deg)}.card .bounce{animation:bounce 1s ease-in-out 2}@keyframes rotateAnimation{0%{transform:rotate(0deg)}50%{transform:rotate(8deg)}to{transform:rotate(-4deg)}}.card .victory{animation:bounce 1s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.card .shuffle-bounce{animation:bounce .6s ease-in-out 1}@media (max-width:480px){.card img{height:50px}}