/* Plasma Kuiper Styles */

.plasma-orb {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.2);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

@media(min-width: 768px) {
    .plasma-orb {
        width: 130px;
        height: 130px;
    }
}

.plasma-orb:active {
    transform: scale(0.95);
}

/* Colors */
.orb-top {
    background-color: rgba(14, 165, 233, 0.2);
    border-color: #0ea5e9;
}

/* Blue */
.orb-bottom {
    background-color: rgba(236, 72, 153, 0.2);
    border-color: #ec4899;
}

/* Pink */
.orb-left {
    background-color: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
}

/* Green */
.orb-right {
    background-color: rgba(234, 179, 8, 0.2);
    border-color: #eab308;
}

/* Yellow */

/* Active State (Full Glow) */
.plasma-orb.active {
    filter: brightness(1.5);
    background-color: currentColor;
    /* Will be set or inherited? Better to be specific */
    box-shadow: 0 0 30px currentColor, inset 0 0 30px white;
    transform: scale(1.1);
}

.orb-top.active {
    background-color: #0ea5e9;
    box-shadow: 0 0 40px #0ea5e9;
}

.orb-bottom.active {
    background-color: #ec4899;
    box-shadow: 0 0 40px #ec4899;
}

.orb-left.active {
    background-color: #22c55e;
    box-shadow: 0 0 40px #22c55e;
}

.orb-right.active {
    background-color: #eab308;
    box-shadow: 0 0 40px #eab308;
}

/* Disabled state */
.plasma-orb.disabled {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}

.animate-spin-reverse-slow {
    animation: spin 15s linear infinite reverse;
}