/* =========================================================
   MULTIPLICATIONS V2
   ET VERTS + BROCOLI EMOJI
   ========================================================= */

#peeksee-multiplication-game-v2 {
    --mult-primary: #7041ED;
    --mult-primary-dark: #4926A5;
    --mult-red: #FF6B6B;
    --mult-yellow: #FFD84D;
    --mult-border: #E7DFFF;
    --mult-text: #3C2A71;

    --alien-green-1: #C8F6AE;
    --alien-green-2: #8DDD72;
    --alien-green-3: #66B954;
    --alien-mouth: #3B2750;

    width: 100%;
    //max-width: 1120px;
    margin: 0 auto;

    color: var(--mult-text);
    font-family: inherit;
}

#peeksee-multiplication-game-v2,
#peeksee-multiplication-game-v2 *,
#peeksee-multiplication-game-v2 *::before,
#peeksee-multiplication-game-v2 *::after {
    box-sizing: border-box;
}

.psm2-hidden {
    display: none !important;
}


/* =========================================================
   STRUCTURE
   ========================================================= */

.psm2-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 28px;
    align-items: center;
    width: 100%;
}

.psm2-level-picker,
.psm2-game-card,
.psm2-results-panel {
    grid-column: 1;
    grid-row: 1;
}

.psm2-side {
    grid-column: 2;
    grid-row: 1;
}


/* =========================================================
   CHOIX NIVEAU
   ========================================================= */

.psm2-level-picker {
    width: 100%;
    padding: 26px 62px 24px;

    background: #FFFFFF;

    border: 3px solid #E6DFFF;
    border-radius: 28px;

    box-shadow: 0 10px 26px rgba(70,48,130,.08);
}

.psm2-level-picker-title {
    margin-bottom: 18px;

    color: #30205F;

    text-align: center;

    font-size: 16px;
    font-weight: 900;
}

.psm2-level-picker-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.psm2-level-picker-button {
    width: 100%;
    min-height: 54px;
    padding: 10px 20px;

    cursor: pointer;

    color: #FFFFFF;

    font: inherit;
    font-size: 16px;
    font-weight: 900;

    background: #7041ED;

    border: 0;
    border-radius: 15px;

    box-shadow: 0 6px 0 #4926A5;

    transition:
        transform .12s ease,
        background .12s ease;
}

.psm2-level-picker-button:hover,
.psm2-level-picker-button:focus-visible {
    background: #7A4AF5;
    transform: translateY(-1px);
    outline: none;
}

.psm2-level-picker-button:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #4926A5;
}


/* =========================================================
   CARTE JEU
   ========================================================= */

.psm2-game-card {
    min-width: 0;

    padding: 24px;

    background: #FFFFFF;

    border: 3px solid var(--mult-border);
    border-radius: 28px;

    box-shadow: 0 14px 34px rgba(70,48,130,.12);
}

.psm2-game-header {
    text-align: center;
}

.psm2-level-title {
    margin: 0 0 12px;

    color: #4A367F;

    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
}


/* =========================================================
   PROGRESSION
   ========================================================= */

.psm2-progress {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 7px;

    min-height: 18px;
    margin-bottom: 18px;
}

.psm2-progress-dot {
    width: 16px;
    height: 16px;

    background: #E8DEFD;

    border: 3px solid #D8C8FF;
    border-radius: 50%;
}

.psm2-progress-dot.is-current {
    background: var(--mult-primary);
    border-color: var(--mult-primary);
}

.psm2-progress-dot.is-success {
    background: #42C879;
    border-color: #42C879;
}

.psm2-progress-dot.is-error {
    background: #FF6B6B;
    border-color: #FF6B6B;
}


/* =========================================================
   TERRAIN
   ========================================================= */

.psm2-game-frame {
    position: relative;

    width: 100%;
    max-width: 620px;
    aspect-ratio: 1 / 1;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 20px;

    touch-action: pan-y pinch-zoom;
}

.psm2-stage {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 20px;

    outline: none;
}


/* =========================================================
   FOND ESPACE
   ========================================================= */

.psm2-space-playfield {
    position: absolute;
    inset: 0;

    overflow: hidden;

    border-radius: inherit;

    background:

        radial-gradient(
            circle at 11% 15%,
            rgba(255,255,255,.96) 0 1px,
            transparent 2px
        )
        0 0 / 65px 65px,

        radial-gradient(
            circle at 75% 22%,
            rgba(255,229,136,.92) 0 1.4px,
            transparent 2.4px
        )
        0 0 / 107px 107px,

        radial-gradient(
            circle at 38% 63%,
            rgba(196,173,255,.84) 0 1.2px,
            transparent 2px
        )
        0 0 / 86px 86px,

        radial-gradient(
            circle at 61% 42%,
            rgba(149,207,255,.75) 0 1px,
            transparent 2px
        )
        0 0 / 121px 121px,

        linear-gradient(
            180deg,
            #13032F 0%,
            #23065F 35%,
            #38128A 69%,
            #5720A0 100%
        );
}

