#peeksee-subtraction-game-v2 {
    --pss2-primary: #2f7fe8;
    --pss2-primary-dark: #1758b7;
    --pss2-secondary: #13b6be;
    --pss2-border: #d8ebff;
    --pss2-text: #17406e;
    --pss2-success: #38b86f;
    --pss2-error: #ff6b6b;
    --pss2-yellow: #ffd55c;
    --pss2-panel: #ffffff;

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

    color: var(--pss2-text);

    font-family: inherit;
}

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

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


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

.pss2-wrapper {
    display: grid;

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

    gap: 28px;

    align-items: center;

    width: 100%;
}

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

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


/* =========================================================
   BLOCS
   ========================================================= */

.pss2-level-picker,
.pss2-game-card,
.pss2-results-panel {
    width: 100%;

    background: var(--pss2-panel);

    border:
        3px solid
        var(--pss2-border);

    border-radius: 28px;

    box-shadow:
        0 14px 34px
        rgba(29,72,126,.12);
}


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

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

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

    color: #1f4e85;

    text-align: center;

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

.pss2-level-picker-buttons {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.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 .12s ease,
        background .12s ease;
}

.pss2-level-picker-button:hover,
.pss2-level-picker-button:focus-visible {
    background: #7A4AF5;

    transform:
        translateY(-1px);

    outline: none;
}

.pss2-level-picker-button:active {
    transform:
        translateY(4px);

    box-shadow:
        0 2px 0
        #4926A5;
}


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

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

    padding: 24px;
}

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

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

    color: #1c4f83;

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


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

.pss2-progress {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 7px;

    min-height: 18px;

    margin-bottom: 18px;
}

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

    background: #dff1ff;

    border:
        3px solid
        #b8dcfb;

    border-radius: 50%;
}

.pss2-progress-dot.is-current {
    background:
        var(--pss2-primary);

    border-color:
        var(--pss2-primary);
}

.pss2-progress-dot.is-success {
    background:
        var(--pss2-success);

    border-color:
        var(--pss2-success);
}

.pss2-progress-dot.is-error {
    background:
        var(--pss2-error);

    border-color:
        var(--pss2-error);
}


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

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

.pss2-stage {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 20px;

    outline: none;
}


/* =========================================================
   FOND MER
   ========================================================= */

.pss2-sea-playfield {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border-radius: inherit;

    background:

        radial-gradient(
            circle at 10% 14%,
            rgba(255,255,255,.55)
            0 1px,
            transparent 2px
        )
        0 0 / 80px 80px,

        radial-gradient(
            circle at 78% 28%,
            rgba(255,255,255,.45)
            0 1px,
            transparent 2px
        )
        0 0 / 120px 120px,

        radial-gradient(
            circle at 23% 74%,
            rgba(255,255,255,.35)
            0 1px,
            transparent 2px
        )
        0 0 / 95px 95px,

        linear-gradient(
            180deg,
            #87d8ff 0%,
            #46b6ef 28%,
            #1392d0 62%,
            #0b5d95 100%
        );
}

.pss2-sea-playfield::before {
    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 15% 18%,
            rgba(255,255,255,.25)
            0 8%,
            transparent 9%
        ),

        radial-gradient(
            circle at 80% 22%,
            rgba(255,255,255,.18)
            0 7%,
            transparent 8%
        ),

        radial-gradient(
            circle at 65% 78%,
            rgba(255,255,255,.16)
            0 7%,
            transparent 8%
        ),

        radial-gradient(
            circle at 34% 86%,
            rgba(255,255,255,.12)
            0 8%,
            transparent 9%
        );

    opacity: .5;

    pointer-events: none;
}

.pss2-sea-playfield::after {
    content: "";

    position: absolute;

    left: -10%;
    right: -10%;
    bottom: -12%;

    height: 30%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at top,
            rgba(226,201,144,.95),
            rgba(209,182,120,.92)
            55%,
            transparent 72%
        );

    pointer-events: none;
}


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

