/* =====================================================
   RALKERIE MAIN
===================================================== */


/* =====================================================
   LIVE CONTENT
===================================================== */

.live-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 24px;

    width: 100%;

}


/* =====================================================
   USERNAME PNG
===================================================== */

.username-png {

    display: block;

    width: 520px;

    max-width: 85vw;

    height: auto;

    object-fit: contain;

    image-rendering: pixelated;

    user-select: none;

    pointer-events: none;

}


/* =====================================================
   DISCORD CONTAINER
===================================================== */

.discord-card-container {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    max-width: 100%;

    flex-shrink: 0;

}


/* =====================================================
   WAVEFORM WRAPPER

   IMPORTANT:
   This is the SAME width as the Discord card.
===================================================== */

.waveform-wrapper {

    position: relative;

    width: 340px;

    max-width: 90vw;

    flex-shrink: 0;

    z-index: 20;

}


/* =====================================================
   DISCORD CARD
===================================================== */

.discord-live-card {

    position: relative;

    width: 100%;

    box-sizing: border-box;

    padding: 14px;

    background: rgba(
        5,
        5,
        5,
        0.92
    );

    border: 2px solid #ffffff;

    box-shadow:
        6px 6px 0 #000000;

    z-index: 10;

}


/* =====================================================
   DISCORD PROFILE
===================================================== */

.discord-profile {

    display: flex;

    align-items: center;

    gap: 12px;

}


.discord-avatar {

    width: 62px;

    height: 62px;

    object-fit: cover;

    image-rendering: pixelated;

    border:
        2px solid #ffffff;

}


.discord-name {

    font-size: 24px;

    color: #ffffff;

}


.discord-status {

    margin-top: 4px;

    font-size: 13px;

}


.status-online {
    color: #7cff7c;
}


.status-idle {
    color: #ffd65c;
}


.status-dnd {
    color: #ff6666;
}


.status-offline {
    color: #888888;
}


/* =====================================================
   GAME ACTIVITY
===================================================== */

.discord-activity {

    margin-top: 16px;

    padding-top: 12px;

    border-top:
        2px solid #222222;

}


.discord-activity-title {

    font-size: 12px;

    color: #ff72cf;

    letter-spacing: 2px;

}


.discord-activity-text {

    margin-top: 4px;

    font-size: 19px;

    color: #ffffff;

}


/* =====================================================
   SPOTIFY
===================================================== */

.discord-spotify {

    margin-top: 14px;

    padding-top: 12px;

    border-top:
        2px solid #222222;

}


.discord-section-label {

    font-size: 12px;

    color: #ff72cf;

    letter-spacing: 2px;

}


.spotify-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 8px;

}


.spotify-art {

    width: 48px;

    height: 48px;

    object-fit: cover;

    image-rendering: pixelated;

}


.spotify-song {

    font-size: 16px;

    color: #ffffff;

}


.spotify-artist {

    margin-top: 2px;

    font-size: 13px;

    color: #aaaaaa;

}


/* =====================================================
   CLOCK
===================================================== */

.local-clock {

    margin-top: 16px;

    padding-top: 12px;

    border-top:
        2px solid #222222;

    text-align: center;

}


.clock-time {

    font-size: 27px;

    line-height: 1;

    color: #ffffff;

    text-shadow:
        2px 2px 0 #000000;

}


.clock-label {

    margin-top: 5px;

    font-size: 11px;

    letter-spacing: 2px;

    color: #ff72cf;

}


/* =====================================================
   GENERAL PANELS
===================================================== */

.pixel-panel {

    position: relative;

    width:
        min(
            700px,
            85vw
        );

    padding: 35px;

    background:
        rgba(
            0,
            0,
            0,
            0.82
        );

    border:
        2px solid #ffffff;

    box-shadow:
        6px 6px 0 #000000;

    text-align: center;

}


.pixel-label {

    margin:
        0 0 8px;

    font-size: 18px;

    color: #aaaaaa;

}


.pixel-panel h1 {

    margin:
        0 0 15px;

    font-size:
        clamp(
            36px,
            5vw,
            64px
        );

    font-weight: normal;

    color: #ffffff;

    text-shadow:
        3px 3px 0 #000000;

}


.pixel-description {

    margin: 0;

    color: #bdbdbd;

    font-size: 18px;

    line-height: 1.5;

}


/* =====================================================
   MUSIC
===================================================== */

.music-card {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 25px;

    padding: 12px;

    background: #080808;

    border:
        1px solid #333333;

    text-align: left;

}


.music-cover {

    width: 55px;

    height: 55px;

    flex-shrink: 0;

    background: #151515;

    border:
        1px solid #444444;

}


.music-info {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.music-info strong {

    color: #ffffff;

    font-size: 17px;

}


.music-info span {

    color: #888888;

    font-size: 15px;

}


/* =====================================================
   LINKS
===================================================== */

.link-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 8px;

    margin-top: 25px;

}


.pixel-link {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 45px;

    background: #050505;

    border:
        1px solid #333333;

    color: #ffffff;

    text-decoration: none;

    font-size: 18px;

}


.pixel-link:hover {

    background: #171717;

    border-color: #ffffff;

}


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

@media (max-width: 700px) {

    .live-content {

        gap: 20px;

    }


    .username-png {

        width: 390px;

        max-width: 88vw;

    }


    .waveform-wrapper {

        width: 340px;

        max-width: 88vw;

    }


    .discord-live-card {

        padding: 14px;

    }


    .discord-avatar {

        width: 55px;

        height: 55px;

    }


    .discord-name {

        font-size: 21px;

    }


    .pixel-panel {

        width: 92vw;

        padding:
            25px
            18px;

    }


    .link-grid {

        grid-template-columns:
            1fr;

    }

}
/* =====================================================
   RALKERIE — EYE OF CTHULHU HIT EFFECT
===================================================== */

.eoc-hit-burst {

    position: fixed;

    left: 0;
    top: 0;

    width: 1px;
    height: 1px;

    pointer-events: none;

    z-index: 99999;
}


.eoc-hit-particle {

    position: absolute;

    left: 0;
    top: 0;

    display: block;

    width: 6px;
    height: 6px;

    background: #ff3b81;

    border: 1px solid #ffb3d1;

    box-shadow:
        0 0 4px #ffffff,
        0 0 10px #ff3b81,
        0 0 18px rgba(255, 59, 129, 0.8);

    image-rendering: pixelated;

    transform:
        translate(-50%, -50%)
        scale(1);

    animation:
        eoc-particle-burst
        650ms
        cubic-bezier(
            0.15,
            0.8,
            0.25,
            1
        )
        forwards;
}


@keyframes eoc-particle-burst {

    0% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.3);
    }


    25% {

        opacity: 1;

        transform:
            translate(
                calc(-50% + var(--dx) * 0.35),
                calc(-50% + var(--dy) * 0.35)
            )
            scale(1);
    }


    100% {

        opacity: 0;

        transform:
            translate(
                calc(-50% + var(--dx)),
                calc(-50% + var(--dy))
            )
            scale(0.1);
    }
}