.psm2-space-playfield::after {
    content: "";

    position: absolute;

    left: -15%;
    right: -15%;
    bottom: -20%;

    height: 38%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at top,
            rgba(173,90,232,.72),
            rgba(92,35,156,.64) 52%,
            transparent 73%
        );

    pointer-events: none;
}


/* =========================================================
   QUESTION
   ========================================================= */

.psm2-question {
    position: absolute;
    z-index: 30;

    top: 5%;
    left: 50%;

    transform: translateX(-50%);

    min-width: 48%;

    padding: 13px 22px;

    color: #FFFFFF;

    text-align: center;

    font-size: clamp(30px, 4.5vw, 48px);
    font-weight: 900;
    line-height: 1;

    white-space: nowrap;

    background: rgba(38,8,103,.82);

    border: 3px solid #7540E1;
    border-radius: 20px;

    box-shadow: 0 8px 20px rgba(20,4,65,.2);
}

.psm2-question span {
    margin: 0 5px;
    color: #FFD84D;
}


/* =========================================================
   LIGNE ET
   ========================================================= */

.psm2-aliens-row {
    position: absolute;
    z-index: 20;

    top: 26%;
    left: 1%;
    right: 1%;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    align-items: center;
    justify-items: center;
}


/* =========================================================
   ET
   ========================================================= */

.psm2-alien-answer {
    position: relative;

    width: 92%;
    max-width: 108px;

    aspect-ratio: .9 / 1;

    padding: 0 0 32px;

    cursor: pointer;

    appearance: none;

    background: transparent;

    border: 0;

    overflow: visible;

    transition: transform .17s ease;
}

.psm2-alien-answer:hover,
.psm2-alien-answer:focus-visible {
    transform: translateY(-4px) scale(1.05);
    outline: none;
}

.psm2-alien-body {
    position: absolute;
    inset: 0;

    filter: drop-shadow(0 7px 7px rgba(24,7,72,.27));
}


/* =========================================================
   ANTENNES
   ========================================================= */

.psm2-alien-antenna {
    position: absolute;
    z-index: 3;

    top: 4%;

    width: 4px;
    height: 20%;

    background: var(--alien-green-3);

    border-radius: 99px;
}

.antenna-left {
    left: 32%;
    transform: rotate(-22deg);
}

.antenna-right {
    right: 30%;
    transform: rotate(18deg);
}

.psm2-alien-antenna::after {
    content: "";

    position: absolute;

    top: -7px;
    left: 50%;

    width: 12px;
    height: 12px;

    transform: translateX(-50%);

    background: #F5FF9B;

    border-radius: 50%;

    box-shadow: 0 0 8px rgba(245,255,155,.9);
}


/* =========================================================
   TÊTE
   ========================================================= */

.psm2-alien-head {
    position: absolute;
    z-index: 5;

    left: 10%;
    right: 10%;

    top: 16%;
    bottom: 5%;

    overflow: visible;

    background:
        linear-gradient(
            145deg,
            var(--alien-green-1),
            var(--alien-green-2)
        );

    border: 3px solid rgba(255,255,255,.38);

    box-shadow:
        inset 6px 6px 10px rgba(255,255,255,.20),
        inset -8px -10px 12px rgba(39,99,41,.12);
}


/* =========================================================
   YEUX KAWAII
   ========================================================= */

.psm2-alien-eye {
    position: absolute;
    z-index: 8;

    width: 19px;
    height: 23px;

    background: #FFFFFF;

    border: 2px solid #3C245F;
    border-radius: 50%;

    overflow: hidden;
}

.psm2-alien-eye::before {
    content: "";

    position: absolute;
    z-index: 3;

    top: 2px;
    right: 2px;

    width: 24%;
    height: 24%;

    background: #FFFFFF;

    border-radius: 50%;
}

.psm2-alien-eye::after {
    content: "";

    position: absolute;

    top: 20%;

    width: 57%;
    height: 57%;

    background: #251542;

    border-radius: 50%;
}

.eye-left::after {
    right: -1%;
}

.eye-right::after {
    left: -1%;
}

.psm2-alien-eyebrow {
    display: none !important;
}


/* =========================================================
   JOUES
   ========================================================= */

.psm2-alien-cheek {
    position: absolute;
    z-index: 6;

    top: 54%;

    width: 11px;
    height: 6px;

    background: rgba(255,100,140,.28);

    border-radius: 50%;
}

.cheek-left {
    left: 11%;
}

.cheek-right {
    right: 11%;
}


/* =========================================================
   BOUCHES
   ========================================================= */