.pss2-question {
    position: absolute;

    z-index: 40;

    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(15,92,146,.84);

    border:
        3px solid
        #7fe2ff;

    border-radius: 20px;

    box-shadow:
        0 8px 20px
        rgba(5,63,103,.24);
}

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

    color: #ffe479;
}


/* =========================================================
   LIGNE REQUINS
   ========================================================= */

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


/* =========================================================
   REQUIN
   ========================================================= */

.pss2-shark-answer {
    position: relative;

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

    aspect-ratio:
        .95 / 1;

    padding:
        0
        0
        32px;

    cursor: pointer;

    appearance: none;

    background: transparent;

    border: 0;

    overflow: visible;

    transition:
        transform .17s ease;
}

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

    outline: none;
}

.pss2-shark-body {
    position: absolute;

    inset: 0;

    filter:
        drop-shadow(
            0 7px 7px
            rgba(6,48,80,.25)
        );

    animation:
        pss2-shark-float
        3s
        ease-in-out
        infinite;
}

.shark-0 .pss2-shark-body {
    animation-duration: 2.8s;
    animation-delay: -.4s;
}

.shark-1 .pss2-shark-body {
    animation-duration: 3.2s;
    animation-delay: -1s;
}

.shark-2 .pss2-shark-body {
    animation-duration: 2.9s;
    animation-delay: -.7s;
}

.shark-3 .pss2-shark-body {
    animation-duration: 3.3s;
    animation-delay: -1.3s;
}

.shark-4 .pss2-shark-body {
    animation-duration: 3.1s;
    animation-delay: -.9s;
}


/* =========================================================
   GRAND AILERON
   ========================================================= */

.pss2-shark-fin {
    position: absolute;

    z-index: 4;

    top: 1%;
    left: 38%;

    width: 28%;
    height: 34%;

    background:
        linear-gradient(
            180deg,
            #9ca9ba 0%,
            #748192 100%
        );

    clip-path:
        polygon(
            50% 0%,
            100% 100%,
            7% 100%
        );

    transform:
        rotate(-3deg);

    border-radius: 45%;
}


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

.pss2-shark-head {
    position: absolute;

    z-index: 5;

    left: 9%;
    right: 9%;

    top: 18%;
    bottom: 7%;

    background:
        linear-gradient(
            145deg,
            #ccd4de,
            #9ca8b8 55%,
            #7e8999 100%
        );

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

    box-shadow:
        inset 6px 6px 10px rgba(255,255,255,.22),
        inset -8px -10px 12px rgba(51,66,89,.10);

    overflow: visible;
}


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

.pss2-shark-eye {
    position: absolute;

    z-index: 8;

    width: 25px;
    height: 27px;

    background: #ffffff;

    border:
        2px solid
        #26364d;

    border-radius: 50%;

    overflow: hidden;
}

.pss2-shark-eye::after {
    content: "";

    position: absolute;

    top: 24%;
    left: 27%;

    width: 13px;
    height: 15px;

    background: #26364d;

    border-radius: 50%;
}

.pss2-shark-eye::before {
    content: "";

    position: absolute;

    z-index: 3;

    top: 4px;
    right: 4px;

    width: 6px;
    height: 6px;

    background: #ffffff;

    border-radius: 50%;
}


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

.pss2-shark-head::before,
.pss2-shark-head::after {
    content: "";

    position: absolute;

    z-index: 7;

    top: 57%;

    width: 12px;
    height: 7px;

    background:
        rgba(255,123,156,.36);

    border-radius: 50%;
}

.pss2-shark-head::before {
    left: 10%;
}

.pss2-shark-head::after {
    right: 10%;
}


/* =========================================================
   BRANCHIES
   ========================================================= */

