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

html,
body {
    min-height: 100% !important;
    min-height: 100svh !important;
    min-height: var(--chillroom-viewport-height, 100dvh) !important;
}

html {
    background: #07030d !important;
}

/* Le décor portrait original reste intact. Sur mobile, une version optimisée
   est choisie avant le premier rendu; le JPEG sert de repli universel. */
:root {
    --chillroom-portrait-background-image:
        url("/images/Background_chillroom_9_16-mobile-v2.jpg?v=20260828-1");
}

@supports (
    background-image: image-set(
        url("/images/Background_chillroom_9_16-mobile-v2.webp?v=20260828-1")
        type("image/webp")
    )
) {
    :root {
        --chillroom-portrait-background-image:
            image-set(
                url("/images/Background_chillroom_9_16-mobile-v2.webp?v=20260828-1")
                type("image/webp")
            );
    }
}

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

body.chillroom-portal-ready {
    position: relative !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: var(--chillroom-viewport-height, 100dvh) !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%
            ),
            var(--chillroom-portrait-background-image) !important;
    }

    body #chillroom-welcome-overlay {
        align-items: flex-start !important;
        justify-content: center !important;
        overflow-y: auto !important;
        padding-top: max(
            clamp(92px, 15svh, 128px),
            calc(env(safe-area-inset-top) + 48px)
        ) !important;
        padding-bottom: max(
            clamp(250px, 36svh, 360px),
            calc(env(safe-area-inset-bottom) + 216px)
        ) !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !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;
        position: relative !important;
        isolation: isolate !important;
        background: none !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;
        position: relative !important;
        z-index: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-backface-visibility: visible !important;
        backface-visibility: visible !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%
            ),
            var(--chillroom-portrait-background-image) !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;
    }
}

/* Safari iPhone: évite la disparition des PNG alpha dans une couche
   combinant backdrop-filter et animation transformée. */
@supports (-webkit-touch-callout: none) {
    @media (orientation: portrait), (max-width: 600px) {
        body.chillroom-portal-ready,
        body #chillroom-welcome-overlay {
            background-attachment:
                scroll,
                scroll,
                scroll,
                scroll,
                scroll !important;
        }

        body #chillroom-welcome-card {
            animation: none !important;
            -webkit-transform: none !important;
            transform: none !important;
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
        }

        body #chillroom-welcome-logo {
            -webkit-transform: none !important;
            transform: none !important;
        }
    }
}

/* iOS PWA: WebKit peut exclure la zone sure des valeurs svh/dvh et
   innerHeight. En mode installe, 100vh couvre bien tout l'ecran, y compris
   le fond derriere l'indicateur d'accueil. */
@supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
        html,
        body,
        body.chillroom-portal-ready {
            min-height: 100vh !important;
        }

        body #chillroom-welcome-overlay {
            height: 100vh !important;
            min-height: 100vh !important;
            box-sizing: border-box !important;
        }
    }
}