.psm2-alien-mouth {
    position: absolute;
    z-index: 12;

    left: 50%;
    top: 64%;

    width: 27px;
    height: 17px;

    transform: translateX(-50%);

    background: var(--alien-mouth);

    border: 2px solid rgba(255,255,255,.14);

    overflow: hidden;
}

.psm2-alien-mouth::before,
.psm2-alien-mouth::after {
    display: none;
}

.psm2-alien-tooth,
.psm2-alien-tongue {
    display: none !important;
}


/* =========================================================
   VISAGES DIFFÉRENTS
   ========================================================= */

/* ET 1 */

.alien-0 .psm2-alien-head {
    border-radius:
        62% 38% 55% 45%
        /
        42% 63% 37% 58%;

    transform: rotate(-4deg);
}

.alien-0 .eye-left {
    left: 17%;
    top: 28%;
}

.alien-0 .eye-right {
    right: 21%;
    top: 34%;
}

.alien-0 .psm2-alien-mouth {
    top: 65%;

    width: 26px;
    height: 18px;

    transform:
        translateX(-50%)
        rotate(8deg);

    border-radius:
        56% 35% 55% 43%
        /
        37% 48% 65% 61%;
}


/* ET 2 */

.alien-1 .psm2-alien-head {
    border-radius:
        44% 56% 36% 64%
        /
        66% 50% 50% 34%;

    transform: rotate(-6deg);
}

.alien-1 .eye-left {
    left: 13%;
    top: 34%;
}

.alien-1 .eye-right {
    right: 16%;
    top: 29%;
}

.alien-1 .psm2-alien-mouth {
    top: 66%;

    width: 31px;
    height: 15px;

    transform:
        translateX(-50%)
        rotate(-8deg);

    border-radius:
        33% 65% 48% 57%
        /
        55% 39% 63% 48%;
}


/* ET 3 */

.alien-2 .psm2-alien-head {
    border-radius:
        29% 71% 44% 56%
        /
        53% 38% 62% 47%;

    transform: rotate(4deg);
}

.alien-2 .eye-left {
    left: 14%;
    top: 27%;
}

.alien-2 .eye-right {
    right: 18%;
    top: 38%;
}

.alien-2 .psm2-alien-mouth {
    top: 66%;

    width: 27px;
    height: 19px;

    transform:
        translateX(-50%)
        rotate(5deg);

    border-radius:
        47% 29% 63% 50%
        /
        34% 43% 67% 61%;
}


/* ET 4 */

.alien-3 .psm2-alien-head {
    left: 15%;
    right: 15%;

    top: 10%;
    bottom: 3%;

    border-radius:
        46% 54% 35% 65%
        /
        30% 33% 67% 70%;

    transform: rotate(-2deg);
}

.alien-3 .eye-left {
    left: 10%;
    top: 27%;
}

.alien-3 .eye-right {
    right: 10%;
    top: 31%;
}

.alien-3 .psm2-alien-mouth {
    top: 68%;

    width: 25px;
    height: 17px;

    transform:
        translateX(-50%)
        rotate(-3deg);

    border-radius:
        39% 51% 60% 54%
        /
        45% 34% 64% 59%;
}


/* ET 5 */

.alien-4 .psm2-alien-head {
    border-radius:
        73% 27% 62% 38%
        /
        32% 68% 41% 59%;

    transform: rotate(7deg);
}

.alien-4 .eye-left {
    left: 12%;
    top: 34%;
}

.alien-4 .eye-right {
    right: 14%;
    top: 40%;
}

.alien-4 .psm2-alien-mouth {
    left: 56%;
    top: 66%;

    width: 29px;
    height: 15px;

    transform:
        translateX(-50%)
        rotate(-11deg);

    border-radius:
        53% 30% 48% 65%
        /
        39% 47% 60% 66%;
}

.alien-4 .antenna-left {
    left: 22%;
    transform: rotate(-35deg);
}

.alien-4 .antenna-right {
    right: 23%;
    transform: rotate(33deg);
}


/* =========================================================
   RÉPONSE
   ========================================================= */

.psm2-alien-number {
    position: absolute;
    z-index: 40;

    left: 50%;
    bottom: -31px;

    transform: translateX(-50%);

    display: block;

    width: max-content;
    min-width: 58px;

    padding: 3px 6px;

    color: #FFFFFF;

    text-align: center;

    font-size: clamp(24px, 3.3vw, 35px);
    font-weight: 900;
    line-height: 1;

    white-space: nowrap !important;

    word-break: keep-all !important;
    overflow-wrap: normal !important;

    text-shadow:
        0 3px 4px rgba(21,5,58,.95),
        0 0 8px rgba(21,5,58,.70);

    pointer-events: none;
}


/* =========================================================
   VISÉ
   ========================================================= */

