@tailwind base;
@tailwind components;
@tailwind utilities;

.bubble-anim {
    animation: float 2s ease-in-out infinite alternate;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

/* Board physics */
#board {
    position: relative;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    /* Colors applied inline by JS based on palette */
    cursor: pointer;
    box-shadow: inset -4px -4px 10px rgba(0, 0, 0, 0.1), inset 8px 8px 10px rgba(255, 255, 255, 0.4), 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Transform transition handles falling/shifting */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-out, scale 0.2s ease-out;
    transform-origin: center;
}

.bubble:active {
    filter: brightness(0.9);
}

.bubble.popped {
    opacity: 0;
    scale: 0.5;
    pointer-events: none;
}

/* Screen shake for invalid taps / lost life */
.shake {
    animation: shake 0.3s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* Floating combat text for combo multiplier scoring */
.floating-text {
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 1.5rem;
    color: #334155;
    pointer-events: none;
    user-select: none;
    animation: floatScore 0.8s ease-out forwards;
    z-index: 20;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
}

@keyframes floatScore {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.8);
    }

    20% {
        opacity: 1;
        transform: translateY(-15px) scale(1.2);
    }

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

/* Star animations */
.star-pop {
    animation: starPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes starPop {
    0% {
        transform: scale(0);
        color: #cbd5e1;
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
        color: #f59e0b;
    }
}