.pss2-shark-gill {
    display: none;
    position: absolute;

    z-index: 7;

    right: 16%;

    width: 3px;
    height: 16px;

    background:
        rgba(44,57,76,.34);

    border-radius: 99px;
}

.gill-1 {
    top: 43%;

    transform:
        rotate(10deg);
}

.gill-2 {
    top: 52%;

    transform:
        rotate(10deg);
}


/* =========================================================
   BOUCHE KAWAII
   ========================================================= */

.pss2-shark-mouth {
    position: absolute;

    z-index: 9;

    left: 50%;
    top: 67%;

    width: 30px;
    height: 13px;

    transform:
        translateX(-50%);

    background:
        #33445b;

    border-radius:
        6px
        6px
        16px
        16px;

    overflow: hidden;
}


/* =========================================================
   DENTS POINTUES MAIS MIGNONNES
   ========================================================= */

.pss2-shark-teeth {
    position: absolute;

    z-index: 10;

    left: 50%;
    top: 67%;

    width: 30px;
    height: 8px;

    transform:
        translateX(-50%);
}

.pss2-shark-teeth::before,
.pss2-shark-teeth::after {
    content: "";

    position: absolute;

    left: 0;

    width: 100%;
    height: 6px;

    background: #ffffff;
}

.pss2-shark-teeth::before {
    top: 0;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 20%,

            88% 100%,
            76% 20%,

            64% 100%,
            52% 20%,

            40% 100%,
            28% 20%,

            16% 100%,
            4% 20%,

            0 45%
        );
}

.pss2-shark-teeth::after {
    bottom: -5px;

    transform:
        rotate(180deg);

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 20%,

            88% 100%,
            76% 20%,

            64% 100%,
            52% 20%,

            40% 100%,
            28% 20%,

            16% 100%,
            4% 20%,

            0 45%
        );
}


/* =========================================================
   FORMES DES REQUINS
   ========================================================= */

.shark-0 .pss2-shark-head {
    border-radius:
        58% 42% 54% 46%
        /
        48% 58% 42% 52%;

    transform:
        rotate(-3deg);
}

.shark-0 .eye-left {
    left: 15%;
    top: 28%;
}

.shark-0 .eye-right {
    right: 20%;
    top: 31%;
}


.shark-1 .pss2-shark-head {
    border-radius:
        48% 52% 42% 58%
        /
        59% 48% 52% 41%;

    transform:
        rotate(-4deg);
}

.shark-1 .eye-left {
    left: 12%;
    top: 32%;
}

.shark-1 .eye-right {
    right: 15%;
    top: 27%;
}


.shark-2 .pss2-shark-head {
    border-radius:
        38% 62% 48% 52%
        /
        52% 42% 58% 48%;

    transform:
        rotate(3deg);
}

.shark-2 .eye-left {
    left: 13%;
    top: 27%;
}

.shark-2 .eye-right {
    right: 16%;
    top: 34%;
}


.shark-3 .pss2-shark-head {
    left: 14%;
    right: 14%;

    top: 12%;
    bottom: 5%;

    border-radius:
        50% 50% 42% 58%
        /
        40% 42% 58% 60%;

    transform:
        rotate(-1deg);
}

.shark-3 .eye-left {
    left: 8%;
    top: 27%;
}

.shark-3 .eye-right {
    right: 8%;
    top: 30%;
}


.shark-4 .pss2-shark-head {
    border-radius:
        62% 38% 58% 42%
        /
        42% 58% 46% 54%;

    transform:
        rotate(5deg);
}

.shark-4 .eye-left {
    left: 11%;
    top: 32%;
}

.shark-4 .eye-right {
    right: 12%;
    top: 36%;
}


/* =========================================================
   NOMBRE
   ========================================================= */

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

    text-shadow:
        0 3px 4px
        rgba(5,38,67,.95),

        0 0 8px
        rgba(5,38,67,.7);

    pointer-events: none;
}


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

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

