/* Member Leaderboard avatar LED marquee — same rules, per-element category colors */

@keyframes avatarGlowBreathe {
    0%,
    100% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--glow-color) 45%, transparent),
            0 0 6px 1px color-mix(in srgb, var(--glow-color) 45%, transparent),
            0 0 14px 3px color-mix(in srgb, var(--glow-color) 22%, transparent),
            inset 0 0 10px 1px color-mix(in srgb, var(--glow-color) 30%, transparent);
        filter: brightness(1.03) saturate(1.05);
    }
    50% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--glow-color) 65%, #fff 15%),
            0 0 10px 2px color-mix(in srgb, var(--glow-color) 55%, transparent),
            0 0 20px 5px color-mix(in srgb, var(--glow-color) 28%, transparent),
            inset 0 0 14px 2px color-mix(in srgb, var(--glow-color) 40%, transparent);
        filter: brightness(1.08) saturate(1.1);
    }
}

@keyframes avatarGlowBreatheLegacy {
    0%,
    100% {
        box-shadow:
            0 0 0 1px var(--glow-legacy-edge),
            0 0 6px 1px var(--glow-legacy-mid),
            0 0 14px 3px var(--glow-legacy-outer),
            inset 0 0 10px 1px var(--glow-legacy-in);
        filter: brightness(1.03) saturate(1.05);
    }
    50% {
        box-shadow:
            0 0 0 1px var(--glow-legacy-edge2),
            0 0 10px 2px var(--glow-legacy-mid2),
            0 0 20px 5px var(--glow-legacy-outer),
            inset 0 0 14px 2px var(--glow-legacy-in3);
        filter: brightness(1.08) saturate(1.1);
    }
}

@keyframes avatarBulbChase {
    to {
        background-position: 8px 0, -8px 0;
    }
}

@keyframes avatarBulbFlicker {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.9; filter: brightness(1.1); }
}

.element:not(.empty):not(.la-marker):not(.ac-marker) .element-led-ring {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 14px;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
    border: 3px solid var(--glow-color);
    background: transparent !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}


.element:not(.empty):not(.la-marker):not(.ac-marker) .element-led-ring::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 16px;
    z-index: -1;
    padding: 5px;
    box-sizing: border-box;
    background:
        radial-gradient(
            circle at center,
            #ffffff 0 0.8px,
            var(--glow-bulb) 0.8px 1.6px,
            var(--glow-color) 1.6px 2.2px,
            transparent 2.6px
        ) 0 0 / 8px 8px,
        radial-gradient(
            circle at center,
            #ffffff 0 0.6px,
            var(--glow-bulb) 0.6px 1.3px,
            transparent 2px
        ) 4px 4px / 8px 8px;
    filter:
        drop-shadow(0 0 1px var(--glow-bulb))
        drop-shadow(0 0 1.5px var(--glow-color));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation:
        avatarBulbChase 0.8s steps(8) infinite,
        avatarBulbFlicker 1.4s ease-in-out infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.element:not(.empty):not(.la-marker):not(.ac-marker):is(:hover, .el-hovered):not(.dimmed) .element-led-ring {
    opacity: 1;
    visibility: visible;
}

@supports not (color: color-mix(in srgb, white 50%, black)) {
    .element:not(.empty):not(.la-marker):not(.ac-marker):is(:hover, .el-hovered):not(.dimmed) .element-led-ring {
        animation: avatarGlowBreatheLegacy 2.2s ease-in-out infinite;
    }
}

@supports (color: color-mix(in srgb, white 50%, black)) {
    .element:not(.empty):not(.la-marker):not(.ac-marker):is(:hover, .el-hovered):not(.dimmed) .element-led-ring {
        animation: avatarGlowBreathe 2.2s ease-in-out infinite;
    }
}

.element:not(.empty):not(.la-marker):not(.ac-marker):is(:hover, .el-hovered):not(.dimmed) {
    z-index: 15;
    transform: translateY(-4px) scale(1.05);
}

@media (max-width: 599px) {
    .element:not(.empty):not(.la-marker):not(.ac-marker):is(:hover, .el-hovered):not(.dimmed) {
        transform: translateY(-2px) scale(1.02);
    }

    .element:not(.empty):not(.la-marker):not(.ac-marker) .element-led-ring {
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
    }
}

/* Category → LED colors (matches element tile palette) */
.element.alkali-metal {
    --glow-color: #ff6b6b;
    --glow-bulb: #ffd0d0;
    --glow-legacy-edge: rgba(255, 107, 107, 0.65);
    --glow-legacy-mid: rgba(255, 120, 120, 0.6);
    --glow-legacy-mid2: rgba(255, 180, 180, 0.75);
    --glow-legacy-outer: rgba(255, 100, 100, 0.4);
    --glow-legacy-in: rgba(255, 120, 120, 0.4);
    --glow-legacy-in3: rgba(255, 200, 200, 0.5);
    --glow-legacy-edge2: rgba(255, 200, 200, 0.8);
}

.element.alkaline-earth {
    --glow-color: #feca57;
    --glow-bulb: #fff0c2;
    --glow-legacy-edge: rgba(254, 202, 87, 0.7);
    --glow-legacy-mid: rgba(254, 202, 87, 0.6);
    --glow-legacy-mid2: rgba(255, 230, 160, 0.78);
    --glow-legacy-outer: rgba(254, 190, 70, 0.4);
    --glow-legacy-in: rgba(254, 202, 87, 0.4);
    --glow-legacy-in3: rgba(255, 235, 180, 0.5);
    --glow-legacy-edge2: rgba(255, 240, 200, 0.88);
}

