/* =========================================================
   FUTFUT CLUB : styles communs des jeux de tir
   (Multiplications et Soustractions).

   Chaque jeu garde ses couleurs et ses tailles dans son
   propre fichier, chargé après celui-ci.
   ========================================================= */

#peeksee-multiplication-game-v2,
#peeksee-subtraction-game-v2 {
    width: 100%;
    margin: 0 auto;
    font-family: inherit;
}

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

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

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

.psm2-wrapper,
.pss2-wrapper {
    display: grid;
    gap: 28px;
    align-items: center;
    width: 100%;
}

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

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

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

.psm2-level-picker,
.pss2-level-picker {
    padding: 26px 62px 24px;
}

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

    text-align: center;

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

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

.psm2-level-picker-button,
.pss2-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 0.12s ease,
        background 0.12s ease;
}

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

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

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

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

    padding: 24px;
}

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

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

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

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

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

    gap: 7px;

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

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

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

.psm2-game-frame,
.pss2-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,
.pss2-stage {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 20px;

    outline: none;
}

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

.psm2-question,
.pss2-question {
    position: absolute;

    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;
}

.psm2-question span,
.pss2-question span {
    margin: 0 5px;
}

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

.psm2-aliens-row,
.pss2-sharks-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,
.pss2-shark-answer {
    position: relative;

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

    padding: 0 0 32px;

    cursor: pointer;

    appearance: none;

    background: transparent;

    border: 0;

    overflow: visible;

    transition: transform 0.17s ease;
}

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

.psm2-alien-body,
.pss2-shark-body {
    position: absolute;
    inset: 0;
}

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

.psm2-alien-head,
.pss2-shark-head {
    position: absolute;
    z-index: 5;
}

/* =========================================================
   OREILLES POINTUES
   ========================================================= */

.psm2-alien-body::before,
.psm2-alien-body::after,
.pss2-shark-body::before,
.pss2-shark-body::after {
    content: "";

    position: absolute;

    z-index: 4;
    height: 22%;

    background: var(--creature-dark);
}

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

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

    background: #ffffff;

    overflow: hidden;
}

.psm2-alien-eye::before,
.pss2-shark-eye::before {
    content: "";

    position: absolute;
    z-index: 3;

    background: #ffffff;

    border-radius: 50%;
}

.psm2-alien-eye::after,
.pss2-shark-eye::after {
    content: "";

    position: absolute;

    border-radius: 50%;
}

/* =========================================================
   BOUCHE SOURIANTE
   ========================================================= */

.psm2-alien-mouth,
.pss2-shark-mouth {
    position: absolute;

    left: 50%;
    top: 64%;
    height: 15px;

    transform: translateX(-50%);

    border-radius: 3px 3px 16px 16px / 3px 3px 15px 15px;

    overflow: hidden;
}

.psm2-alien-mouth::after,
.pss2-shark-mouth::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -3px;

    width: 55%;
    height: 9px;

    transform: translateX(-50%);

    background: #ff8fa3;

    border-radius: 50% 50% 0 0;
}

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

.psm2-alien-number,
.pss2-shark-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;

    pointer-events: none;
}

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

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

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

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

    background: transparent;

    border: 0;
}

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

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

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

    transform: translateX(-50%);

    display: flex;
    justify-content: center;

    transition: left 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.psm2-ship-content,
.pss2-submarine-content {
    position: relative;

    width: 100%;

    display: flex;
    justify-content: center;
}

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

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

    display: block;

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

    font-size: 34px;
    line-height: 1;

    white-space: nowrap;

    transform: translateX(-50%);

    pointer-events: none;

    transition: opacity 0.08s linear;
}

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

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

.psm2-projectile,
.pss2-projectile {
    position: absolute;

    z-index: 60;

    bottom: 12%;

    width: 44px;
    height: 44px;

    margin-left: -22px;

    pointer-events: none;
}

.psm2-broccoli-shot,
.pss2-shrimp-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;

    line-height: 1;

    white-space: nowrap;

    pointer-events: none;
}

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

.psm2-controls-hint,
.pss2-controls-hint {
    position: absolute;

    left: 50%;
    bottom: 1%;

    transform: translateX(-50%);

    text-align: center;

    font-size: 10px;
}

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

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

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

    gap: 16px;

    padding-bottom: 14px;
}

.psm2-speech,
.pss2-speech {
    position: relative;

    width: 100%;

    padding: 16px 18px;

    text-align: center;

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

    background: #ffffff;
}

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

    position: absolute;

    right: 48px;
    bottom: -14px;

    width: 22px;
    height: 22px;

    background: #ffffff;

    transform: rotate(45deg);
}

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

.psm2-side-panda,
.pss2-side-panda {
    display: block;

    width: 100%;
    height: auto;
}

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

    text-align: center;

    font-size: 130px;
}

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

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

    padding: 9px 20px;

    cursor: pointer;

    font: inherit;
    font-weight: 900;
}

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

