:root {
    --system-color-canvas: oklch(0% 0 0 / 90%);
    --system-color-shadow: oklch(0% 0 0 / 38.5%);
    --system-color-dark: oklch(0% 0 0);
    --system-color-light: oklch(100% 0 0);
    --system-color-label: oklch(67.03% 0.023 79.03);
    --system-color-logo: oklch(57.75% 0.149 25.33);
    --system-color-text-shadow: oklch(0% 0 0 / 20%);
    --system-color-card-border: oklch(0% 0 0 / 50%);
    --system-color-card-arme: rgb(187, 185, 185);
    --system-color-card-andromeda: white;
    --system-color-card-cerberus: white;
    --system-color-card-nyx: white;
    --system-color-card-horse: white;
    --system-color-gem-orange: oklch(71.92% 0.056 38.8 / 20%);
}


.cards__contener {


    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    -moz-image-rendering: auto;
    -ms-image-rendering: auto;
    -o-image-rendering: auto;
    image-rendering: auto;

    /* ✑ text selection disabling */
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;



    & .hand {

        width: 80%;
        height: 100%;

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

        -webkit-animation: opening 1.2s ease-in;
        animation: opening 1.2s ease-in;

        /* ✑ transparent curtain that appears between the cards on the table and the one in your hand, when you click on one of them */
        & .hand__curtain {
            width: 100%;
            height: 100%;

            display: none;

            position: absolute;
            z-index: 2;

            background-color: var(--system-color-canvas);

            &.curtain--visible {
                display: block;
                animation: curtain-up 0.6s ease-out forwards;
            }
        }

        & section {
            /* ☛ ⚠ cursor max size 128px*128px */
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M237.5 34.83c-.8 16.4.4 18.5 1.3 32.3c9.3-2.57 19.1-2.28 27.8-.2c1.2-14.6.4-25.7-1.8-32.6c-8.8-14.67-21.3-19.44-27.3.5M136 59.23c-.1 11.8.6 16.4 1.5 23.1c10.1-3.67 19.5-4.81 29-3.4c-.3-9.2-1.4-16.3-3.2-21.2c-8.9-14.06-21.5-18.62-27.3 1.5m231.2 1.8c-3.9 12.7-4.2 16.7-5.5 25c9.7-.17 20.3 3.07 27.8 7.2c3.3-11 4.7-19.9 4.3-26.1c-3.2-16.59-16-22.53-26.6-6.1M237 87.53c4 16.67 9.1 35.37.9 56.07c10.2-4 20.8-4.4 30.5-1.5c-4.7-18.2-4.8-36.5-1.1-55.87c-10-3.21-21.4-3.31-30.3 1.3m-97.5 14.27c13.2 12.8-.5 56.2 5 60.1c10.1-5.3 21-6.9 31.6-4.6c-7.1-18.8-8.9-38.2-6.4-58.97c-9.8-2.72-21.8-1.84-30.2 3.47m-93.7 11.6c1.7 10.7 3 15.3 4.7 20.9c8.7-5 18.7-7.1 28.49-6.7c-1.73-8.9-3.99-15.6-6.49-20.1c-9.56-15.42-25.07-10.78-26.7 5.9m309.6-8.3c-.7 16.8-.7 35.8-13.2 53.2c.4 0 .8-.1 1.2-.1c10-.2 19.9 2.7 27.8 7.6c.2-18.6 5-36.3 13.7-53.9c-9.7-5.2-19.2-9.3-29.5-6.8M54.5 153.9c6.8 14.6 15 30.6 12.9 50.4c8.74-4.9 18.49-6.6 27.95-5.7c-7.67-16.1-11.2-33.3-11.5-52.2c-9.6-.8-22.27 1.9-29.35 7.5m183 11.4c5.1 27.4 12.2 55.7 4.1 86.8c12.2-4.8 26.2-1.3 35.9 5.6c-7.1-30.3-7.9-60.4-3.7-93.2c-12.2-7.8-26.6-8.6-36.3.8m-91.6 19c13.4 34.9 14 64.5 15.9 93.9c11.5-9.8 22.2-13.1 35.7-9.1c-10.7-28.7-15.4-58.1-15.7-90.8c-12.5-6.2-27.5-5-35.9 6m188.3-5.5c6.3 33.2-18.4 68.1-18.6 91.2c11.2-1.4 22.6 3.9 29.9 11.1c2.1-.3 4-.9 5.7-1.6c-.9-31.9 5.4-61.3 18.1-92.1c-9.9-9.5-22.8-14.6-35.1-8.6M70.7 224.9c13.1 24.3 25.3 56 25.96 72.6c7.74-7.3 17.84-10.6 27.64-10.1c.4 0 .7.1 1 .1c-13.4-21.4-21.4-44.1-25.77-69.8c-10.05-2.7-22.37-1-28.83 7.2M439 241.8c-1.5 6.2-2.2 10.3-2.8 13.8c11.1 1.1 20.4 5.1 28.2 11.7c1.7-8.8 2.2-15.8 1.5-20.9c-2.9-18.2-16.7-23.2-26.9-4.6m-202.1 36.9c2.2 24.1 5.2 48.1 5.3 72.6c9-1.2 18-1.4 26.4-.9c.2-23 2-46.6 5.3-71.4c-13.8-14.3-26.4-15.4-37-.3m191.5-4.4c-5.7 19.1-10.7 39.4-22.5 57.7c10 5.6 17.3 12.6 21.7 21.9c7.3-22.2 18.3-42.8 33-63.2c-7.3-11.6-19.2-19.6-32.2-16.4m-259.8 25.8c5.8 24.6 12.4 48.9 16.2 74.3c7.8-6.2 17-11.4 24.8-14.6c-2.5-21-4-42.6-4.4-65.5c-16.1-13.1-28.7-11.4-36.6 5.8m135.5-5.6c-3.5 20.2-6.3 40.6-10.9 60.7c9 3.1 17.1 7.4 24.3 12.6c5.9-21 13.3-41.9 22.2-63.5c-9.8-17.7-21.7-21.9-35.6-9.8m-201.3 29c13.1 24.9 27.3 49.4 37.3 76.7c7.4-6.4 14.5-11.2 22.7-15c-10.1-23.7-18.5-48.6-25.7-75.5c-17-8.2-30.3-4.6-34.3 13.8m291.8 23.4c-22.3 28.3-46.1 40.1-71.8 49.6c9.7 8 17.3 18.4 23 28.9c19.4-20.5 41.9-35.8 69-48.5c-.6-13.5-8.2-26.4-20.2-30m-133.1 21.4c-18.6.1-39 5.1-53.5 12.4c8.7 2.7 16.3 7.8 22.7 14.2c2.9-.1 5.9.1 8.8.6c29.4-13.7 57.9-18.8 82.4.3c-20.5-18.3-35.8-27.5-60.4-27.5m-96.8 36.1c-11.2 6.4-20.5 16.1-24.5 25.8c-.9 17.4 5 31.6 13.5 46.3c4.6 5.8 18.3 9.7 33.5 1.1c-5.2-13.8-10.3-32.2-6.6-43.7c7.2-15.2 16.1-25.7 29-32.9c-14.3-8.2-32-3.8-44.9 3.4m94.2 1.7c3.2 3.2 6.1 6.8 8.6 10.6c6.6 9.9 11.1 21.5 13.6 32.3c1.7 11.5.5 22.1-1.8 32.2c-1 9.3 38.5 14.4 58.8 1.5c.8-12 2.1-25.8-2.6-37.5c-8.1-18.8-22.7-39-41.2-43.4c-11.6-2.7-25.5.3-35.4 4.3m-26.2 6.8c-6.7.4-13.7 3.2-18.3 6.2c-18.6 14.3-19.8 25.3-13 45.3c7.7 26.9 58 25.2 61.1 9.3c3.6-17.7-.9-33.2-10-47.1c-5.6-6.9-11.2-13.7-19.8-13.7'/%3E%3C/svg%3E"),
                pointer;
            width: 46vmin;
            aspect-ratio: 5/7;

            border-radius: 8px;
            overflow: hidden;

            box-shadow: 0vmin 0.8vmin 3.2vmin var(--system-color-card-border),
                0vmin 1.6vmin 6.4vmin var(--system-color-card-border);

            transition: transform 0.6s ease-out, filter 0.6s ease-out;

            & article {
                width: 90%;
                height: 65%;

                border-radius: 8px;
                position: absolute;
                inset: 5% auto auto 5%;

                box-shadow: inset 0vmin 0vmin 12vmin -6vmin var(--system-color-dark);

                /* &::before {
                    width: 110%;
                    height: 35%;

                    content: "";
                    position: absolute;
                    z-index: 5;
                    inset: 70% auto auto -5%;

                    -webkit-filter: drop-shadow(0vmin 2vmin 2vmin var(--system-color-shadow));
                    filter: drop-shadow(0vmin 2vmin 2vmin var(--system-color-shadow));
                } */
            }

            .hand__arme-clone__aside::before,
            .hand__andromeda-clone__aside::before,
            .hand__cerberus-clone__aside::before,
            .hand__nyx-clone__aside::before,
            .hand__horse-clone__aside::before {
                border-radius: 8px;
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url("./images/fire.gif") no-repeat 50% 0%;
                -webkit-background-size: 100%;
                background-size: 100%;
                mix-blend-mode: screen;
                opacity: 0.5;
                /* Réglez l'opacité selon vos préférences */
            }

            .hand__arme-clone__aside,
            .hand__andromeda-clone__aside,
            .hand__cerberus-clone__aside,
            .hand__nyx-clone__aside,
            .hand__horse-clone__aside {
                text-align: center;
                /* font-size: 25px; */
                color: #b56d19;
                width: 90%;
                height: 35%;
                position: absolute;
                z-index: 4;
                inset: auto auto 5% 5%;
                border-radius: 8px;
                background: black;
                box-shadow: inset 0vmin 0vmin 12vmin -6vmin var(--system-color-dark);
            }

            p,
            .hand__andromeda-clone__aside p,
            .hand__cerberus-clone__aside p,
            .hand__nyx-clone__aside p,
            .hand__horse-clone__aside p {
                text-align: left;
                margin: 10px;
                padding: 0;
                color: white;
                font-size: 15px;
            }

            .logo {
                position: absolute;
                top: 83%;
                left: 84%;
                width: 30%;
                height: 25.9%;
                background-image: url("./images/Undead-project-white.svg");
                transform: translate(-50%, -50%);
            }

            .logo-full {
                position: absolute;
                top: 86%;
                left: 84%;
                width: 30%;
                height: 25.9%;
                background-image: url("./images/Undead-project-white.svg");
                transform: translate(-50%, -50%);
            }




            &.card-clone {
                display: none;

                /* ☛ brings up the clicked card in your hand */
                &.card--visible {
                    display: block;
                    position: absolute;
                    z-index: 3;

                    -webkit-animation: card-zoom 0.6s ease-in forwards;
                    animation: card-zoom 0.6s ease-in forwards;
                }
            }

            /* ✑ vanish the card clicked from the board */
            &.card--hidden {
                animation: vanish-from-the-board 0.6s ease-out forwards;
            }

            &.hand__arme-clone,
            &.hand__andromeda-clone,
            &.hand__cerberus-clone,
            &.hand__nyx-clone,
            &.hand__horse-clone {
                &>article {
                    &>span {
                        height: 100%;
                        width: 100%;

                        position: absolute;
                        border-radius: 5% 5% 0 0;
                    }

                    & .arme-clone-vfx.vfx--visible,
                    .andromeda-clone-vfx.vfx--visible,
                    .cerberus-clone-vfx.vfx--visible,
                    .nyx-clone-vfx.vfx--visible,
                    .horse-clone-vfx.vfx--visible {
                        background: url("./images/fire.gif") no-repeat 50% 0%;
                        -webkit-background-size: 100%;
                        background-size: 100%;
                        mix-blend-mode: screen;
                    }
                }
            }

            :is(&.hand__arme, &.hand__arme-clone) {
                -webkit-transform: translateX(50%) translateY(10%) rotate(-14deg);
                transform: translateX(50%) translateY(10%) rotate(-14deg);

                background-color: var(--system-color-card-arme);

                &::after {
                    /* box-shadow: 2px 3px 3px 0px #000000ad; */
                    margin-top: 1%;
                    margin-left: 4%;
                    background-color: #b56d19;
                    border-radius: 5px;
                    width: 12%;
                    height: 8.9%;

                    content: "";
                    position: absolute;
                    inset: 1% auto auto -1%;

                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 5h16v4h-1v1h-6a1 1 0 0 0-1 1v1a2 2 0 0 1-2 2H9.62c-.38 0-.73.22-.9.56l-2.45 4.89c-.17.34-.51.55-.89.55H2s-3 0 1-6c0 0 3-4-1-4V5h1l.5-1h3zm7 7v-1a1 1 0 0 0-1-1h-1s-1 1 0 2a2 2 0 0 1-2-2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1'/%3E%3C/svg%3E");
                    -webkit-background-size: 100%;
                    background-size: 100%;

                    -webkit-filter: drop-shadow(0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-orange));
                    filter: drop-shadow(0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-orange));
                }

                &>article {
                    /* background-image: image-set() */
                    background: url("./images/carte_pistolet2_cleanup.webp") no-repeat 50% 0%;
                    -webkit-background-size: 100%;
                    background-size: 100%;

                    &::before {
                        width: 110%;
                        height: 35%;

                        content: "";
                        position: absolute;
                        inset: 70% auto auto -5%;
                        -webkit-background-size: 100%;
                        background-size: 100%;
                    }
                }

                &>aside {
                    &::before {
                        width: 100%;
                        content: "";
                        position: absolute;
                        -webkit-background-size: 100%;
                        background-size: 100%;
                    }

                    &::after {
                        width: 66%;
                        height: 66%;
                        content: "";
                        position: absolute;
                        inset: 4% auto auto 17%;
                        -webkit-background-size: 100%;
                        background-size: 100%;
                    }
                }
            }

            :is(&.hand__andromeda, &.hand__andromeda-clone) {
                -webkit-transform: translateX(35%) translateY(0%) rotate(-7deg);
                transform: translateX(35%) translateY(0%) rotate(-7deg);
                background-color: var(--system-color-card-andromeda);

                &::after {
                    margin-top: 1%;
                    margin-left: 4%;
                    background-color: #b56d19;
                    border-radius: 5px;
                    width: 12%;
                    height: 8.9%;

                    content: "";
                    position: absolute;
                    inset: 1% auto auto -1%;

                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M232 104v48a16 16 0 0 1-16 16h-48v48a16 16 0 0 1-16 16h-48a16 16 0 0 1-16-16v-48H40a16 16 0 0 1-16-16v-48a16 16 0 0 1 16-16h48V40a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v48h48a16 16 0 0 1 16 16'/%3E%3C/svg%3E");
                    -webkit-background-size: 100%;
                    background-size: 100%;

                    -webkit-filter: drop-shadow(0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-orange));
                    filter: drop-shadow(0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-orange));
                }


                &>article {
                    /* background-image: image-set() */
                    background: url("./images/malette_à_soins2.webp") no-repeat 50% 0%;
                    -webkit-background-size: 100%;
                    background-size: 100%;

                    &::before {
                        width: 110%;
                        height: 35%;

                        content: "";
                        position: absolute;
                        inset: 70% auto auto -5%;
                        -webkit-background-size: 100%;
                        background-size: 100%;
                    }
                }

                &>aside {
                    &::after {
                        width: 66%;
                        height: 66%;

                        content: "";
                        position: absolute;
                        inset: 4% auto auto 16.5%;
                        -webkit-background-size: 100%;
                        background-size: 100%;
                    }
                }
            }

            :is(&.hand__cerberus, &.hand__cerberus-clone) {
                -webkit-transform: translateY(-5%);
                transform: translateY(-5%);
                background-color: var(--system-color-card-cerberus);

                &::after {
                    margin-top: 1%;
                    margin-left: 4%;
                    background-color: #b56d19;
                    border-radius: 5px;
                    width: 12%;
                    height: 8.9%;

                    content: "";
                    position: absolute;
                    inset: 1% auto auto -1%;

                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='m186.438 20.56l-13.184 26.365c6.8-.26 13.626-.488 20.47-.686l3.84-7.68h116.874l3.77 7.54c6.838.187 13.658.408 20.456.66l-13.102-26.2H186.437zm69.56 42.742c-45.757.056-91.452 1.566-135.38 4.363c-3.24 50.58-8.4 100.987-.786 145.824c89.297 12.395 180.102 12.985 272.764-.054c7.055-30.988 5.117-84.68-1.04-145.89c-43.974-2.893-89.73-4.3-135.558-4.244zm153.783 5.54c6.42 64.12 9.113 119.825-1.135 155.22l-1.61 5.56l-5.726.842c-98.8 14.528-195.613 13.81-290.605.002l-6.285-.914l-1.246-6.23c-9.89-49.49-4.085-102.785-.664-154.42c-4.89.354-9.765.72-14.602 1.107c-8.596 58.568-9.39 116.957-.05 175.292c110.24 12.088 222.275 12.205 336.203-.01c8.502-57.83 8.29-116.25-.017-175.313c-4.725-.4-9.485-.776-14.262-1.14zM255.966 92.3c32.526-.025 65.067 2.746 97.574 8.39l7.46 1.295v7.572c0 15.554 1.683 35.105-12.69 50.25c-9.912 10.444-25.655 17.337-51.31 20.585v18.164h-82v-18.452c-23.992-3.37-39.352-10.175-49.363-20.185C150.807 145.093 151 125.56 151 109.56v-7.594l7.484-1.278c32.444-5.54 64.955-8.362 97.48-8.386zm.012 17.994c-28.96.022-57.913 2.444-86.858 6.996c.265 12.28 1.635 22.296 9.243 29.904c5.914 5.914 16.952 11.416 36.637 14.582v-29.22h82v29.51c21.367-3.115 32.66-8.755 38.254-14.65c7.033-7.41 7.696-17.502 7.73-30.124c-29-4.63-58.006-7.02-87.007-6.998zM233 150.56v30h46v-30zm209.674 92.42a618.941 618.941 0 0 1-1.61 10.87c.214 2.352.42 4.706.63 7.06L471 290.213v-22.24l-28.326-24.995zm-373.485.12L41 267.973v22.24l29.318-29.318c.205-2.327.406-4.655.616-6.982a542.428 542.428 0 0 1-1.745-10.813m354.634 20.397a1637.453 1637.453 0 0 1-30.824 2.967v74.095h16v66h-16v80.615c10.318-.633 20.63-1.313 30.928-2.082c9.445-74.01 6.478-147.698-.104-221.596zm-335.576.03C81.725 338.09 78.58 412.1 88.06 485.1c10.324.79 20.638 1.504 30.94 2.145V406.56h-16v-66h16v-74.024a1537.138 1537.138 0 0 1-30.752-3.01zm286.752 4.4c-10.014.76-20.014 1.424-30 1.992v70.64h30zm-238 .085v72.547h30v-70.55a1557.276 1557.276 0 0 1-30-1.997m190 2.825c-47.65 2.173-94.984 2.19-142 .078v19.314c23.95-5.165 47.8-7.652 71.516-7.59c23.638.06 47.145 2.654 70.484 7.626v-19.43zM68.05 288.62L41 315.67v56.89h23.06c.376-27.987 1.88-55.975 3.99-83.94m375.948.047c2.12 27.872 3.61 55.83 3.957 83.892H471v-56.89zm-187.52 11.95c-23.68-.063-47.487 2.577-71.478 8.052v31.89h16v18.443c17.033 5.346 31.73 8.493 46 9.426v-2.87h18v2.868c14.27-.932 28.967-4.08 46-9.425V340.56h16v-31.866c-23.42-5.267-46.907-8.016-70.523-8.078zM121 358.558v30h22v-23h18v23h22v-30zm208 0v30h22v-23h18v23h22v-30zM201 377.8v28.76h-16v15.857c48.528 10.865 95.713 10.664 142 .045V406.56h-16V377.8c-16.332 4.747-31.283 7.52-46 8.326v11.433h-18v-11.434c-14.717-.806-29.668-3.58-46-8.326zM41 390.56v14h23.14c-.09-4.667-.143-9.334-.163-14zm407.012 0a934.78 934.78 0 0 1-.18 14H471v-14zM137 406.56v19.798c6.137 7.214 11.222 9.77 14.934 9.844c3.734.075 8.697-2.122 15.066-9.79V406.56h-6v7h-18v-7zm208 0v19.798c6.137 7.214 11.222 9.77 14.934 9.844c3.734.075 8.697-2.122 15.066-9.79V406.56h-6v7h-18v-7zm-304 16v35.154c5.596 5.51 8.677 8.25 11.846 9.306c2.454.818 7.713 1.15 15.045 1.317c-1.544-15.25-2.586-30.51-3.204-45.778H41zm406.27 0c-.628 15.224-1.674 30.483-3.21 45.78c7.358-.168 12.635-.5 15.094-1.32c3.17-1.056 6.25-3.795 11.846-9.306V422.56zM185 440.842v49.498c47.55 1.51 94.877 1.446 142-.074V440.9c-46.316 10.03-93.74 10.185-142-.057zm-48 9.123v38.318c10.01.54 20.01 1.008 30 1.408v-39.678c-4.86 2.786-10.01 4.293-15.43 4.184c-5.192-.104-10.036-1.624-14.57-4.232m208 0v39.654c10.01-.403 20.01-.878 30-1.412v-38.194c-4.86 2.786-10.01 4.293-15.43 4.184c-5.192-.104-10.036-1.624-14.57-4.232'/%3E%3C/svg%3E");
                    -webkit-background-size: 100%;
                    background-size: 100%;

                    -webkit-filter: drop-shadow(0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-orange));
                    filter: drop-shadow(0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-orange));
                }

                &>article {
                    /* background-image: image-set() */
                    background: url("./images/sac_à_dos2.webp") no-repeat 50% 0%;
                    -webkit-background-size: 100%;
                    background-size: 100%;

                    &::before {
                        width: 110%;
                        height: 35%;

                        content: "";
                        position: absolute;
                        inset: 70% auto auto -5%;
                        -webkit-background-size: 100%;
                        background-size: 100%;
                    }
                }

                &>aside {
                    &::after {
                        width: 66%;
                        height: 66%;

                        content: "";
                        position: absolute;
                        inset: 4% auto auto 16.5%;
                        -webkit-background-size: 100%;
                        background-size: 100%;
                    }
                }
            }

            &.hand__nyx {
                &>article {
                    &::after {
                        height: 100%;
                        width: 100%;

                        content: "";
                        position: absolute;

                        /* background: url("./images/balle2.webp") no-repeat 50% 0%; */
                        -webkit-background-size: 100%;
                        background-size: 100%;
                        mix-blend-mode: screen;
                    }
                }
            }


            :is(&.hand__nyx, &.hand__nyx-clone) {
                -webkit-transform: translateX(-35%) translateY(0%) rotate(7deg);
                transform: translateX(-35%) translateY(0%) rotate(7deg);
                background-color: var(--system-color-card-nyx);

                &::after {
                    margin-top: 1%;
                    margin-left: 4%;
                    background-color: #b56d19;
                    border-radius: 5px;
                    width: 12%;
                    height: 8.9%;
                    content: "";
                    position: absolute;
                    inset: 1% auto auto -1%;

                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M14 22h-4v-1h4zm-1-12V7h-2v3l-1 1.5V20h4v-8.5zm-1-8s-1 1-1 3v1h2V5s0-2-1-3'/%3E%3C/svg%3E");
                    -webkit-background-size: 100%;
                    background-size: 100%;

                    -webkit-filter: drop-shadow(0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-orange));
                    filter: drop-shadow(0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-orange));
                }

                &>article {
                    /* background-image: image-set() */
                    background: url("./images/balle2.webp") no-repeat 50% 0%;
                    -webkit-background-size: 100%;
                    background-size: 100%;

                    &::before {
                        width: 110%;
                        height: 35%;

                        content: "";
                        position: absolute;
                        inset: 70% auto auto -5%;
                        -webkit-background-size: 100%;
                        background-size: 100%;
                    }
                }

                &>aside {
                    &::after {
                        width: 66%;
                        height: 66%;

                        content: "";
                        position: absolute;
                        inset: 4% auto auto 16.5%;
                        -webkit-background-size: 100%;
                        background-size: 100%;
                    }
                }
            }

            :is(&.hand__horse, &.hand__horse-clone) {
                -webkit-transform: translateX(-50%) translateY(10%) rotate(14deg);
                transform: translateX(-50%) translateY(10%) rotate(14deg);

                background-color: var(--system-color-card-horse);

                &::after {
                    margin-top: 1%;
                    margin-left: 4%;
                    background-color: #b56d19;
                    border-radius: 5px;
                    width: 12%;
                    height: 8.9%;

                    content: "";
                    position: absolute;
                    inset: 1% auto auto -1%;

                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M6 4.5V6H4a2 2 0 0 0-2 2v2h4v-.5a.5.5 0 0 1 1 0v.5h6v-.5a.5.5 0 0 1 1 0v.5h4.003V8a2 2 0 0 0-2-2H14V4.5A1.5 1.5 0 0 0 12.5 3h-5A1.5 1.5 0 0 0 6 4.5M7.5 4h5a.5.5 0 0 1 .5.5V6H7V4.5a.5.5 0 0 1 .5-.5m10.503 7H14v.5a.5.5 0 1 1-1 0V11H7v.5a.5.5 0 0 1-1 0V11H2v4a2 2 0 0 0 2 2h12.003a2 2 0 0 0 2-2z'/%3E%3C/svg%3E");
                    -webkit-background-size: 100%;
                    background-size: 100%;

                    -webkit-filter: drop-shadow(0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-orange));
                    filter: drop-shadow(0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-orange)) drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-orange));
                }


                &>article {
                    /* background-image: image-set() */
                    background: url("./images/sacoche_à_outils.webp") no-repeat 50% 0%;
                    -webkit-background-size: 100%;
                    background-size: 100%;

                    &::before {
                        width: 110%;
                        height: 35%;

                        content: "";
                        position: absolute;
                        inset: 70% auto auto -5%;
                        -webkit-background-size: 100%;
                        background-size: 100%;
                    }
                }

                &>aside {
                    &::after {
                        width: 66%;
                        height: 66%;

                        content: "";
                        position: absolute;
                        inset: 4% auto auto 16.5%;
                        -webkit-background-size: 100%;
                        background-size: 100%;
                    }
                }
            }
        }
    }

    & #logo {
        inline-size: 8vmin;
        aspect-ratio: 1;
        position: absolute;
        inset: auto 1.6vmin 1.6vmin auto;

        -webkit-filter: saturate(0%);
        filter: saturate(0%);
        opacity: 0.3;

        transition: opacity 0.6s ease-out, filter 0.6s ease-out;

        & circle {
            -webkit-fill: var(--system-color-logo);
            fill: var(--system-color-logo);
        }

        & path {
            -webkit-fill: var(--system-color-light);
            fill: var(--system-color-light);
        }
    }
}

