/*
 * Desktop (souris, grand écran) : le jeu se joue sur mobile. À la place de
 * l'application, on affiche le visuel du jeu et un QR code vers le site.
 * --v = 1 px d'une maquette desktop de 1600 × 900.
 */

.desktop-gate {
    display: none;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {

    body:has(.desktop-gate) {
        --v: min(calc(100vw / 1600), calc(100vh / 900));
        overflow: hidden;
    }

    body:has(.desktop-gate)::before,
    body:has(.desktop-gate)::after,
    body:has(.desktop-gate) .app {
        display: none;
    }

    .desktop-gate {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
        background: #f5b445 url("../images/background-f139fbdcf05e8f0705e566339dcfd0c9.webp") center 85% / cover no-repeat;
    }

    /* Assombrit le sol pour la lisibilité du copyright */
    .desktop-gate::after {
        content: '';
        position: absolute;
        inset: auto 0 0;
        z-index: 1;
        height: calc(var(--v) * 200);
        background: linear-gradient(to bottom, rgb(43 26 14 / 0), rgb(43 26 14 / .6) 60%, rgb(43 26 14 / .9));
        pointer-events: none;
    }

    .gate-statue {
        position: absolute;
        bottom: 0;
        z-index: 0;
        height: 100vh;
        width: auto;
        max-width: none;
        animation: rise .9s both cubic-bezier(.2, .8, .3, 1);
    }

    .gate-statue--left {
        left: calc(var(--v) * -40);
    }

    .gate-statue--right {
        right: calc(var(--v) * -40);
    }

    .gate-content {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: calc(var(--v) * 110);
        margin-bottom: calc(var(--v) * 70);
    }

    .gate-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .gate-brand > * {
        animation: rise .7s both cubic-bezier(.2, .8, .3, 1);
    }

    .gate-logo {
        width: calc(var(--v) * 330);
    }

    .gate-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: calc(var(--v) * 10);
        color: var(--green);
        font-weight: 600;
        line-height: .92;
        text-shadow: 0 0 calc(var(--v) * 24) rgb(255 246 220 / .9);
        animation-delay: .1s;
    }

    .gate-title-small {
        font-size: calc(var(--v) * 54);
    }

    .gate-title-big {
        font-size: calc(var(--v) * 96);
        line-height: .9;
    }

    .gate-movie {
        width: calc(var(--v) * 330);
        margin-top: calc(var(--v) * 10);
        animation-delay: .2s;
    }

    .gate-date {
        width: calc(var(--v) * 290);
        margin-top: calc(var(--v) * 10);
        animation-delay: .25s;
    }

    /* Carte façon panneau vert à liseré doré */
    .gate-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: calc(var(--v) * 420);
        padding: calc(var(--v) * 34) calc(var(--v) * 36) calc(var(--v) * 30);
        border-radius: calc(var(--v) * 28);
        background: var(--green);
        box-shadow:
            inset 0 0 0 calc(var(--v) * 6) var(--green),
            inset 0 0 0 calc(var(--v) * 9) var(--gold),
            0 calc(var(--v) * 20) calc(var(--v) * 50) rgb(60 30 0 / .35);
        color: var(--cream);
        text-align: center;
        animation: pop .7s .35s both cubic-bezier(.3, 1.5, .5, 1);
    }

    .gate-card-title {
        font-size: calc(var(--v) * 40);
        font-weight: 600;
        line-height: 1.02;
    }

    .gate-qr {
        margin-top: calc(var(--v) * 24);
        padding: calc(var(--v) * 20);
        border-radius: calc(var(--v) * 18);
        background: var(--cream);
        box-shadow: 0 0 0 calc(var(--v) * 4) var(--gold);
    }

    .gate-qr img {
        width: calc(var(--v) * 250);
        height: calc(var(--v) * 250);
        image-rendering: pixelated;
    }

    .gate-url {
        margin-top: calc(var(--v) * 18);
        color: var(--gold);
        font-size: calc(var(--v) * 19);
        font-weight: 600;
        white-space: nowrap;
    }

    .gate-asterix,
    .gate-obelix {
        position: absolute;
        bottom: calc(var(--v) * 62);
        z-index: 2;
        width: auto;
        max-width: none;
        animation: rise .8s .45s both cubic-bezier(.2, .8, .3, 1);
    }

    .gate-asterix {
        left: calc(50% - var(--v) * 640);
        height: calc(var(--v) * 200);
    }

    .gate-obelix {
        right: calc(50% - var(--v) * 650);
        height: calc(var(--v) * 255);
    }

    .gate-footer {
        position: absolute;
        bottom: calc(var(--v) * 12);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(var(--v) * 6);
    }

    .gate-copyright {
        width: calc(var(--v) * 520);
    }

    .gate-footer .footer-links {
        font-size: max(12px, calc(var(--v) * 15));
    }
}