.pss2-shark-answer.is-aimed
.pss2-shark-head {
    box-shadow:
        inset
        6px
        6px
        10px
        rgba(255,255,255,.22),

        inset
        -8px
        -10px
        12px
        rgba(51,66,89,.10),

        0 0 9px
        rgba(255,255,255,.8),

        0 0 17px
        rgba(255,255,255,.3);
}


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

.pss2-shark-answer.is-correct
.pss2-shark-head {
    border-color:
        var(--pss2-yellow);

    box-shadow:
        inset
        6px
        6px
        10px
        rgba(255,255,255,.22),

        inset
        -8px
        -10px
        12px
        rgba(51,66,89,.10),

        0 0 10px
        rgba(255,230,105,.95),

        0 0 22px
        rgba(255,215,0,.5);
}


/* =========================================================
   SOURIRE + TOUR COMPLET
   ========================================================= */

.pss2-shark-answer.is-happy {
    animation:
        pss2-happy-spin
        .58s
        ease-in-out
        1;
}

.pss2-shark-answer.is-happy
.pss2-shark-mouth {
    top: 68%;

    width: 30px;
    height: 13px;

    background:
        transparent;

    border: 0;

    border-bottom:
        4px solid
        #33445b;

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

.pss2-shark-answer.is-happy
.pss2-shark-teeth {
    display: none;
}


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

.pss2-shark-answer.is-wrong {
    animation:
        pss2-shark-wrong
        .28s
        ease
        2;
}

.pss2-shark-answer.is-wrong
.pss2-shark-head {
    border-color:
        var(--pss2-error);
}

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


/* =========================================================
   PIEUVRES
   ========================================================= */

.pss2-decor-octopus {
    position: absolute;

    z-index: 2;

    width: 66px;
    height: 66px;

    opacity: .9;
}

.pss2-decor-octopus::before {
    content: "🐙";

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

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

    font-size: 58px;

    filter:
        drop-shadow(
            0
            5px
            8px
            rgba(82,35,92,.22)
        );
}

.pss2-decor-octopus-left {
    left: 9%;
    top: 57%;

    transform:
        rotate(-10deg);
}

.pss2-decor-octopus-right {
    right: 9%;
    top: 59%;

    transform:
        rotate(10deg);
}


/* =========================================================
   ALGUES
   ========================================================= */

.pss2-decor-seaweed {
    position: absolute;

    z-index: 2;

    bottom: 8%;

    width: 36px;
    height: 82px;
}

.pss2-decor-seaweed::before,
.pss2-decor-seaweed::after {
    content: "";

    position: absolute;

    bottom: 0;

    width: 10px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            #33d07c 0%,
            #149b54 100%
        );

    border-radius:
        999px
        999px
        0
        0;

    transform-origin:
        bottom center;
}

.pss2-decor-seaweed::before {
    left: 6px;

    transform:
        rotate(-10deg);
}

.pss2-decor-seaweed::after {
    right: 6px;

    transform:
        rotate(11deg);
}

.pss2-decor-seaweed-left {
    left: 6%;
}

.pss2-decor-seaweed-right {
    right: 6%;
}


/* =========================================================
   SOUS-MARIN
   ========================================================= */

.pss2-submarine-wrap {
    position: absolute;

    z-index: 30;

    bottom: 8%;

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

    transform:
        translateX(-50%);

    display: flex;

    justify-content: center;

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

.pss2-submarine-content {
    position: relative;

    width: 100%;

    display: flex;

    justify-content: center;
}

.pss2-submarine-image,
.pss2-submarine-fallback {
    position: relative;

    z-index: 2;

    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;

    filter:
        drop-shadow(
            0
            7px
            8px
            rgba(3,48,82,.28)
        );

    animation:
        pss2-submarine-float
        2.2s
        ease-in-out
        infinite;
}

.pss2-submarine-fallback {
    display: grid;

    place-items: center;

    aspect-ratio:
        1.25 / 1;

    font-size: 54px;
}


/* =========================================================
   CREVETTE PRÊTE
   ========================================================= */

.pss2-ready-shrimp {
    position: absolute;

    z-index: 8;

    left:
        calc(
            50% - 10px
        );

    top: -24px;

    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%);

    filter:
        drop-shadow(
            0
            3px
            5px
            rgba(79,43,16,.35)
        );

    pointer-events: none;

    transition:
        opacity .08s linear;
}

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