/*
  ▀▄▀▄▀▄▀▄▀▄▀▄ ANIMATIONS ▀▄▀▄▀▄▀▄▀▄▀▄
  */

@keyframes opening {
    from {
        opacity: 0;
        filter: grayscale(100%);
    }

    to {
        opacity: 1;
        filter: grayscale(0%);
    }
}

@keyframes curtain-up {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.95;
    }
}

@keyframes card-zoom {
    from {
        opacity: 0;
        transform: scale(1);
    }

    to {
        opacity: 1;
        transform: scale(1.45);
    }
}

@keyframes vanish-from-the-board {
    to {
        opacity: 0;
    }
}

/*** ◰ media queries ***/
/** accessibility **/
@media screen and (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* Scroll description */
.scrollable-content {
    z-index: 99;
    position: absolute;
    max-height: 60%;
    /* Hauteur maximale à partir de laquelle le défilement sera activé */
    overflow-y: auto;
    /* Active le défilement vertical lorsque le contenu dépasse la hauteur maximale */
}

.scrollable-content::-webkit-scrollbar {
    width: 8px;
    /* Largeur de la barre de défilement */
}

.scrollable-content::-webkit-scrollbar-track {
    background-color: transparent;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background-color: var(--system-color-gem-orange);
    /* Couleur du bouton de la barre de défilement */
    border-radius: 4px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background-color: #b56d19;
    /* Couleur du bouton de la barre de défilement au survol */
}

/** prevent sticky hover on mobile device **/
@media (hover: hover) {
    .cards__contener {
        & .hand {

            /* ✑ if one card is hovered, the others cards move backwards and lose their saturation */
            &:has(.card-origin:hover) section:not(:hover) {
                -webkit-filter: grayscale(95%);
                filter: grayscale(95%);
            }

            &:has(.card-origin:hover) .hand__arme:not(:hover) {
                -webkit-transform: translateX(50%) translateY(18%) rotate(-14deg);
                transform: translateX(50%) translateY(18%) rotate(-14deg);
            }

            & .hand__arme:hover {
                -webkit-transform: translateX(40%) translateY(5%) rotate(-14deg);
                transform: translateX(40%) translateY(5%) rotate(-14deg);
            }

            &:has(.card-origin:hover) .hand__andromeda:not(:hover) {
                -webkit-transform: translateX(35%) translateY(8%) rotate(-7deg);
                transform: translateX(35%) translateY(8%) rotate(-7deg);
            }

            & .hand__andromeda:hover {
                -webkit-transform: translateX(25%) translateY(-5%) rotate(-7deg);
                transform: translateX(25%) translateY(-5%) rotate(-7deg);
            }

            &:has(.card-origin:hover) .hand__cerberus:not(:hover) {
                -webkit-transform: translateX(0%) translateY(3%) rotate(0deg);
                transform: translateX(0%) translateY(3%) rotate(0deg);
            }

            & .hand__cerberus:hover {
                -webkit-transform: translateX(-10%) translateY(-10%) rotate(0deg);
                transform: translateX(-10%) translateY(-10%) rotate(0deg);
            }

            &:has(.card-origin:hover) .hand__nyx:not(:hover) {
                -webkit-transform: translateX(-35%) translateY(8%) rotate(7deg);
                transform: translateX(-35%) translateY(8%) rotate(7deg);
            }

            & .hand__nyx:hover {
                -webkit-transform: translateX(-45%) translateY(-5%) rotate(7deg);
                transform: translateX(-45%) translateY(-5%) rotate(7deg);
            }

            &:has(.card-origin:hover) .hand__horse:not(:hover) {
                -webkit-transform: translateX(-50%) translateY(18%) rotate(14deg);
                transform: translateX(-50%) translateY(18%) rotate(14deg);
            }

            & .hand__horse:hover {
                -webkit-transform: translateX(-45%) translateY(5%) rotate(14deg);
                transform: translateX(-45%) translateY(5%) rotate(14deg);
            }
        }

        & #logo {
            &:hover {
                -webkit-filter: saturate(100%);
                filter: saturate(100%);
                opacity: 1;
            }
        }
    }
}