.psm2-alien-answer.is-aimed {
    transform:
        translateY(-5px)
        scale(1.06);
}

.psm2-alien-answer.is-aimed
.psm2-alien-head {
    box-shadow:
        inset 6px 6px 10px rgba(255,255,255,.20),
        inset -8px -10px 12px rgba(39,99,41,.12),
        0 0 9px rgba(255,255,255,.8),
        0 0 17px rgba(255,255,255,.3);
}


/* =========================================================
   BONNE RÉPONSE
   ========================================================= */

.psm2-alien-answer.is-correct
.psm2-alien-head {
    border-color: #FFD027;

    box-shadow:
        inset 6px 6px 10px rgba(255,255,255,.20),
        inset -8px -10px 12px rgba(39,99,41,.12),
        0 0 10px rgba(255,230,105,.95),
        0 0 22px rgba(255,215,0,.5);
}


/* =========================================================
   GAGNÉ
   TOUR + SOURIRE
   ========================================================= */

.psm2-alien-answer.is-happy {
    animation:
        psm2-happy-spin
        .45s ease-in-out
        1;
}

.psm2-alien-answer.is-happy
.psm2-alien-mouth {
    height: 13px;

    background: transparent;

    border: 0;
    border-bottom: 4px solid #3B2750;

    border-radius: 0 0 55% 55%;

    overflow: visible;
}

.alien-0.is-happy .psm2-alien-mouth {
    top: 66%;
    width: 27px;
    transform: translateX(-50%) rotate(5deg);
}

.alien-1.is-happy .psm2-alien-mouth {
    top: 67%;
    width: 29px;
    transform: translateX(-50%) rotate(-4deg);
}

.alien-2.is-happy .psm2-alien-mouth {
    top: 67%;
    width: 28px;
    transform: translateX(-50%) rotate(3deg);
}

.alien-3.is-happy .psm2-alien-mouth {
    top: 69%;
    width: 27px;
    transform: translateX(-50%) rotate(-2deg);
}

.alien-4.is-happy .psm2-alien-mouth {
    left: 56%;
    top: 67%;
    width: 28px;
    transform: translateX(-50%) rotate(-7deg);
}


/* =========================================================
   ERREUR
   ========================================================= */

.psm2-alien-answer.is-wrong {
    animation:
        psm2-alien-wrong
        .28s ease
        2;
}

.psm2-alien-answer.is-wrong
.psm2-alien-head {
    border-color: #FF6B6B;
}

.psm2-alien-answer.is-targeted {
    animation:
        psm2-alien-target
        .4s ease
        infinite alternate;
}


/* =========================================================
   PLANÈTES
   ========================================================= */

.psm2-decor-planet {
    position: absolute;
    z-index: 2;

    width: 9%;
    aspect-ratio: 1;

    border-radius: 50%;

    opacity: .72;
}

.psm2-decor-planet::after {
    content: "";

    position: absolute;

    top: 42%;
    left: -25%;

    width: 150%;
    height: 25%;

    border: 4px solid rgba(215,180,255,.72);

    border-radius: 50%;

    transform: rotate(-13deg);
}

.psm2-decor-planet-left {
    left: 10%;
    top: 58%;

    background:
        linear-gradient(
            145deg,
            #DA77F0,
            #7D3BCC
        );
}

.psm2-decor-planet-right {
    right: 10%;
    top: 60%;

    background:
        linear-gradient(
            145deg,
            #83B8FF,
            #6651D6
        );
}


/* =========================================================
   VAISSEAU
   ========================================================= */

.psm2-ship-wrap {
    position: absolute;
    z-index: 30;

    bottom: 4%;

    width: 17%;
    max-width: 105px;

    transform: translateX(-50%);

    display: flex;
    justify-content: center;

    transition:
        left .22s
        cubic-bezier(.2,.8,.2,1);
}

.psm2-ship-content {
    position: relative;

    width: 100%;

    display: flex;
    justify-content: center;
}

.psm2-ship-image {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;

    filter:
        drop-shadow(
            0 7px 8px
            rgba(30,8,78,.28)
        );

    animation:
        psm2-ship-float
        2.2s ease-in-out
        infinite;
}


/* =========================================================
   BROCOLI EMOJI CHARGÉ DEVANT LE VAISSEAU
   ========================================================= */

.psm2-ready-broccoli {
    position: absolute;
    z-index: 8;

    left: 50%;
    top: -32px;

    display: block;

    width: auto;
    height: auto;

    color: initial;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size: 34px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;

    white-space: nowrap;

    transform:
        translateX(-50%);

    filter:
        drop-shadow(
            0 3px 5px
            rgba(20,50,20,.4)
        );

    pointer-events: none;

    transition:
        opacity .08s linear;
}

.psm2-ready-broccoli.is-fired {
    opacity: 0;
}


