@keyframes shake-mild {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes shake-strong {
    0% { transform: translate(2px, 1px) rotate(0deg); }
    10% { transform: translate(-2px, -3px) rotate(-2deg); }
    20% { transform: translate(-4px, 0px) rotate(2deg); }
    30% { transform: translate(4px, 3px) rotate(0deg); }
    40% { transform: translate(2px, -1px) rotate(2deg); }
    50% { transform: translate(-2px, 3px) rotate(-1deg); }
    60% { transform: translate(-4px, 2px) rotate(0deg); }
    70% { transform: translate(4px, 2px) rotate(-2deg); }
    80% { transform: translate(-2px, -1px) rotate(2deg); }
    90% { transform: translate(2px, 3px) rotate(0deg); }
    100% { transform: translate(2px, -3px) rotate(-1deg); }
}

.shake-mild {
    animation: shake-mild 0.2s 2;
}

.shake-strong {
    animation: shake-strong 0.4s 2;
}

@keyframes devilish-shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes green-pulse {
    from { background-color: #28a745; }
    to { background-color: #177c31; } /* Slightly darker green */
}

/* Green button racing animation */
.green-race {
    animation: green-race-path 5s linear infinite; /* 5s for one race, infinite makes it loop until removed */
    animation-iteration-count: 2; /* Races twice */
}

@keyframes green-race-path {
    0%   { transform: translate(0, 0); } /* Start relative to its initial random position */
    25%  { transform: translate(90vw, 0); } /* Move right */
    50%  { transform: translate(90vw, 90vh); } /* Move down */
    75%  { transform: translate(0, 90vh); } /* Move left */
    100% { transform: translate(0, 0); } /* Move up back to start */
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}