@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');

body {
    font-family: 'Fredoka', sans-serif;
}

/* Option Content Animation */
.game-option:hover {
    transform: translateY(-4px);
}

.game-option:active {
    transform: scale(0.96) translateY(2px);
}

/* Croc Animations */
.croc-snap-left {
    animation: snapLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.croc-snap-right {
    animation: snapRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes snapLeft {
    0% {
        transform: rotate(0deg) scale(1);
    }

    40% {
        transform: rotate(-45deg) scale(1.1);
    }

    50% {
        transform: rotate(-45deg) scale(1.2);
    }

    /* CHOMP */
    100% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes snapRight {
    0% {
        transform: rotate(0deg) scale(1) scaleX(-1);
    }

    40% {
        transform: rotate(-45deg) scale(1.1) scaleX(-1);
    }

    50% {
        transform: rotate(-45deg) scale(1.2) scaleX(-1);
    }

    /* CHOMP */
    100% {
        transform: rotate(0deg) scale(1) scaleX(-1);
    }
}

.pupil {
    animation: lookAround 4s infinite;
}

@keyframes lookAround {

    0%,
    90% {
        transform: translate(0, 0);
    }

    92% {
        transform: translate(-2px, 0);
    }

    95% {
        transform: translate(2px, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* Object Styling */
.game-item {
    font-size: 2.5rem;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.1));
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile Tweaks */
@media (max-width: 600px) {
    .game-item {
        font-size: 1.8rem;
    }
}