/* =========================================================
   PROJECTILE BROCOLI
   PLUS GROS ET BIEN VISIBLE
   ========================================================= */

.psm2-projectile {
    position: absolute;

    z-index: 60;

    bottom: 12%;

    width: 44px;
    height: 44px;

    margin-left: -22px;

    pointer-events: none;

    animation:
        psm2-shot
        .88s
        cubic-bezier(.22,.60,.40,1)
        forwards;
}


/* emoji brocoli lancé */

.psm2-broccoli-shot {
    position: absolute;

    inset: 0;

    display: flex;

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

    width: 44px;
    height: 44px;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size: 42px;

    font-style: normal;
    font-weight: normal;

    line-height: 1;

    white-space: nowrap;

    filter:
        drop-shadow(
            0 3px 5px
            rgba(15,5,40,.55)
        )
        drop-shadow(
            0 0 5px
            rgba(255,255,255,.35)
        );

    pointer-events: none;
}


/* =========================================================
   TRAJECTOIRE
   ========================================================= */

@keyframes psm2-shot {

    0% {
        bottom: 12%;
        opacity: 1;

        transform:
            scale(.95)
            rotate(0deg);
    }

    20% {
        opacity: 1;

        transform:
            scale(1.08)
            rotate(25deg);
    }

    60% {
        transform:
            scale(1.12)
            rotate(80deg);
    }

    100% {
        bottom: 40%;

        opacity: 1;

        transform:
            scale(1.05)
            rotate(130deg);
    }
}


/* =========================================================
   DISPARITION APRÈS LE TIR
   ========================================================= */

.psm2-projectile.is-eaten {
    animation:
        psm2-broccoli-eaten
        .18s ease-out
        forwards;
}

@keyframes psm2-broccoli-eaten {

    from {
        opacity: 1;

        transform:
            scale(1);
    }

    to {
        opacity: 0;

        transform:
            scale(.15);
    }
}


.psm2-projectile.is-missed {
    animation:
        psm2-broccoli-missed
        .18s ease-out
        forwards;
}

@keyframes psm2-broccoli-missed {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


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

@media (max-width: 480px) {

    .psm2-projectile {
        bottom: 10%;

        width: 38px;
        height: 38px;

        margin-left: -19px;

        animation-duration: .92s;
    }

    .psm2-broccoli-shot {
        width: 38px;
        height: 38px;

        font-size: 36px;
    }
}


/* =========================================================
   AIDE
   ========================================================= */

.psm2-controls-hint {
    position: absolute;
    z-index: 30;

    left: 50%;
    bottom: 1%;

    width: 94%;

    transform: translateX(-50%);

    color: rgba(255,255,255,.66);

    text-align: center;

    font-size: 10px;
}

.psm2-mobile-hint {
    display: none;
}


/* =========================================================
   PANDA
   ========================================================= */

.psm2-side {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 16px;

    padding-bottom: 14px;
}

.psm2-speech {
    position: relative;

    width: 100%;

    padding: 16px 18px;

    color: #3C2A71;

    text-align: center;

    font-size: 17px;
    font-weight: 900;
    line-height: 1.4;

    background: #FFFFFF;

    border: 3px solid #EADFFF;
    border-radius: 22px;

    box-shadow:
        0 8px 20px
        rgba(70,48,130,.10);
}

.psm2-speech::after {
    content: "";

    position: absolute;

    right: 48px;
    bottom: -14px;

    width: 22px;
    height: 22px;

    background: #FFFFFF;

    border-right: 3px solid #EADFFF;
    border-bottom: 3px solid #EADFFF;

    transform: rotate(45deg);
}

.psm2-panda-area {
    width: 420px;
    max-width: 100%;
}

.psm2-side-panda {
    display: block;

    width: 100%;
    height: auto;
}

.psm2-panda-fallback {
    padding: 40px;

    text-align: center;

    font-size: 130px;
}


/* =========================================================
   RECOMMENCER
   ========================================================= */

.psm2-restart-button {
    min-height: 42px;

    padding: 9px 20px;

    cursor: pointer;

    color: #4A367F;

    font: inherit;
    font-weight: 900;

    background: #F1EAFF;

    border: 2px solid #D9CAFF;
    border-radius: 12px;
}


/* =========================================================
   RÉSULTATS
   ========================================================= */

.psm2-results-panel {
    width: 100%;

    padding: 26px 28px;

    background: #FFFFFF;

    border: 3px solid #E7DFFF;
    border-radius: 28px;

    box-shadow:
        0 14px 34px
        rgba(70,48,130,.10);
}

.psm2-results {
    width: 100%;

    color: #3C2A71;
}

.psm2-results-heading {
    display: flex;

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

    gap: 10px;

    margin-bottom: 18px;
}

.psm2-results-heading h2 {
    margin: 0;

    font-size: 30px;
}

.psm2-results-alien {
    font-size: 27px;
}

/* =========================================================
   FLOTTEMENT DES EXTRATERRESTRES
   ========================================================= */

.psm2-alien-body {
    animation:
        psm2-alien-float
        2.8s ease-in-out
        infinite;
}

.alien-0 .psm2-alien-body {
    animation-duration: 2.7s;
    animation-delay: -.4s;
}

.alien-1 .psm2-alien-body {
    animation-duration: 3.1s;
    animation-delay: -1.2s;
}

.alien-2 .psm2-alien-body {
    animation-duration: 2.9s;
    animation-delay: -.8s;
}

.alien-3 .psm2-alien-body {
    animation-duration: 3.3s;
    animation-delay: -1.6s;
}

.alien-4 .psm2-alien-body {
    animation-duration: 2.6s;
    animation-delay: -.3s;
}

@keyframes psm2-alien-float {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(1deg);
    }
}