/* =========================================================
   PROJECTILE CREVETTE
   ========================================================= */

.pss2-projectile {
    position: absolute;

    z-index: 60;

    bottom: 12%;

    width: 44px;
    height: 44px;

    margin-left: -22px;

    pointer-events: none;

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

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

    filter:
        drop-shadow(
            0
            3px
            5px
            rgba(43,22,6,.4)
        )
        drop-shadow(
            0
            0
            5px
            rgba(255,255,255,.35)
        );

    pointer-events: none;
}

.pss2-projectile.is-eaten {
    animation:
        pss2-shrimp-eaten
        .18s
        ease-out
        forwards;
}

.pss2-projectile.is-missed {
    animation:
        pss2-shrimp-missed
        .18s
        ease-out
        forwards;
}


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

.pss2-controls-hint {
    position: absolute;

    z-index: 45;

    left: 50%;
    bottom: 1%;

    transform:
        translateX(-50%);

    width:
        calc(
            100% - 18px
        );

    padding:
        6px
        10px;

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

    text-align: center;

    font-size: 10px;
    font-weight: 800;

    line-height: 1.35;

    background:
        rgba(6,78,122,.46);

    border:
        1px solid
        rgba(255,255,255,.24);

    border-radius: 12px;
}

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


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

.pss2-side {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 16px;

    padding-bottom: 14px;
}

.pss2-speech {
    position: relative;

    width: 100%;

    padding:
        16px
        18px;

    color: #17406e;

    text-align: center;

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

    line-height: 1.4;

    background: #ffffff;

    border:
        3px solid
        #d8ebff;

    border-radius: 22px;

    box-shadow:
        0 8px 20px
        rgba(29,72,126,.10);
}

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

    position: absolute;

    right: 48px;
    bottom: -14px;

    width: 22px;
    height: 22px;

    background:
        #ffffff;

    border-right:
        3px solid
        #d8ebff;

    border-bottom:
        3px solid
        #d8ebff;

    transform:
        rotate(45deg);
}

.pss2-panda-area {
    width: 420px;

    max-width: 100%;
}

.pss2-side-panda {
    display: block;

    width: 100%;
    height: auto;
}

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

    text-align: center;

    font-size: 130px;
}


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

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

    padding:
        9px
        20px;

    cursor: pointer;

    color: #185087;

    font: inherit;
    font-weight: 900;

    background:
        #edf7ff;

    border:
        2px solid
        #cde6fb;

    border-radius: 12px;
}


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

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

.pss2-results {
    width: 100%;

    color: #17406e;
}

.pss2-results-heading {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;
}

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

    font-size: 30px;
}

.pss2-results-icon {
    font-size: 27px;
}


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

.pss2-score-cards {
    display: grid;

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

    gap: 12px;

    margin-bottom: 18px;
}

.pss2-score-card {
    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px
        14px;

    border-radius: 18px;

    background:
        #f6fbff;

    border:
        2px solid
        #d8ebff;
}

.pss2-score-card > span {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    font-size: 22px;

    background: #ffffff;
}

.pss2-score-card.is-good > span {
    box-shadow:
        0 0 0 2px
        rgba(56,184,111,.2);
}

.pss2-score-card.is-bad > span {
    box-shadow:
        0 0 0 2px
        rgba(255,107,107,.2);
}

.pss2-score-card div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

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

    font-weight: 800;

    color: #5a7ca1;
}

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

    line-height: 1;
}


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

