/* ============================================================
   SHADOWSKINGS — SMALL MAP NOTIFICATION ICONS
   ============================================================ */

.sk-map-alert-hud {

    position: absolute;

    top: 14px;
    right: 18px;

    z-index: 20;

    display: flex;
    align-items: center;

    gap: 5px;

    padding: 4px;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-4px);

    pointer-events: none;

    border:
        1px solid
        rgba(120, 68, 205, 0.22);

    border-radius: 8px;

    background:
        rgba(6, 4, 11, 0.70);

    box-shadow:
        0 0 12px
        rgba(0, 0, 0, 0.60);

    backdrop-filter:
        blur(4px);

    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0.15s ease;
}


.sk-map-alert-hud.sk-map-alert-hud-visible {

    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);

    pointer-events: auto;
}


/* ============================================================
   ALERT BUTTON
   ============================================================ */

.sk-map-alert-button {

    position: relative;

    width: 40px;
    height: 40px;

    flex:
        0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(136, 78, 224, 0.28);

    border-radius: 6px;

    background:
        radial-gradient(
            circle at center,
            rgba(79, 39, 137, 0.18),
            rgba(4, 3, 8, 0.82)
        );

    cursor: pointer;

    pointer-events: auto;

    box-shadow:
        inset 0 0 8px
        rgba(91, 43, 150, 0.12);

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.sk-map-alert-button:hover {

    transform:
        translateY(-1px)
        scale(1.05);

    border-color:
        rgba(173, 109, 255, 0.65);

    box-shadow:
        inset 0 0 8px
        rgba(118, 57, 190, 0.18),
        0 0 11px
        rgba(123, 63, 217, 0.42);
}


/* ============================================================
   DEFAULT ICON ARTWORK

   Artwork is intentionally larger than the 40px button.
   The button crops the excess so the icon fills the frame.
   ============================================================ */

.sk-map-alert-button img {

    width: 46px;
    height: 46px;

    max-width: none;
    max-height: none;

    flex-shrink: 0;

    display: block;

    object-fit: contain;

    pointer-events: none;

    transform:
        scale(1.16);

    transform-origin:
        center center;

    filter:
        drop-shadow(
            0 0 4px
            rgba(145, 74, 235, 0.50)
        );

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}


/* ============================================================
   CHAT / ENVELOPE ICON

   Slightly larger because the source image has more internal
   empty space than the other notification artwork.
   ============================================================ */

#sk-chat-alert img {

    width: 50px;
    height: 50px;

    transform:
        scale(1.20);
}


/* ============================================================
   ATTACK ICON
   ============================================================ */

#sk-attack-alert img {

    width: 46px;
    height: 46px;

    transform:
        scale(1.16);
}


/* ============================================================
   ACTIVE NOTIFICATION
   ============================================================ */

.sk-map-alert-button.active {

    border-color:
        rgba(171, 105, 255, 0.68);

    box-shadow:
        inset 0 0 8px
        rgba(123, 63, 217, 0.18),
        0 0 11px
        rgba(125, 63, 220, 0.42);
}


/* ============================================================
   CHAT / ENVELOPE ACTIVE PULSE
   ============================================================ */

#sk-chat-alert.active img {

    animation:
        skChatPulse
        1.15s
        ease-in-out
        infinite;
}


/* ============================================================
   ATTACK ACTIVE PULSE
   ============================================================ */

#sk-attack-alert.danger {

    animation:
        skAttackPulse
        0.85s
        ease-in-out
        infinite;
}


/* ============================================================
   NOTIFICATION BADGES
   ============================================================ */

.sk-map-alert-badge {

    position: absolute;

    top: -1px;
    right: -1px;

    z-index: 3;

    min-width: 16px;
    height: 16px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        0 4px;

    border:
        1px solid
        rgba(237, 208, 255, 0.90);

    border-radius:
        999px;

    background:
        #7616b0;

    color:
        #ffffff;

    font-size:
        8px;

    font-weight:
        900;

    line-height:
        1;

    box-shadow:
        0 0 7px
        rgba(182, 67, 255, 0.75);

    pointer-events:
        none;
}


.sk-map-alert-badge.hidden {

    display: none;
}


/* ============================================================
   CHAT PULSE
   ============================================================ */

@keyframes skChatPulse {

    0%,
    100% {

        transform:
            scale(1.20);

        filter:
            drop-shadow(
                0 0 5px
                rgba(145, 74, 235, 0.55)
            );
    }


    50% {

        transform:
            scale(1.30);

        filter:
            drop-shadow(
                0 0 12px
                rgba(185, 96, 255, 0.95)
            );
    }
}


/* ============================================================
   ATTACK PULSE
   ============================================================ */

@keyframes skAttackPulse {

    0%,
    100% {

        border-color:
            rgba(151, 73, 220, 0.40);

        box-shadow:
            0 0 6px
            rgba(150, 50, 230, 0.32);
    }


    50% {

        border-color:
            rgba(211, 105, 255, 0.80);

        box-shadow:
            0 0 17px
            rgba(204, 72, 255, 0.80);
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (
    max-width: 760px
) {

    .sk-map-alert-hud {

        top: 8px;
        right: 8px;

        gap: 3px;

        padding: 3px;
    }


    .sk-map-alert-button {

        width: 34px;
        height: 34px;

        flex:
            0 0 34px;
    }


    .sk-map-alert-button img {

        width: 40px;
        height: 40px;

        transform:
            scale(1.14);
    }


    #sk-chat-alert img {

        width: 44px;
        height: 44px;

        transform:
            scale(1.18);
    }


    #sk-attack-alert img {

        width: 40px;
        height: 40px;

        transform:
            scale(1.14);
    }


    .sk-map-alert-badge {

        min-width: 14px;
        height: 14px;

        padding:
            0 3px;

        font-size:
            7px;
    }


    @keyframes skChatPulse {

        0%,
        100% {

            transform:
                scale(1.18);

            filter:
                drop-shadow(
                    0 0 4px
                    rgba(145, 74, 235, 0.55)
                );
        }


        50% {

            transform:
                scale(1.28);

            filter:
                drop-shadow(
                    0 0 10px
                    rgba(185, 96, 255, 0.95)
                );
        }
    }
}