.psm2-alien-answer.is-happy .psm2-alien-body {
    animation-play-state: paused;
}


/* =========================================================
   SCORE
   ========================================================= */

.psm2-score-cards {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-bottom: 20px;
}

.psm2-score-card {
    display: flex;

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

    gap: 12px;

    padding: 15px;

    background: #F8F3FF;

    border: 2px solid #EEE6FF;
    border-radius: 16px;
}

.psm2-score-card > span {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    color: #FFFFFF;

    font-weight: 900;

    border-radius: 50%;
}

.psm2-score-card.is-good > span {
    background: #42C879;
}

.psm2-score-card.is-bad > span {
    background: #FF6B6B;
}

.psm2-score-card div {
    display: flex;
    flex-direction: column;
}

.psm2-score-card small {
    font-size: 12px;
    font-weight: 700;
}

.psm2-score-card strong {
    font-size: 24px;
}


/* =========================================================
   RÉSULTATS EN LIGNES
   ========================================================= */

.psm2-result-lines {
    display: flex;
    flex-direction: column;

    gap: 8px;

    width: 100%;
}

.psm2-result-line {
    display: grid;

    grid-template-columns:
        42px
        minmax(120px,1fr)
        auto
        34px;

    gap: 10px;

    align-items: center;

    min-height: 58px;

    padding: 9px 12px;

    background: #FAF8FF;

    border: 2px solid #EEE7FF;
    border-radius: 16px;
}

.psm2-result-line.is-good {
    background: #F3FFF7;

    border-color: #CDEFD9;
}

.psm2-result-line.is-bad {
    background: #FFF7F8;

    border-color: #FFD7DD;
}

.psm2-result-line-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    font-size: 23px;

    background: #FFFFFF;

    border-radius: 50%;

    box-shadow:
        0 3px 8px
        rgba(70,48,130,.10);
}

.psm2-result-line-question {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #3C2A71;

    font-size: 18px;

    white-space: nowrap;
}

.psm2-result-number {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    color: #FFFFFF;

    font-size: 11px;
    font-weight: 900;

    background: #7041ED;

    border-radius: 50%;
}

.psm2-result-line-answer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    white-space: nowrap;

    font-size: 20px;
    font-weight: 900;
}

.psm2-result-answer-good {
    color: #299B5A;
}