.pss2-result-lines {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.pss2-result-line {
    display: grid;

    grid-template-columns:
        40px
        minmax(130px,1fr)
        auto
        28px;

    align-items: center;

    gap: 8px;

    min-height: 54px;

    padding:
        8px
        10px;

    border-radius: 14px;

    background:
        #f7fbff;

    border:
        2px solid
        #d8ebff;
}

.pss2-result-line.is-good {
    background:
        #f1fff7;

    border-color:
        rgba(56,184,111,.22);
}

.pss2-result-line.is-bad {
    background:
        #fff5f5;

    border-color:
        rgba(255,107,107,.22);
}

.pss2-result-line-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    font-size: 22px;

    background:
        #ffffff;
}

.pss2-result-line-question {
    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 18px;

    font-weight: 900;

    white-space: nowrap;
}

.pss2-result-number {
    display:
        inline-flex;

    align-items: center;

    justify-content: center;

    width: 22px;
    height: 22px;

    flex-basis: 22px;

    color: #ffffff;

    font-size: 10px;

    font-weight: 900;

    background:
        var(--pss2-primary);

    border-radius: 50%;
}

.pss2-result-line-answer {
    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 18px;

    font-weight: 900;

    white-space: nowrap;
}

.pss2-result-answer-good {
    color:
        var(--pss2-success);
}

.pss2-result-answer-wrong {
    color:
        var(--pss2-error);
}

.pss2-result-arrow {
    font-size: 14px;
}

.pss2-result-correction {
    color:
        var(--pss2-success);
}

.pss2-result-line-status {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 26px;
    height: 26px;

    color: #ffffff;

    font-size: 12px;

    font-weight: 900;

    border-radius: 50%;
}

.pss2-result-line.is-good
.pss2-result-line-status {
    background:
        var(--pss2-success);
}

.pss2-result-line.is-bad
.pss2-result-line-status {
    background:
        var(--pss2-error);
}


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

.pss2-next-button {
    display: block;

    width: 100%;
    max-width: 280px;

    min-height: 50px;

    margin:
        20px
        auto
        0;

    padding:
        11px
        24px;

    cursor: pointer;

    color: #ffffff;

    font: inherit;
    font-weight: 900;

    background:
        var(--pss2-primary);

    border: 0;

    border-radius: 13px;
}

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

    text-align: center;

    font-weight: 900;
}

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

    margin:
        14px
        auto
        0;

    padding:
        8px
        15px;

    cursor: pointer;

    color: #376b9c;

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

    background:
        transparent;

    border: 0;

    text-decoration:
        underline;
}


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

@keyframes pss2-submarine-float {

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

    50% {
        transform:
            translateY(-5px);
    }
}


