[data-bgcolor="#F00000"] {
  background-color: #F00000;
}
[data-bgcolor="#F00000"]::after {
    background-color: #F00000;
}
[data-bgcolor="#4F5CCF"] {
  background-color: #4F5CCF;
}
[data-bgcolor="#4F5CCF"]::after {
    background-color: #4F5CCF;
}
[data-bgcolor="#ABDD40"] {
  background-color: #ABDD40;
}
[data-bgcolor="#ABDD40"]::after {
    background-color: #ABDD40;
}
[data-bgcolor="#3EA7E0"] {
  background-color: #3EA7E0;
}
[data-bgcolor="#3EA7E0"]::after {
    background-color: #3EA7E0;
}
[data-bgcolor="#3EE077"] {
  background-color: #3EE077;
}
[data-bgcolor="#3EE077"]::after {
    background-color: #3EE077;
}
[data-bgcolor="#EB9B33"] {
  background-color: #EB9B33;
}
[data-bgcolor="#EB9B33"]::after {
    background-color: #EB9B33;
}
[data-bgcolor="#DFEB33"] {
  background-color: #DFEB33;
}
[data-bgcolor="#DFEB33"]::after {
    background-color: #DFEB33;
}
[data-bgcolor="#9E3FDE"] {
  background-color: #9E3FDE;
}
[data-bgcolor="#9E3FDE"]::after {
    background-color: #9E3FDE;
}
[data-bgcolor="#DE3FCF"] {
  background-color: #DE3FCF;
}
[data-bgcolor="#DE3FCF"]::after {
    background-color: #DE3FCF;
}

/* Efeito de brilho quando clicado ou tocando */
.item-brick.highlighted {
    box-shadow: 0 0 12px 3px rgba(240, 240, 240, 0.35),
                0 0 20px 6px rgba(230, 230, 230, 0.25);
    animation: pulse-glow 0.5s ease-in-out;
}

.item-brick.playing {
    box-shadow: 0 0 15px 4px rgba(255, 215, 0, 0.5),
                0 0 30px 8px rgba(255, 215, 0, 0.3);
    animation: pulse-play 1s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 12px 3px rgba(240, 240, 240, 0.35),
                    0 0 20px 6px rgba(230, 230, 230, 0.25);
    }
    50% {
        box-shadow: 0 0 16px 4px rgba(245, 245, 245, 0.45),
                    0 0 28px 8px rgba(235, 235, 235, 0.35);
    }
}

@keyframes pulse-play {
    0%, 100% {
        box-shadow: 0 0 15px 4px rgba(255, 215, 0, 0.5),
                    0 0 30px 8px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 20px 6px rgba(255, 215, 0, 0.65),
                    0 0 40px 10px rgba(255, 215, 0, 0.4);
    }
}
[data-bgcolor="#DE3F7F"] {
  background-color: #DE3F7F;
}
[data-bgcolor="#DE3F7F"]::after {
    background-color: #DE3F7F;
}
[data-bgcolor="#8D53CA"] {
  background-color: #8D53CA;
}
[data-bgcolor="#8D53CA"]::after {
    background-color: #8D53CA;
}

[data-color="#FFFFFF"] {
  color: #fff;
}
[data-color="#000000"] {
  color: #000;
}