.garlands-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 500;
    overflow: visible;
    contain: layout style;
}

.garlands-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.garland-light {
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid #000;
    transform: translate(-50%, -50%);
    /* GPU layer */
    backface-visibility: hidden;
    contain: layout style paint;
}

.garland-light.on {
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Цвета лампочек - используем box-shadow вместо filter */
.garland-light.color-red {
    background-color: #ff0000;
    box-shadow: 0 0 4px #ff0000;
}

.garland-light.color-green {
    background-color: #00ff00;
    box-shadow: 0 0 4px #00ff00;
}

.garland-light.color-blue {
    background-color: #0000ff;
    box-shadow: 0 0 4px #0000ff;
}

.garland-light.color-yellow {
    background-color: #ffff00;
    box-shadow: 0 0 4px #ffff00;
}

.garland-light.color-cyan {
    background-color: #00ffff;
    box-shadow: 0 0 4px #00ffff;
}

.garland-light.color-magenta {
    background-color: #ff00ff;
    box-shadow: 0 0 4px #ff00ff;
}

.garland-light.color-orange {
    background-color: #ff8800;
    box-shadow: 0 0 4px #ff8800;
}

.garland-light.color-white {
    background-color: #ffffff;
    box-shadow: 0 0 4px #ffffff;
}