.element.transition-metal {
    --glow-color: #48dbfb;
    --glow-bulb: #c8f4ff;
    --glow-legacy-edge: rgba(72, 219, 251, 0.7);
    --glow-legacy-mid: rgba(72, 219, 251, 0.6);
    --glow-legacy-mid2: rgba(160, 235, 255, 0.78);
    --glow-legacy-outer: rgba(72, 200, 240, 0.4);
    --glow-legacy-in: rgba(72, 219, 251, 0.42);
    --glow-legacy-in3: rgba(180, 240, 255, 0.5);
    --glow-legacy-edge2: rgba(200, 245, 255, 0.9);
}

.element.post-transition {
    --glow-color: #1dd1a1;
    --glow-bulb: #9af5dc;
    --glow-legacy-edge: rgba(29, 209, 161, 0.7);
    --glow-legacy-mid: rgba(29, 209, 161, 0.6);
    --glow-legacy-mid2: rgba(120, 240, 210, 0.78);
    --glow-legacy-outer: rgba(29, 190, 150, 0.4);
    --glow-legacy-in: rgba(29, 209, 161, 0.42);
    --glow-legacy-in3: rgba(150, 255, 220, 0.48);
    --glow-legacy-edge2: rgba(180, 255, 230, 0.85);
}

.element.metalloid {
    --glow-color: #5f27cd;
    --glow-bulb: #d4b8ff;
    --glow-legacy-edge: rgba(95, 39, 205, 0.75);
    --glow-legacy-mid: rgba(110, 60, 200, 0.65);
    --glow-legacy-mid2: rgba(170, 130, 255, 0.78);
    --glow-legacy-outer: rgba(95, 39, 205, 0.4);
    --glow-legacy-in: rgba(130, 80, 210, 0.4);
    --glow-legacy-in3: rgba(200, 170, 255, 0.5);
    --glow-legacy-edge2: rgba(220, 200, 255, 0.9);
}

.element.nonmetal {
    --glow-color: #ff9ff3;
    --glow-bulb: #ffe0fa;
    --glow-legacy-edge: rgba(255, 159, 243, 0.7);
    --glow-legacy-mid: rgba(255, 159, 243, 0.6);
    --glow-legacy-mid2: rgba(255, 210, 250, 0.78);
    --glow-legacy-outer: rgba(255, 140, 230, 0.4);
    --glow-legacy-in: rgba(255, 159, 243, 0.42);
    --glow-legacy-in3: rgba(255, 220, 250, 0.5);
    --glow-legacy-edge2: rgba(255, 230, 252, 0.9);
}

.element.halogen {
    --glow-color: #54a0ff;
    --glow-bulb: #cce4ff;
    --glow-legacy-edge: rgba(84, 160, 255, 0.7);
    --glow-legacy-mid: rgba(84, 160, 255, 0.6);
    --glow-legacy-mid2: rgba(170, 210, 255, 0.78);
    --glow-legacy-outer: rgba(84, 150, 240, 0.4);
    --glow-legacy-in: rgba(84, 160, 255, 0.42);
    --glow-legacy-in3: rgba(200, 225, 255, 0.5);
    --glow-legacy-edge2: rgba(220, 235, 255, 0.9);
}

.element.noble-gas {
    --glow-color: #8eb4c9;
    --glow-bulb: #eef3f8;
    --glow-legacy-edge: rgba(142, 180, 201, 0.75);
    --glow-legacy-mid: rgba(160, 200, 220, 0.65);
    --glow-legacy-mid2: rgba(220, 235, 245, 0.85);
    --glow-legacy-outer: rgba(142, 180, 201, 0.4);
    --glow-legacy-in: rgba(200, 220, 235, 0.45);
    --glow-legacy-in3: rgba(235, 245, 252, 0.55);
    --glow-legacy-edge2: rgba(245, 250, 255, 0.95);
}

.element.lanthanide {
    --glow-color: #ff9f43;
    --glow-bulb: #ffe0b8;
    --glow-legacy-edge: rgba(255, 159, 67, 0.7);
    --glow-legacy-mid: rgba(255, 159, 67, 0.6);
    --glow-legacy-mid2: rgba(255, 200, 140, 0.78);
    --glow-legacy-outer: rgba(255, 150, 50, 0.4);
    --glow-legacy-in: rgba(255, 159, 67, 0.42);
    --glow-legacy-in3: rgba(255, 220, 180, 0.5);
    --glow-legacy-edge2: rgba(255, 235, 210, 0.9);
}

.element.actinide {
    --glow-color: #ee5a24;
    --glow-bulb: #ffc9a8;
    --glow-legacy-edge: rgba(238, 90, 36, 0.7);
    --glow-legacy-mid: rgba(238, 90, 36, 0.6);
    --glow-legacy-mid2: rgba(255, 160, 120, 0.78);
    --glow-legacy-outer: rgba(238, 90, 36, 0.4);
    --glow-legacy-in: rgba(238, 120, 70, 0.42);
    --glow-legacy-in3: rgba(255, 200, 170, 0.5);
    --glow-legacy-edge2: rgba(255, 220, 200, 0.9);
}