/* ============================================================
   CHILL ROOM SERVER
   Portail horizontal des applications
   ============================================================ */

body.chillroom-portal-ready {
    display: block !important;

    min-height: 100vh !important;
    padding:
        clamp(38px, 6vh, 76px)
        clamp(18px, 4vw, 58px)
        60px !important;

    box-sizing: border-box !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(61, 76, 214, 0.62),
            transparent 38%
        ),
        radial-gradient(
            circle at 14% 76%,
            rgba(138, 38, 235, 0.20),
            transparent 42%
        ),
        radial-gradient(
            circle at 86% 76%,
            rgba(25, 154, 255, 0.16),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #080313,
            #130625 54%,
            #040109
        ) !important;
}

/* Retire l'ancienne grande fenêtre unique */
main.card.chillroom-portal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 1320px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    text-align: center !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ============================================================
   EN-TÊTE INDÉPENDANT
   ============================================================ */

.chillroom-portal-header {
    position: relative !important;

    width: min(720px, calc(100vw - 38px)) !important;
    margin: 0 auto clamp(28px, 5vh, 52px) !important;
    padding: 28px 36px 27px !important;

    box-sizing: border-box !important;

    border:
        1px solid
        rgba(145, 138, 255, 0.38) !important;

    border-radius: 24px !important;

    background:
        linear-gradient(
            145deg,
            rgba(31, 24, 79, 0.85),
            rgba(13, 20, 53, 0.82)
        ) !important;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.42),
        0 0 28px rgba(111, 72, 255, 0.19),
        inset 0 0 24px rgba(255, 255, 255, 0.025) !important;

    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;

    overflow: hidden !important;
}

.chillroom-portal-header::before {
    content: "" !important;

    position: absolute !important;
    left: 18% !important;
    right: 18% !important;
    top: 0 !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(150, 102, 255, 0.88),
            rgba(42, 174, 255, 0.72),
            transparent
        ) !important;

    box-shadow:
        0 0 16px rgba(112, 90, 255, 0.75) !important;
}

.chillroom-portal-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    margin-bottom: 12px !important;
    padding: 6px 13px !important;

    border:
        1px solid
        rgba(149, 121, 255, 0.38) !important;

    border-radius: 999px !important;

    background:
        rgba(102, 72, 205, 0.12) !important;

    color:
        rgba(226, 221, 255, 0.82) !important;

    font-family:
        Segoe UI,
        Arial,
        sans-serif !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    letter-spacing: 0.17em !important;
    text-transform: uppercase !important;
}

.chillroom-portal-badge::before {
    content: "" !important;

    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;

    background: #4ed7ff !important;

    box-shadow:
        0 0 8px #4ed7ff,
        0 0 14px rgba(115, 75, 255, 0.72) !important;
}

.chillroom-portal-title {
    margin: 0 0 8px !important;

    color: #ffffff !important;

    font-family:
        Segoe UI,
        Arial,
        sans-serif !important;

    font-size:
        clamp(34px, 5vw, 52px) !important;

    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;

    text-shadow:
        0 0 15px rgba(135, 91, 255, 0.44),
        0 0 29px rgba(42, 152, 255, 0.20) !important;
}

.chillroom-portal-description {
    max-width: 540px !important;
    margin: 0 auto !important;

    color:
        rgba(214, 208, 255, 0.74) !important;

    font-family:
        Segoe UI,
        Arial,
        sans-serif !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* ============================================================
   GRILLE HORIZONTALE
   ============================================================ */

.chillroom-app-grid {
    display: grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 340px)
        ) !important;

    justify-content: center !important;
    align-items: stretch !important;

    gap:
        clamp(20px, 2.6vw, 32px) !important;

    width: min(1260px, 96vw) !important;
    margin: 0 auto !important;
}

/* ============================================================
   CARTE INDIVIDUELLE D'APPLICATION
   ============================================================ */

.chillroom-app-card {
    position: relative !important;
    isolation: isolate !important;

    display: flex !important;
    flex-direction: column !important;

    min-height: 285px !important;

    padding: 18px 18px 21px !important;
    box-sizing: border-box !important;

    border:
        1px solid
        rgba(142, 136, 255, 0.31) !important;

    border-radius: 24px !important;

    background:
        linear-gradient(
            150deg,
            rgba(31, 23, 73, 0.83),
            rgba(10, 18, 48, 0.85)
        ) !important;

    box-shadow:
        0 22px 62px rgba(0, 0, 0, 0.38),
        0 0 20px rgba(94, 61, 221, 0.13),
        inset 0 0 22px rgba(255, 255, 255, 0.022) !important;

    overflow: visible !important;
    cursor: pointer !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease !important;
}

.chillroom-app-card::before {
    content: "" !important;

    position: absolute !important;
    inset: -1px !important;
    z-index: -1 !important;

    border-radius: inherit !important;

    background:
        linear-gradient(
            135deg,
            rgba(158, 87, 255, 0.18),
            transparent 40%,
            rgba(28, 167, 255, 0.14)
        ) !important;

    opacity: 0 !important;

    transition:
        opacity 0.22s ease !important;
}