.psm2-result-answer-wrong {
    color: #E85468;

    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.psm2-result-arrow {
    color: #9A8EAF;

    font-size: 16px;
}

.psm2-result-correction {
    color: #299B5A;
}

.psm2-result-line-status {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    color: #FFFFFF;

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

    border-radius: 50%;
}

.psm2-result-line.is-good
.psm2-result-line-status {
    background: #42C879;
}

.psm2-result-line.is-bad
.psm2-result-line-status {
    background: #FF6B6B;
}


/* =========================================================
   BOUTONS RÉSULTATS
   ========================================================= */

.psm2-next-button {
    display: block;

    min-height: 50px;

    margin: 20px auto 0;

    padding: 11px 24px;

    cursor: pointer;

    color: #FFFFFF;

    font: inherit;
    font-weight: 900;

    background: #7041ED;

    border: 0;
    border-radius: 13px;
}

.psm2-last-level-message {
    margin-top: 20px;

    text-align: center;

    font-weight: 900;
}

.psm2-choose-level-button {
    display: block;

    margin: 14px auto 0;

    padding: 8px 15px;

    cursor: pointer;

    color: #5D4687;

    font: inherit;
    font-size: 12px;
    font-weight: 800;

    background: transparent;

    border: 0;

    text-decoration: underline;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes psm2-ship-float {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(1deg);
    }
}


/*
 * IMPORTANT :
 * on anime le CONTENEUR du projectile.
 * L'emoji se trouve à l'intérieur.
 */

@keyframes psm2-shot {

    0% {
        bottom: 13%;

        opacity: 1;

        transform:
            translateX(-50%)
            scale(.92)
            rotate(0deg);
    }

    20% {
        opacity: 1;
    }

    100% {
        bottom: 59%;

        opacity: 1;

        transform:
            translateX(-50%)
            scale(1)
            rotate(190deg);
    }
}

@keyframes psm2-broccoli-eaten {

    from {
        opacity: 1;

        transform:
            translateX(-50%)
            scale(1);
    }

    to {
        opacity: 0;

        transform:
            translateX(-50%)
            scale(.1);
    }
}

@keyframes psm2-broccoli-missed {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes psm2-happy-spin {

    0% {
        transform:
            rotate(0deg)
            scale(1);
    }

    25% {
        transform:
            rotate(90deg)
            scale(1.05);
    }

    50% {
        transform:
            rotate(180deg)
            scale(1.07);
    }

    75% {
        transform:
            rotate(270deg)
            scale(1.05);
    }

    100% {
        transform:
            rotate(360deg)
            scale(1);
    }
}

@keyframes psm2-alien-wrong {

    0%,
    100% {
        transform:
            translateX(0);
    }

    25% {
        transform:
            translateX(-5px);
    }

    75% {
        transform:
            translateX(5px);
    }
}

@keyframes psm2-alien-target {

    from {
        transform:
            translateY(-4px)
            scale(1.04);
    }

    to {
        transform:
            translateY(-8px)
            scale(1.08);
    }
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 820px) {

    .psm2-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;

        gap: 14px;
    }

    .psm2-side {
        grid-column: 1;
        grid-row: 1;

        display: grid;

        grid-template-columns:
            minmax(0,1fr)
            150px;

        gap: 8px;

        align-items: center;

        padding: 0;
    }

    .psm2-level-picker,
    .psm2-game-card,
    .psm2-results-panel {
        grid-column: 1;
        grid-row: 2;
    }

    .psm2-speech {
        font-size: 14px;
    }

    .psm2-speech::after {
        right: -9px;
        bottom: 50%;

        width: 18px;
        height: 18px;

        transform:
            translateY(50%)
            rotate(-45deg);
    }

    .psm2-panda-area {
        width: 150px;
    }

    .psm2-restart-button {
        grid-column: 1 / -1;

        justify-self: center;
    }

    .psm2-game-card {
        padding: 14px;
    }

    .psm2-ship-wrap {
        bottom: 3%;
        width: 16%;
        max-width: 88px;
    }

    .psm2-desktop-hint {
        display: none;
    }

    .psm2-mobile-hint {
        display: inline;
    }
}


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

@media (max-width: 480px) {

    .psm2-level-picker {
        padding: 20px 18px;
        border-radius: 20px;
    }

    .psm2-level-picker-button {
        min-height: 48px;
        font-size: 14px;
    }

    .psm2-game-card {
        padding: 9px;
        border-radius: 20px;
    }

    .psm2-side {
        grid-template-columns:
            minmax(0,1fr)
            105px;

        gap: 4px;
    }

    .psm2-panda-area {
        width: 105px;
    }

    .psm2-speech {
        padding: 11px;

        font-size: 13px;

        border-width: 2px;
    }

    .psm2-speech::after {
        right: -8px;

        width: 16px;
        height: 16px;

        border-right-width: 2px;
        border-bottom-width: 2px;
    }

    .psm2-level-title {
        font-size: 15px;
    }

    .psm2-progress {
        gap: 5px;
        margin-bottom: 12px;
    }

    .psm2-progress-dot {
        width: 14px;
        height: 14px;

        border-width: 2px;
    }

    .psm2-game-frame,
    .psm2-stage {
        border-radius: 15px;
    }

    .psm2-question {
        top: 4%;

        min-width: 58%;

        padding: 9px 13px;

        font-size:
            clamp(
                23px,
                8vw,
                34px
            );

        border-width: 2px;
        border-radius: 15px;
    }

    .psm2-aliens-row {
        top: 27%;
        left: 0;
        right: 0;
    }


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

    .psm2-alien-answer {
        width: 98%;

        padding-bottom: 28px;
    }

    .psm2-alien-head {
        border-width: 2px;
    }

    .psm2-alien-eye {
        width: 15px;
        height: 18px;

        border-width: 1.5px;
    }

    .psm2-alien-eye::after {
        top: 20%;

        width: 57%;
        height: 57%;
    }

    .alien-0 .eye-left {
        left: 17%;
        top: 28%;
    }

    .alien-0 .eye-right {
        right: 21%;
        top: 34%;
    }

    .alien-1 .eye-left {
        left: 13%;
        top: 34%;
    }

    .alien-1 .eye-right {
        right: 16%;
        top: 29%;
    }

    .alien-2 .eye-left {
        left: 14%;
        top: 27%;
    }

    .alien-2 .eye-right {
        right: 18%;
        top: 38%;
    }

    .alien-3 .eye-left {
        left: 10%;
        top: 27%;
    }

    .alien-3 .eye-right {
        right: 10%;
        top: 31%;
    }

    .alien-4 .eye-left {
        left: 12%;
        top: 34%;
    }

    .alien-4 .eye-right {
        right: 14%;
        top: 40%;
    }


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

    .alien-0 .psm2-alien-mouth {
        top: 65%;

        width: 21px;
        height: 14px;
    }

    .alien-1 .psm2-alien-mouth {
        top: 66%;

        width: 23px;
        height: 12px;
    }

    .alien-2 .psm2-alien-mouth {
        top: 66%;

        width: 21px;
        height: 14px;
    }

    .alien-3 .psm2-alien-mouth {
        top: 68%;

        width: 21px;
        height: 13px;
    }

    .alien-4 .psm2-alien-mouth {
        top: 66%;

        width: 22px;
        height: 12px;
    }


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

    .psm2-alien-answer.is-happy
    .psm2-alien-mouth {
        height: 10px;

        background: transparent;

        border: 0;
        border-bottom: 3px solid #3B2750;
    }


    /* =====================================================
       RÉPONSE MOBILE
       ===================================================== */

    .psm2-alien-number {
        bottom: -26px;

        min-width: 42px;

        padding: 2px 3px;

        font-size:
            clamp(
                20px,
                6.2vw,
                27px
            );

        white-space: nowrap !important;
    }


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

    .psm2-ship-wrap {
        bottom: 1.5%;

        width: 15%;
        max-width: 68px;
    }


    /* =====================================================
       BROCOLI PRÊT MOBILE
       ===================================================== */

    .psm2-ready-broccoli {
        top: -25px;

        font-size: 28px;
    }


    /* =====================================================
       BROCOLI EN VOL MOBILE
       ===================================================== */

    .psm2-projectile {
        bottom: 11%;

        animation-duration: .86s;
    }

    .psm2-broccoli-shot {
        font-size: 30px;
    }


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

    .psm2-controls-hint {
        font-size: 8px;
    }


    /* =====================================================
       RÉSULTATS MOBILE
       ===================================================== */

    .psm2-results-panel {
        padding: 16px 9px;

        border-radius: 20px;
    }

    .psm2-results-heading {
        gap: 5px;
        margin-bottom: 12px;
    }

    .psm2-results-heading h2 {
        font-size: 22px;
    }

    .psm2-results-alien {
        font-size: 19px;
    }

    .psm2-score-cards {
        gap: 6px;

        margin-bottom: 12px;
    }

    .psm2-score-card {
        gap: 5px;

        padding: 8px 4px;
    }

    .psm2-score-card > span {
        width: 25px;
        height: 25px;
    }

    .psm2-score-card small {
        font-size: 9px;
    }

    .psm2-score-card strong {
        font-size: 18px;
    }

    .psm2-result-lines {
        gap: 6px;
    }

    .psm2-result-line {
        grid-template-columns:
            29px
            minmax(72px,1fr)
            auto
            24px;

        gap: 5px;

        min-height: 48px;

        padding: 7px 6px;

        border-radius: 12px;
    }

    .psm2-result-line-icon {
        width: 28px;
        height: 28px;

        font-size: 17px;
    }

    .psm2-result-line-question {
        gap: 4px;

        font-size: 14px;

        white-space: nowrap;
    }

    .psm2-result-number {
        width: 18px;
        height: 18px;

        flex-basis: 18px;

        font-size: 8px;
    }

    .psm2-result-line-answer {
        gap: 4px;

        font-size: 15px;

        white-space: nowrap;
    }

    .psm2-result-arrow {
        font-size: 12px;
    }

    .psm2-result-line-status {
        width: 23px;
        height: 23px;

        font-size: 11px;
    }

    .psm2-next-button {
        min-height: 42px;

        margin-top: 14px;

        padding: 8px 13px;

        font-size: 12px;
    }
}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media (max-width: 360px) {

    .psm2-alien-number {
        min-width: 36px;

        font-size:
            clamp(
                18px,
                5.8vw,
                23px
            );
    }

    .psm2-ready-broccoli {
        font-size: 25px;
    }

    .psm2-broccoli-shot {
        font-size: 27px;
    }

    .psm2-result-line {
        grid-template-columns:
            27px
            minmax(65px,1fr)
            auto
            22px;

        gap: 3px;
    }

    .psm2-result-line-question {
        font-size: 12px;
    }

    .psm2-result-line-answer {
        font-size: 13px;
    }
}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #peeksee-multiplication-game-v2 *,
    #peeksee-multiplication-game-v2 *::before,
    #peeksee-multiplication-game-v2 *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}