/* Base custom styles extending Tailwind */

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

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.3);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 92, 231, 0.6);
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

@keyframes damageFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px) scale(1.5);
    }
}

.damage-text {
    position: absolute;
    color: #FF6B6B;
    font-weight: 900;
    font-size: 1.5rem;
    text-shadow: 0 0 5px black, 0 0 10px rgba(255, 107, 107, 0.8);
    pointer-events: none;
    animation: damageFloat 0.8s ease-out forwards;
    z-index: 50;
}

@keyframes shake {

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

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

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

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

/* Starfield generation */
#stars {
    background:
        radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 90px 40px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 160px 120px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: starsRotate 200s linear infinite;
    transform-origin: center;
}

@keyframes starsRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Overlays */
.overlay-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.modal-visible {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.toast-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
}