/* ============================================================
   BACKGROUND CHILLROOM SERVER
   Version plus lumineuse
   ============================================================ */

html {
    min-height: 100% !important;
    background: #07030d !important;
}

/* ============================================================
   PORTAIL PRINCIPAL AVEC LES CARTES
   ============================================================ */

body.chillroom-portal-ready {
    position: relative !important;
    min-height: 100vh !important;

    background-image:
        linear-gradient(
            rgba(5, 2, 14, 0.10),
            rgba(7, 3, 18, 0.18)
        ),
        radial-gradient(
            circle at 50% 4%,
            rgba(93, 88, 255, 0.12),
            transparent 43%
        ),
        radial-gradient(
            circle at 12% 78%,
            rgba(196, 47, 255, 0.07),
            transparent 43%
        ),
        radial-gradient(
            circle at 88% 74%,
            rgba(26, 190, 255, 0.06),
            transparent 43%
        ),
        url("/images/Background_chillroom.png?v=1781233468317") !important;

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100% !important;

    background-position:
        center center,
        center center,
        center center,
        center center,
        center center !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-attachment:
        fixed,
        fixed,
        fixed,
        fixed,
        fixed !important;
}

/* ============================================================
   FENETRE BIENVENUE
   Même background avant l'entrée dans le portail
   ============================================================ */

body #chillroom-welcome-overlay {
    background-image:
        linear-gradient(
            rgba(5, 2, 14, 0.08),
            rgba(7, 3, 18, 0.16)
        ),
        radial-gradient(
            circle at 50% 12%,
            rgba(85, 88, 255, 0.14),
            transparent 40%
        ),
        radial-gradient(
            circle at 18% 78%,
            rgba(184, 47, 255, 0.08),
            transparent 42%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(30, 188, 255, 0.07),
            transparent 42%
        ),
        url("/images/Background_chillroom.png?v=1781233468317") !important;

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100% !important;

    background-position:
        center center,
        center center,
        center center,
        center center,
        center center !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-attachment:
        fixed,
        fixed,
        fixed,
        fixed,
        fixed !important;
}

/* Fenêtre de bienvenue plus transparente */
body #chillroom-welcome-card {
    background:
        linear-gradient(
            145deg,
            rgba(28, 19, 69, 0.74),
            rgba(10, 21, 53, 0.72)
        ) !important;

    border:
        1px solid
        rgba(164, 151, 255, 0.48) !important;

    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.39),
        0 0 32px rgba(109, 76, 255, 0.27),
        inset 0 0 24px rgba(255, 255, 255, 0.045) !important;

    backdrop-filter:
        blur(16px)
        saturate(1.14) !important;

    -webkit-backdrop-filter:
        blur(16px)
        saturate(1.14) !important;
}

/* ============================================================
   ENTETE DU PORTAIL
   ============================================================ */

body.chillroom-portal-ready
.chillroom-portal-header {
    background:
        linear-gradient(
            145deg,
            rgba(26, 18, 67, 0.76),
            rgba(10, 18, 48, 0.74)
        ) !important;

    border:
        1px solid
        rgba(155, 148, 255, 0.43) !important;

    backdrop-filter:
        blur(16px)
        saturate(1.16) !important;

    -webkit-backdrop-filter:
        blur(16px)
        saturate(1.16) !important;
}

/* ============================================================
   CARTES DES APPLICATIONS
   ============================================================ */

body.chillroom-portal-ready
.chillroom-app-card {
    background:
        linear-gradient(
            150deg,
            rgba(27, 19, 68, 0.73),
            rgba(8, 16, 43, 0.76)
        ) !important;

    border:
        1px solid
        rgba(149, 143, 255, 0.37) !important;

    backdrop-filter:
        blur(15px)
        saturate(1.14) !important;

    -webkit-backdrop-filter:
        blur(15px)
        saturate(1.14) !important;
}

body.chillroom-portal-ready
.chillroom-app-card:hover,
body.chillroom-portal-ready
.chillroom-app-card:focus-within {
    background:
        linear-gradient(
            150deg,
            rgba(38, 24, 88, 0.82),
            rgba(8, 23, 59, 0.83)
        ) !important;
}

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

@media (max-width: 760px) {
    body.chillroom-portal-ready,
    body #chillroom-welcome-overlay {
        background-position:
            center center,
            center center,
            center center,
            center center,
            center center !important;

        background-attachment:
            scroll,
            scroll,
            scroll,
            scroll,
            scroll !important;
    }

    body #chillroom-welcome-card {
        background:
            linear-gradient(
                145deg,
                rgba(28, 19, 69, 0.79),
                rgba(10, 21, 53, 0.77)
            ) !important;
    }
}

