:root {
    --cell-size: 60px
}

body {
    font-family: Quicksand, sans-serif;
    margin: 0;
    overflow: hidden;
    background-color: #f8fafc;
    touch-action: none
}

@keyframes pulse-soft {

    0%, to {
        transform: scale(1.1);
        box-shadow: 0 0 20px #0000001a
    }

    50% {
        transform: scale(1.18);
        box-shadow: 0 15px 40px 10px #0000001a
    }
}

.animate-pulse-soft {
    animation: pulse-soft 2.5s ease-in-out infinite
}

.dot-glow {
    filter: drop-shadow(0 0 8px currentColor)
}

.connection-line {
    pointer-events: none;
    stroke-linecap: round;
    stroke-linejoin: round
}

@keyframes fall-in {
    0% {
        transform: translateY(-300px);
        opacity: 0
    }

    60% {
        opacity: 1
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.animate-fall {
    animation: fall-in .6s cubic-bezier(.23, 1, .32, 1) both
}

@keyframes explode {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1)
    }

    30% {
        transform: scale(1.8);
        opacity: 1;
        filter: brightness(1.6)
    }

    to {
        transform: scale(0);
        opacity: 0;
        filter: brightness(2)
    }
}

.animate-explode {
    animation: explode .4s cubic-bezier(.175, .885, .32, 1.275) forwards
}

@keyframes particle-pop {
    0% {
        transform: translate(0) scale(1);
        opacity: 1
    }

    to {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0
    }
}

.animate-particle {
    animation: particle-pop .5s cubic-bezier(.165, .84, .44, 1) forwards
}

@keyframes shake {

    0%, to {
        transform: translate(0)
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translate(-4px)
    }

    20%, 40%, 60%, 80% {
        transform: translate(4px)
    }
}

.animate-shake {
    animation: shake .6s cubic-bezier(.36, .07, .19, .97) both
}

@keyframes firework {
    0% {
        transform: translate(0);
        opacity: 1
    }

    to {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y));
        opacity: 0
    }
}

.animate-firework {
    animation: firework 1.2s ease-out forwards
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #0000000d;
    border-radius: 10px
}

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #0000001a
    }

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    outline: none
}