.chillroom-app-card:hover,
.chillroom-app-card:focus-within {
    transform:
        translateY(-7px)
        scale(1.018) !important;

    border-color:
        rgba(157, 119, 255, 0.59) !important;

    background:
        linear-gradient(
            150deg,
            rgba(40, 26, 91, 0.91),
            rgba(10, 24, 61, 0.91)
        ) !important;

    box-shadow:
        0 29px 78px rgba(0, 0, 0, 0.47),
        0 0 28px rgba(125, 66, 255, 0.28),
        0 0 45px rgba(28, 148, 255, 0.14),
        inset 0 0 25px rgba(255, 255, 255, 0.035) !important;
}

.chillroom-app-card:hover::before,
.chillroom-app-card:focus-within::before {
    opacity: 1 !important;
}

/* Lien visuel de l'application */
.chillroom-app-link {
    position: relative !important;

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

    width: 100% !important;
    height: 174px !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 18px !important;

    background:
        radial-gradient(
            circle at center,
            rgba(93, 58, 198, 0.14),
            rgba(7, 9, 27, 0.18) 68%,
            transparent
        ) !important;

    box-shadow:
        inset 0 0 22px rgba(255, 255, 255, 0.015) !important;

    color: #ffffff !important;
    text-decoration: none !important;

    overflow: visible !important;
}

.chillroom-app-link:hover {
    filter: none !important;
}

/* ============================================================
   MÉTADONNÉES
   ============================================================ */

.chillroom-app-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    margin-top: 13px !important;
    padding: 0 7px !important;
}

.chillroom-app-name {
    margin: 0 0 6px !important;

    color: #ffffff !important;

    font-family:
        Segoe UI,
        Arial,
        sans-serif !important;

    font-size: 19px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;

    letter-spacing: -0.025em !important;
}

.chillroom-app-summary {
    margin: 0 !important;

    color:
        rgba(211, 206, 255, 0.67) !important;

    font-family:
        Segoe UI,
        Arial,
        sans-serif !important;

    font-size: 12px !important;
    line-height: 1.45 !important;
}

/* ============================================================
   VISUEL SOUNDBOARD
   ============================================================ */

.chillroom-soundboard-logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

.chillroom-soundboard-icon {
    display: block !important;

    width: 104px !important;
    height: 104px !important;

    overflow: visible !important;

    filter:
        drop-shadow(
            0 0 12px
            rgba(93, 95, 255, 0.65)
        )
        drop-shadow(
            0 0 25px
            rgba(201, 66, 255, 0.36)
        ) !important;

    transition:
        transform 0.22s ease,
        filter 0.22s ease !important;
}

.chillroom-app-card:hover
.chillroom-soundboard-icon {
    transform:
        translateY(-3px)
        scale(1.07) !important;

    filter:
        drop-shadow(
            0 0 16px
            rgba(102, 112, 255, 0.82)
        )
        drop-shadow(
            0 0 32px
            rgba(222, 64, 255, 0.54)
        )
        drop-shadow(
            0 0 40px
            rgba(41, 190, 255, 0.22)
        ) !important;
}

.chillroom-soundboard-wordmark {
    color: #ffffff !important;

    font-family:
        Segoe UI,
        Arial,
        sans-serif !important;

    font-size: 16px !important;
    font-weight: 900 !important;

    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;

    text-shadow:
        0 0 12px
        rgba(163, 93, 255, 0.59) !important;
}

/* ============================================================
   LOGO DJ
   ============================================================ */

.chillroom-app-card
.chillroom-dj-logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 174px !important;

    padding: 0 !important;
}

.chillroom-app-card
.chillroom-dj-logo-button {
    width: min(92%, 310px) !important;
    max-width: 310px !important;
    height: auto !important;
}

.chillroom-app-card
.dj-preview-glitch-layer {
    width: min(92%, 310px) !important;
    max-width: 310px !important;
}

.chillroom-app-fallback-logo {
    color: #ffffff !important;

    font-family:
        Segoe UI,
        Arial,
        sans-serif !important;

    font-size: 27px !important;
    font-weight: 950 !important;

    letter-spacing: -0.045em !important;

    text-shadow:
        0 0 12px rgba(152, 82, 255, 0.71),
        0 0 25px rgba(33, 164, 255, 0.36) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (min-width: 1180px) {
    .chillroom-app-grid {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(290px, 340px)
            ) !important;
    }
}

@media (max-width: 760px) {
    body.chillroom-portal-ready {
        padding:
            28px
            14px
            42px !important;
    }

    .chillroom-portal-header {
        margin-bottom: 24px !important;
        padding: 24px 20px 23px !important;
    }

    .chillroom-portal-title {
        font-size: 36px !important;
    }

    .chillroom-app-grid {
        grid-template-columns:
            minmax(0, 360px) !important;

        width: 100% !important;
        gap: 19px !important;
    }

    .chillroom-app-card {
        min-height: 270px !important;
    }
}