/* =========================================================
   SongDrop Live Ranking – Full Width + Mobile Actions v1
   - Desktop: four compact utility cards above the full-width list
   - Mobile: Listen / Share / Report remain accessible under each track
   ========================================================= */

/* --- Desktop: full-width ranking, four subtle info cards above it --- */
@media (min-width: 1081px) {
    .sd-live-layout {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .sd-live-layout > .sd-live-ranking {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Let the existing side-card children become the four grid cards. */
    .sd-live-layout > .sd-sidebar-stack {
        display: contents !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card {
        grid-row: 1 !important;
        min-height: 188px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
        border: 1px solid rgba(117, 224, 255, .16) !important;
        border-radius: 20px !important;
        background:
            radial-gradient(circle at 100% 0, rgba(0, 217, 255, .08), transparent 46%),
            linear-gradient(145deg, rgba(8, 22, 40, .88), rgba(2, 10, 20, .88)) !important;
        box-shadow:
            inset 0 0 28px rgba(0, 217, 255, .025),
            0 12px 30px rgba(0, 0, 0, .12) !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card h3 {
        margin: 9px 0 9px !important;
        font-size: clamp(20px, 1.7vw, 27px) !important;
        line-height: 1.04 !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card p {
        margin: 0 !important;
        color: #a9c1ce !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card a,
    .sd-live-layout > .sd-sidebar-stack > .sd-side-card button {
        margin-top: 14px !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--help {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 12px !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--help img {
        width: 58px !important;
        height: 58px !important;
        object-fit: cover !important;
        border-radius: 16px !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--live-info {
        border-color: rgba(34, 255, 154, .20) !important;
        background:
            radial-gradient(circle at 100% 0, rgba(34, 255, 154, .10), transparent 48%),
            linear-gradient(145deg, rgba(6, 30, 35, .92), rgba(2, 12, 20, .90)) !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--live-info .sd-side-card__topline > span {
        color: var(--green) !important;
        text-shadow: 0 0 12px rgba(34, 255, 154, .7) !important;
    }
}

/* Tablet: keep the helper cards visible, but give the main ranking its own full row. */
@media (min-width: 721px) and (max-width: 1080px) {
    .sd-live-layout {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .sd-live-layout > .sd-live-ranking {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
    }

    .sd-live-layout > .sd-sidebar-stack {
        display: contents !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card {
        grid-row: 1 !important;
        margin: 0 !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card:nth-child(n + 3) {
        grid-row: 2 !important;
    }

    .sd-live-layout > .sd-live-ranking {
        grid-row: 3 !important;
    }
}

/* --- Mobile: preserve every action in a neat action bar under the waveform. --- */
@media (max-width: 640px) {
    .sd-live-ranking__panel--hud .sd-live-playlist > li {
        grid-template-columns: 54px minmax(0, 1fr) 58px !important;
        grid-template-areas:
            "rank song vote"
            "wave wave wave"
            "actions actions actions" !important;
        min-height: 148px !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .sd-live-ranking__panel--hud .sd-live-row-actions {
        grid-area: actions !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: 36px !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 1px !important;
    }

    .sd-live-ranking__panel--hud .listen-btn,
    .sd-live-ranking__panel--hud .share-btn,
    .sd-live-ranking__panel--hud .report-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 6px !important;
        border: 1px solid rgba(117, 224, 255, .16) !important;
        border-radius: 10px !important;
        color: #cfe7f2 !important;
        background: rgba(3, 15, 28, .84) !important;
        font-size: 9px !important;
        font-weight: 950 !important;
        letter-spacing: .05em !important;
        line-height: 1 !important;
        text-align: center !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .sd-live-ranking__panel--hud .listen-btn {
        border-color: rgba(0, 217, 255, .22) !important;
        color: #c8f5ff !important;
        background: rgba(0, 217, 255, .075) !important;
    }

    .sd-live-ranking__panel--hud .share-btn {
        border-color: rgba(34, 255, 154, .20) !important;
        color: #c8ffe5 !important;
        background: rgba(34, 255, 154, .065) !important;
    }

    .sd-live-ranking__panel--hud .report-btn {
        border-color: rgba(255, 75, 122, .22) !important;
        color: #ffd1df !important;
        background: rgba(255, 75, 122, .065) !important;
    }

    .sd-live-ranking__panel--hud .listen-btn.is-disabled,
    .sd-live-ranking__panel--hud .share-btn.is-disabled {
        opacity: .48 !important;
        pointer-events: none !important;
    }

    .sd-live-ranking__panel--hud .vote-btn {
        min-height: 48px !important;
        align-self: center !important;
    }

    .sd-live-ranking__panel--hud .sd-live-row-wave {
        min-height: 32px !important;
    }
}

@media (max-width: 390px) {
    .sd-live-ranking__panel--hud .listen-btn,
    .sd-live-ranking__panel--hud .share-btn,
    .sd-live-ranking__panel--hud .report-btn {
        font-size: 8px !important;
        letter-spacing: .025em !important;
    }
}

/* =========================================================
   SongDrop Live Ranking – Desktop Companion Rail v2
   Vier Karten bleiben über der Rangliste, aber deutlich kompakter,
   ruhiger und ohne die großen leeren Flächen der ersten Raster-Version.
   ========================================================= */
@media (min-width: 1081px) {
    .sd-live-layout {
        grid-template-columns: minmax(1.35fr, 1.35fr) minmax(1fr, 1fr) minmax(.92fr, .92fr) minmax(1.05fr, 1.05fr) !important;
        gap: 14px !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card {
        position: relative !important;
        min-height: 148px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        overflow: hidden !important;
        padding: 17px 18px !important;
        border-radius: 18px !important;
        background:
            radial-gradient(circle at 100% 0, rgba(0, 217, 255, .07), transparent 42%),
            linear-gradient(145deg, rgba(7, 20, 37, .92), rgba(2, 10, 20, .94)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            inset 0 0 24px rgba(0,217,255,.018),
            0 10px 26px rgba(0,0,0,.10) !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 0;
        height: 1px;
        opacity: .55;
        background: linear-gradient(90deg, transparent, rgba(0,217,255,.46), rgba(34,255,154,.32), transparent);
        pointer-events: none;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card h3 {
        max-width: calc(100% - 8px) !important;
        margin: 7px 0 6px !important;
        color: #effaff !important;
        font-size: clamp(18px, 1.55vw, 24px) !important;
        font-weight: 940 !important;
        letter-spacing: -.045em !important;
        line-height: 1.03 !important;
        text-wrap: balance;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card h3 span {
        color: var(--green) !important;
        text-shadow: 0 0 18px rgba(34,255,154,.12);
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card p {
        display: -webkit-box !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: #9cb6c4 !important;
        font-size: 12px !important;
        font-weight: 720 !important;
        line-height: 1.42 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card a:not(.sd-btn),
    .sd-live-layout > .sd-sidebar-stack > .sd-side-card button:not(.sd-btn) {
        width: fit-content !important;
        margin-top: auto !important;
        padding-top: 10px !important;
        color: #b9ebff !important;
        font-size: 10px !important;
        font-weight: 950 !important;
        letter-spacing: .08em !important;
        line-height: 1 !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card .eyebrow,
    .sd-live-layout > .sd-sidebar-stack > .sd-side-card__topline {
        margin: 0 !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card .eyebrow,
    .sd-live-layout > .sd-sidebar-stack > .sd-side-card__topline small {
        color: #89cce0 !important;
        font-size: 9px !important;
        font-weight: 950 !important;
        letter-spacing: .16em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    /* Creator Zone: CTA im Vordergrund, kein unnötiger großer Account-Block. */
    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--submit {
        border-color: rgba(34,255,154,.20) !important;
        background:
            radial-gradient(circle at 100% 100%, rgba(34,255,154,.10), transparent 48%),
            linear-gradient(145deg, rgba(6, 29, 37, .96), rgba(2, 10, 20, .95)) !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--submit .sd-user-status {
        display: none !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--submit .sd-btn {
        width: fit-content !important;
        min-height: 40px !important;
        margin-top: auto !important;
        padding: 0 16px !important;
        border-radius: 13px !important;
        font-size: 10px !important;
        letter-spacing: .10em !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--submit .sd-text-link {
        display: none !important;
    }

    /* Discord: das Symbol bleibt klein in der Ecke, die Inhalte bekommen Luft. */
    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--discord {
        padding-right: 52px !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--discord .sd-discord-orb {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: 30px !important;
        height: 30px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        opacity: .95;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--discord > .eyebrow {
        margin-top: 1px !important;
    }

    /* Hilfe: kleines, ordentliches Media-Card-Layout. */
    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--help {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        align-content: start !important;
        gap: 11px !important;
        padding: 17px !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--help img {
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        border: 1px solid rgba(0,217,255,.18) !important;
        object-fit: cover !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--help > div {
        min-width: 0 !important;
        display: grid !important;
        align-content: start !important;
        gap: 5px !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--help strong {
        color: #effaff !important;
        font-size: 15px !important;
        font-weight: 930 !important;
        letter-spacing: -.025em !important;
        line-height: 1.1 !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--help span {
        display: -webkit-box !important;
        overflow: hidden !important;
        color: #9cb6c4 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.38 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--help a {
        margin-top: 5px !important;
        color: var(--cyan) !important;
        font-size: 9px !important;
        font-weight: 950 !important;
        letter-spacing: .1em !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
    }

    /* Live Status: grün, aber deutlich ruhiger und nicht wie eine vierte Hero-Card. */
    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--live-info {
        border-color: rgba(34,255,154,.18) !important;
        background:
            radial-gradient(circle at 100% 0, rgba(34,255,154,.095), transparent 45%),
            linear-gradient(145deg, rgba(7, 29, 33, .94), rgba(2, 12, 20, .95)) !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--live-info .sd-side-card__topline > span {
        color: var(--green) !important;
        font-size: 12px !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--live-info h3 span {
        color: var(--green) !important;
    }
}

/* =========================================================
   Discord Card Hotfix V2.1
   Der bestehende Style setzt teilweise eine linke Position.
   Hier wird das Icon eindeutig rechts verankert, damit es
   weder Eyebrow noch Titel überdeckt.
   ========================================================= */
@media (min-width: 1081px) {
    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--discord {
        position: relative !important;
        padding-right: 58px !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--discord .sd-discord-orb {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 3 !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--discord > .eyebrow,
    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--discord > h3,
    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--discord > p,
    .sd-live-layout > .sd-sidebar-stack > .sd-side-card--discord > a {
        position: relative !important;
        z-index: 1 !important;
    }
}