@keyframes pss2-shark-float {

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

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


/* crevette vers la bouche */

@keyframes pss2-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: 59%;

        opacity: 1;

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


@keyframes pss2-shrimp-eaten {

    from {
        opacity: 1;

        transform:
            scale(1);
    }

    to {
        opacity: 0;

        transform:
            scale(.15);
    }
}


@keyframes pss2-shrimp-missed {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


/* tour complet du requin */

@keyframes pss2-happy-spin {

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

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

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

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

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


@keyframes pss2-shark-wrong {

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

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

    50% {
        transform:
            translateX(4px);
    }

    75% {
        transform:
            translateX(-3px);
    }
}


@keyframes pss2-shark-target {

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

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


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

@media (max-width: 820px) {

    .pss2-wrapper {
        grid-template-columns:
            1fr;

        grid-template-rows:
            auto
            auto;

        gap: 14px;
    }

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

        display: grid;

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

        gap: 8px;

        align-items: center;

        padding: 0;
    }

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

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

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

        width: 18px;
        height: 18px;

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

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

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

        justify-self: center;
    }

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

    .pss2-submarine-wrap {
        bottom: 8%;

        width: 16%;
        max-width: 88px;
    }

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

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


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

@media (max-width: 480px) {

    .pss2-level-picker {
        padding:
            20px
            18px;

        border-radius: 20px;
    }

    .pss2-level-picker-button {
        min-height: 48px;

        font-size: 14px;
    }

    .pss2-game-card {
        padding: 9px;

        border-radius: 20px;
    }

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

        gap: 4px;
    }

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

    .pss2-speech {
        padding: 11px;

        font-size: 13px;

        border-width: 2px;
    }

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

        width: 16px;
        height: 16px;

        border-right-width: 2px;

        border-bottom-width: 2px;
    }

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

    .pss2-progress {
        gap: 5px;

        margin-bottom: 12px;
    }

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

        border-width: 2px;
    }

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

    .pss2-question {
        top: 4%;

        min-width: 58%;

        padding:
            9px
            13px;

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

        border-width: 2px;

        border-radius: 15px;
    }

    .pss2-sharks-row {
        top: 27%;

        left: 0;
        right: 0;
    }


    /* requins */

    .pss2-shark-answer {
        width: 98%;

        padding-bottom: 28px;
    }

    .pss2-shark-head {
        border-width: 2px;
    }


    /* yeux kawaii mobile */

    .pss2-shark-eye {
        width: 19px;
        height: 21px;

        border-width: 1.5px;
    }

    .pss2-shark-eye::after {
        width: 10px;
        height: 11px;
    }

    .pss2-shark-eye::before {
        width: 4px;
        height: 4px;

        top: 3px;
        right: 3px;
    }


    /* joues */

    .pss2-shark-head::before,
    .pss2-shark-head::after {
        width: 9px;
        height: 5px;
    }


    /* aileron */

    .pss2-shark-fin {
        top: 1%;
        left: 37%;

        width: 30%;
        height: 36%;
    }


    /* bouche et dents */

    .pss2-shark-mouth {
        width: 25px;
        height: 11px;
    }

    .pss2-shark-teeth {
        width: 25px;
    }


    /* nombre */

    .pss2-shark-number {
        bottom: -26px;

        min-width: 42px;

        padding:
            2px
            3px;

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


    /* sous-marin */

    .pss2-submarine-wrap {
        bottom: 8%;

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


    /* crevette prête */

    .pss2-ready-shrimp {
        left:
            calc(
                50% - 10px
            );

        top: -20px;

        font-size: 28px;
    }


    /* projectile */

    .pss2-projectile {
        bottom: 11%;

        animation-duration: .86s;
    }

    .pss2-shrimp-shot {
        font-size: 30px;
    }


    /* aide */

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


    /* résultats */

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

        border-radius: 20px;
    }

    .pss2-results-heading {
        gap: 5px;

        margin-bottom: 12px;
    }

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

    .pss2-results-icon {
        font-size: 19px;
    }

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

        margin-bottom: 12px;
    }

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

        padding:
            8px
            4px;
    }

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

        font-size: 16px;
    }

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

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

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

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

        gap: 5px;

        min-height: 48px;

        padding:
            7px
            6px;

        border-radius: 12px;
    }

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

        font-size: 17px;
    }

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

        font-size: 14px;

        white-space: nowrap;
    }

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

        flex-basis: 18px;

        font-size: 8px;
    }

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

        font-size: 15px;

        white-space: nowrap;
    }

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

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

        font-size: 11px;
    }

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

        margin-top: 14px;

        padding:
            8px
            13px;

        font-size: 12px;
    }
}


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

@media (max-width: 360px) {

    .pss2-shark-number {
        min-width: 36px;

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

    .pss2-ready-shrimp {
        font-size: 25px;
    }

    .pss2-shrimp-shot {
        font-size: 27px;
    }

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

        gap: 3px;
    }

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

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


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

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

    #peeksee-subtraction-game-v2 *,
    #peeksee-subtraction-game-v2 *::before,
    #peeksee-subtraction-game-v2 *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}