/* ============================================================
   BACKGROUND RESPONSIVE 16:9 / 9:16 / 32:9
   Force l'image a toucher les quatre coins de la fenetre.
   ============================================================ */

@media (orientation: portrait), (max-aspect-ratio: 1/1) {
    body.chillroom-portal-ready {
        background-image:
            linear-gradient(
                rgba(5, 2, 14, 0.10),
                rgba(7, 3, 18, 0.18)
            ),
            radial-gradient(
                circle at 50% 4%,
                rgba(93, 88, 255, 0.12),
                transparent 43%
            ),
            radial-gradient(
                circle at 12% 78%,
                rgba(196, 47, 255, 0.07),
                transparent 43%
            ),
            radial-gradient(
                circle at 88% 74%,
                rgba(26, 190, 255, 0.06),
                transparent 43%
            ),
            url("/images/Background_chillroom_9_16.png?v=1781235000001") !important;
    }

    body #chillroom-welcome-overlay {
        align-items: flex-start !important;
        justify-content: center !important;
        overflow-y: auto !important;
        padding-top: clamp(92px, 15svh, 128px) !important;
        padding-bottom: clamp(250px, 36svh, 360px) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    body #chillroom-welcome-card {
        width: min(92vw, 390px) !important;
        max-width: calc(100vw - 32px) !important;
        padding-top: clamp(22px, 5vw, 26px) !important;
        padding-bottom: clamp(22px, 5vw, 26px) !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
        box-sizing: border-box !important;
    }

    body #chillroom-welcome-badge {
        width: min(244px, 66vw) !important;
        height: clamp(82px, 30vw, 116px) !important;
        min-height: 82px !important;
        margin: 0 auto 10px !important;
        background: url("/images/site_logo_text_chillroom_welcome.png?v=1781241000001") center / contain no-repeat !important;
        overflow: visible !important;
    }

    body #chillroom-welcome-logo {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: contain !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }

    body #chillroom-welcome-title {
        margin-bottom: 8px !important;
        font-size: clamp(38px, 11vw, 48px) !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }

    body #chillroom-welcome-text {
        width: 100% !important;
        max-width: min(320px, 100%) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px !important;
        font-size: 13.5px !important;
        line-height: 1.45 !important;
        text-wrap: balance !important;
        box-sizing: border-box !important;
    }

    body #chillroom-enter-button {
        width: 100% !important;
        max-width: min(340px, calc(100vw - 76px)) !important;
        min-height: 50px !important;
        box-sizing: border-box !important;
    }

    body #chillroom-welcome-overlay {
        background-image:
            linear-gradient(
                rgba(5, 2, 14, 0.08),
                rgba(7, 3, 18, 0.16)
            ),
            radial-gradient(
                circle at 50% 12%,
                rgba(85, 88, 255, 0.14),
                transparent 40%
            ),
            radial-gradient(
                circle at 18% 78%,
                rgba(184, 47, 255, 0.08),
                transparent 42%
            ),
            radial-gradient(
                circle at 82% 72%,
                rgba(30, 188, 255, 0.07),
                transparent 42%
            ),
            url("/images/Background_chillroom_9_16.png?v=1781235000001") !important;
    }
}

@media (min-aspect-ratio: 3/1) {
    body.chillroom-portal-ready {
        background-image:
            linear-gradient(
                rgba(5, 2, 14, 0.10),
                rgba(7, 3, 18, 0.18)
            ),
            radial-gradient(
                circle at 50% 4%,
                rgba(93, 88, 255, 0.12),
                transparent 43%
            ),
            radial-gradient(
                circle at 12% 78%,
                rgba(196, 47, 255, 0.07),
                transparent 43%
            ),
            radial-gradient(
                circle at 88% 74%,
                rgba(26, 190, 255, 0.06),
                transparent 43%
            ),
            url("/images/Background_chillroom_32_9.png?v=1781235000004") !important;
    }

    body #chillroom-welcome-overlay {
        background-image:
            linear-gradient(
                rgba(5, 2, 14, 0.08),
                rgba(7, 3, 18, 0.16)
            ),
            radial-gradient(
                circle at 50% 12%,
                rgba(85, 88, 255, 0.14),
                transparent 40%
            ),
            radial-gradient(
                circle at 18% 78%,
                rgba(184, 47, 255, 0.08),
                transparent 42%
            ),
            radial-gradient(
                circle at 82% 72%,
                rgba(30, 188, 255, 0.07),
                transparent 42%
            ),
            url("/images/Background_chillroom_32_9.png?v=1781235000004") !important;
    }
}