/* Nerd-Pastell Soundtrack Shortcode */

.npssc-soundtrack {
    position: relative;
    overflow: hidden;

    margin: 34px 0;
    padding: 18px;

    border: 2px solid #d8c8f3;
    border-radius: 22px;

    background:
        radial-gradient(circle at 18% 20%, rgba(255, 120, 173, 0.18), transparent 26%),
        radial-gradient(circle at 82% 30%, rgba(111, 220, 207, 0.16), transparent 24%),
        linear-gradient(180deg, #fffafe 0%, #fff7fb 100%);

    box-shadow: 0 16px 38px rgba(100, 78, 160, 0.12);
}

.npssc-soundtrack::before {
    position: absolute;
    inset: 12px;

    content: "";

    border-radius: 18px;

    background-image:
        radial-gradient(circle, rgba(255, 209, 102, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 120, 173, 0.36) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(111, 220, 207, 0.38) 0 1px, transparent 2px);

    background-size: 68px 68px, 94px 94px, 120px 120px;
    background-position: 10px 12px, 32px 48px, 70px 20px;

    opacity: 0.45;

    pointer-events: none;
}

.npssc-layout,
.npssc-sparkle {
    position: relative;
    z-index: 1;
}

.npssc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 18px;
    align-items: center;
}

.npssc-left {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.npssc-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.npssc-note {
    color: #ff78ad;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
}

.npssc-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 0 18px;

    color: #fff;

    font-family: "Nunito", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;

    border: 2px solid #ffb8d4;
    border-radius: 999px;

    background: #ff78ad;

    box-shadow: 0 10px 20px rgba(255, 120, 173, 0.20);

    cursor: pointer;
}

.npssc-play:hover {
    transform: translateY(-1px);
}

.npssc-song {
    min-width: 0;

    color: #2f2a60;

    font-family: "Nunito", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}

.npssc-separator {
    color: #b7a8dd;
    font-weight: 900;
}

.npssc-youtube-link {
    color: #ff78ad;

    font-family: "Nunito", system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
}

.npssc-youtube-link:hover {
    color: #a98be8;
}

.npssc-hint {
    display: block;

    color: #9a94b8;

    font-family: "Nunito", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
}

.npssc-mini-wrap {
    overflow: hidden;

    width: 150px;
    height: 84px;

    border: 2px solid #d8c8f3;
    border-radius: 14px;

    background: #fff;

    box-shadow: 0 10px 22px rgba(100, 78, 160, 0.12);
}

.npssc-mini-player {
    display: block;

    width: 150px;
    height: 84px;

    border: 0;

    background: #fff;

    filter: saturate(0.82) brightness(0.92);
}

.npssc-sparkle {
    position: absolute;

    font-size: 1.05rem;
    line-height: 1;

    pointer-events: none;

    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

.npssc-sparkle-1 {
    top: 14px;
    left: 22px;
    color: #ffd166;
}

.npssc-sparkle-2 {
    right: 28px;
    bottom: 18px;
    color: #ff8fc0;
}

@media (max-width: 760px) {
    .npssc-soundtrack {
        display: none;
    }
}

@media (max-width: 980px) {
    .npssc-layout {
        grid-template-columns: 1fr;
    }

    .npssc-mini-wrap {
        justify-self: start;
    }
}