.psm2-results-panel,
.pss2-results-panel {
    padding: 26px 28px;
}

.psm2-results,
.pss2-results {
    width: 100%;
}

.psm2-results-heading,
.pss2-results-heading {
    display: flex;

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

    gap: 10px;

    margin-bottom: 18px;
}

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

    font-size: 30px;
}

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

.alien-2 .psm2-alien-body,
.shark-2 .pss2-shark-body {
    animation-duration: 2.9s;
}

.alien-3 .psm2-alien-body,
.shark-3 .pss2-shark-body {
    animation-duration: 3.3s;
}

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

.psm2-score-cards,
.pss2-score-cards {
    display: grid;

    gap: 12px;
}

.psm2-score-card,
.pss2-score-card {
    display: flex;

    align-items: center;
}

.psm2-score-card > span,
.pss2-score-card > span {
    border-radius: 50%;
}

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

.psm2-score-card small,
.pss2-score-card small {
    font-size: 12px;
}

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

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

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

    gap: 8px;
}

.psm2-result-line,
.pss2-result-line {
    display: grid;

    align-items: center;
}

.psm2-result-line-icon,
.pss2-result-line-icon {
    background: #ffffff;

    border-radius: 50%;
}

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

    font-size: 18px;

    white-space: nowrap;
}

.psm2-result-number,
.pss2-result-number {
    color: #ffffff;

    border-radius: 50%;
}

.psm2-result-line-answer,
.pss2-result-line-answer {
    display: flex;
    align-items: center;

    gap: 7px;

    white-space: nowrap;
}

.psm2-result-line-status,
.pss2-result-line-status {
    color: #ffffff;

    border-radius: 50%;
}

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

.psm2-next-button,
.pss2-next-button {
    display: block;

    min-height: 50px;

    margin: 20px auto 0;

    padding: 11px 24px;

    cursor: pointer;

    color: #ffffff;

    font: inherit;
    font-weight: 900;

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

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

    text-align: center;

    font-weight: 900;
}

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

    margin: 14px auto 0;

    padding: 8px 15px;

    cursor: pointer;

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

    background: transparent;

    border: 0;

    text-decoration: underline;
}

@media (max-width: 820px) {
    .psm2-wrapper,
    .pss2-wrapper {
        gap: 14px;
    }

    .psm2-side,
    .pss2-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,
    .pss2-level-picker,
    .pss2-game-card,
    .pss2-results-panel {
        grid-column: 1;
        grid-row: 2;
    }

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

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

        width: 18px;
        height: 18px;

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

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

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

        justify-self: center;
    }

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

    .psm2-ship-wrap,
    .pss2-submarine-wrap {
        width: 16%;
        max-width: 88px;
    }

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

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

@media (max-width: 480px) {
    .psm2-level-picker,
    .pss2-level-picker {
        padding: 20px 18px;
    }

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

    .psm2-game-card,
    .pss2-game-card {
        padding: 9px;
    }

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

        gap: 4px;
    }

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

    .psm2-speech,
    .pss2-speech {
        padding: 11px;

        font-size: 13px;
    }

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

        width: 16px;
        height: 16px;
    }

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

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

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

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

    .psm2-question,
    .pss2-question {
        top: 4%;

        min-width: 58%;

        padding: 9px 13px;

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

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

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

    .psm2-alien-answer,
    .pss2-shark-answer {
        width: 98%;

        padding-bottom: 28px;
    }

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

    .psm2-alien-mouth,
    .pss2-shark-mouth {
        height: 11px;
    }

    .psm2-alien-mouth::after,
    .pss2-shark-mouth::after {
        height: 6px;
    }

    .psm2-alien-answer.is-happy .psm2-alien-mouth,
    .pss2-shark-answer.is-happy .pss2-shark-mouth {
        height: 10px;
    }

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

    .psm2-alien-number,
    .pss2-shark-number {
        bottom: -26px;

        min-width: 42px;

        padding: 2px 3px;

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

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

    .psm2-ship-wrap,
    .pss2-submarine-wrap {
        width: 15%;
        max-width: 68px;
    }

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

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

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

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

    .psm2-score-cards,
    .pss2-score-cards {
        gap: 6px;
    }

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

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

    .psm2-result-line-question,
    .pss2-result-line-question {
        white-space: nowrap;
    }

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

        white-space: nowrap;
    }

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

        margin-top: 14px;

        padding: 8px 13px;

        font-size: 12px;
    }
}

@media (max-width: 360px) {
    .psm2-alien-number,
    .pss2-shark-number {
        min-width: 36px;

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

@media (prefers-reduced-motion: reduce) {
    #peeksee-multiplication-game-v2 *,
    #peeksee-multiplication-game-v2 *::before,
    #peeksee-multiplication-game-v2 *::after,
    #peeksee-subtraction-game-v2 *,
    #peeksee-subtraction-game-v2 *::before,
    #peeksee-subtraction-game-v2 *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}