* {
    box-sizing:
        border-box;
}


:root {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


body {
    margin:
        0;

    min-height:
        100vh;

    background:
        linear-gradient(
            180deg,
            #f6f5f1 0%,
            #ecebe6 100%
        );

    color:
        #202020;
}


button,
input {
    font:
        inherit;
}


button {
    -webkit-tap-highlight-color:
        transparent;
}


.game {
    width:
        min(
            760px,
            calc(
                100% - 32px
            )
        );

    margin:
        0 auto;

    padding:
        48px
        0
        80px;
}


/* ==========================================================
   HEADER
   ========================================================== */

.game-header {
    margin-bottom:
        30px;

    text-align:
        center;
}


.logo-mark {
    margin-bottom:
        10px;

    font-size:
        38px;
}


.game-header h1 {
    margin:
        0;

    font-size:
        clamp(
            42px,
            9vw,
            68px
        );

    line-height:
        0.95;

    letter-spacing:
        -0.06em;
}


.subtitle {
    max-width:
        520px;

    margin:
        16px
        auto
        0;

    color:
        #686868;

    font-size:
        16px;

    line-height:
        1.55;
}


/* ==========================================================
   GAME PANEL
   ========================================================== */

.game-panel {
    padding:
        24px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.06
        );

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0
        14px
        45px
        rgba(
            0,
            0,
            0,
            0.07
        );
}


.game-stats {
    display:
        grid;

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

    gap:
        12px;

    margin-bottom:
        24px;
}


.stat {
    padding:
        12px
        14px;

    border-radius:
        12px;

    background:
        #f5f5f2;
}


.stat-label {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #777;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}


.stat strong {
    font-size:
        16px;
}


@media (
    max-width: 560px
) {

    .game-stats {
        grid-template-columns:
            1fr
            1fr;
    }


    .stat-solvers {
        grid-column:
            1
            / -1;
    }
}


label {
    display:
        block;

    margin-bottom:
        8px;

    font-size:
        14px;

    font-weight:
        750;
}


.guess-line {
    display:
        flex;

    gap:
        10px;
}


.guess-line input {
    width:
        100%;

    min-width:
        0;

    padding:
        15px
        16px;

    border:
        2px solid
        #dededb;

    border-radius:
        11px;

    outline:
        none;

    background:
        #fff;

    transition:
        border-color
        0.15s ease,
        box-shadow
        0.15s ease;
}


.guess-line input:focus {
    border-color:
        #252525;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            0,
            0,
            0,
            0.06
        );
}


.guess-line input:disabled {
    background:
        #f1f1ef;

    color:
        #777;
}


.guess-line button {
    flex:
        0 0 auto;

    padding:
        0
        24px;

    border:
        0;

    border-radius:
        11px;

    background:
        #202020;

    color:
        #fff;

    font-weight:
        750;

    cursor:
        pointer;

    transition:
        transform
        0.12s ease,
        opacity
        0.12s ease;
}


.guess-line button:hover:not(:disabled) {
    transform:
        translateY(
            -1px
        );
}


.guess-line button:disabled {
    opacity:
        0.55;

    cursor:
        default;
}


.message {
    min-height:
        22px;

    margin-top:
        17px;

    font-size:
        14px;

    line-height:
        1.45;
}


.message-neutral {
    color:
        #666;
}


.message-warning {
    color:
        #8c5b00;
}


.message-error {
    color:
        #a52820;
}


.message-warm {
    color:
        #a74d00;
}


.message-hot {
    color:
        #c22e13;

    font-weight:
        650;
}


.message-success {
    color:
        #137333;

    font-weight:
        750;
}


/* ==========================================================
   VICTORY
   ========================================================== */

.victory-section[hidden] {
    display:
        none;
}


.victory-section {
    position:
        relative;

    margin-top:
        20px;

    overflow:
        hidden;

    border:
        2px solid
        #282828;

    border-radius:
        20px;

    background:
        #202020;

    color:
        #ffffff;

    box-shadow:
        0
        18px
        50px
        rgba(
            0,
            0,
            0,
            0.16
        );

    animation:
        victory-appear
        0.55s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.victory-glow {
    position:
        absolute;

    top:
        -160px;

    left:
        50%;

    width:
        420px;

    height:
        320px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                237,
                105,
                47,
                0.48
            )
            0%,
            rgba(
                242,
                161,
                59,
                0.18
            )
            38%,
            rgba(
                32,
                32,
                32,
                0
            )
            72%
        );

    pointer-events:
        none;

    transform:
        translateX(
            -50%
        );
}


.victory-content {
    position:
        relative;

    z-index:
        1;

    padding:
        30px
        28px
        28px;

    text-align:
        center;
}


.victory-icon {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    line-height:
        1;

    animation:
        victory-fire
        0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.victory-icon img {
    display:
        block;

    width:
        auto;

    height:
        62px;

    max-width:
        142px;

    object-fit:
        contain;
}


.victory-eyebrow {
    margin:
        14px
        0
        5px;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.victory-content h2 {
    margin:
        0;

    font-size:
        clamp(
            42px,
            9vw,
            68px
        );

    line-height:
        1;

    letter-spacing:
        -0.055em;

    overflow-wrap:
        anywhere;
}


.victory-game-label {
    margin:
        10px
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-size:
        12px;
}


.victory-separator {
    width:
        42px;

    height:
        2px;

    margin:
        24px
        auto;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.22
        );
}


.victory-result {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size:
        13px;
}


.victory-result strong {
    color:
        #ffffff;

    font-size:
        24px;

    letter-spacing:
        -0.025em;
}


.victory-next {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    margin-top:
        25px;

    padding:
        17px
        18px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.11
        );

    border-radius:
        13px;

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );
}


.victory-next-label {
    color:
        rgba(
            255,
            255,
            255,
            0.63
        );

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


.victory-countdown {
    margin-top:
        5px;

    font-size:
        clamp(
            29px,
            7vw,
            40px
        );

    font-variant-numeric:
        tabular-nums;

    letter-spacing:
        0.02em;
}


.victory-timezone {
    margin-top:
        3px;

    color:
        rgba(
            255,
            255,
            255,
            0.42
        );

    font-size:
        10px;
}


@keyframes victory-appear {

    from {
        opacity:
            0;

        transform:
            translateY(
                12px
            )
            scale(
                0.985
            );
    }

    to {
        opacity:
            1;

        transform:
            translateY(
                0
            )
            scale(
                1
            );
    }
}


@keyframes victory-fire {

    from {
        opacity:
            0;

        transform:
            translateY(
                8px
            )
            scale(
                0.7
            )
            rotate(
                -8deg
            );
    }

    to {
        opacity:
            1;

        transform:
            translateY(
                0
            )
            scale(
                1
            )
            rotate(
                0
            );
    }
}


/* ==========================================================
   LATEST
   ========================================================== */

.latest-section {
    margin-top:
        20px;

    overflow:
        hidden;

    border:
        2px solid
        #282828;

    border-radius:
        16px;

    background:
        #fff;

    box-shadow:
        0
        12px
        35px
        rgba(
            0,
            0,
            0,
            0.07
        );
}


.latest-title {
    padding:
        9px
        16px;

    background:
        #282828;

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.latest-row {
    min-height:
        76px !important;

    border-bottom:
        0 !important;
}


/* ==========================================================
   RESULTS
   ========================================================== */

.results {
    margin-top:
        20px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.06
        );

    border-radius:
        16px;

    background:
        #fff;

    box-shadow:
        0
        12px
        35px
        rgba(
            0,
            0,
            0,
            0.05
        );
}


.results-title {
    padding:
        14px
        16px;

    border-bottom:
        1px solid
        #ededeb;

    font-size:
        14px;

    font-weight:
        800;
}


.results-header,
.result-row {
    display:
        grid;

    grid-template-columns:
        64px
        minmax(
            120px,
            1fr
        )
        minmax(
            240px,
            1.7fr
        );

    gap:
        14px;

    align-items:
        center;
}


.results-header {
    padding:
        10px
        16px;

    background:
        #f1f1ef;

    color:
        #727272;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.result-row {
    position:
        relative;

    min-height:
        64px;

    padding:
        11px
        16px;

    border-bottom:
        1px solid
        #ededeb;
}


.result-row:last-child {
    border-bottom:
        0;
}


.is-winning-row {
    background:
        linear-gradient(
            90deg,
            rgba(
                255,
                242,
                221,
                0.68
            ),
            #ffffff
        );
}


/* ==========================================================
   ATTEMPT
   ========================================================== */

.attempt-column {
    display:
        flex;

    align-items:
        center;
}


.attempt-badge {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        38px;

    padding:
        5px
        8px;

    border-radius:
        999px;

    background:
        #f0f0ed;

    color:
        #727272;

    font-size:
        11px;

    font-weight:
        800;

    font-variant-numeric:
        tabular-nums;
}


.latest-row .attempt-badge {
    min-width:
        auto;

    background:
        #282828;

    color:
        #fff;
}


.is-winning-row .attempt-badge {
    background:
        #282828;

    color:
        #ffffff;
}


/*
Le dernier essai reste identifiable
à sa position réelle dans le classement.
*/

.is-latest-in-ranking::before {
    position:
        absolute;

    top:
        8px;

    bottom:
        8px;

    left:
        0;

    width:
        3px;

    border-radius:
        0
        999px
        999px
        0;

    background:
        #282828;

    content:
        "";
}


/* ==========================================================
   WORD
   ========================================================== */

.word {
    overflow:
        hidden;

    font-size:
        15px;

    font-weight:
        780;

    text-overflow:
        ellipsis;
}


.latest-row .word {
    font-size:
        18px;
}


.word-pos {
    margin-top:
        3px;

    color:
        #8a8a8a;

    font-size:
        11px;
}


/* ==========================================================
   HEAT
   ========================================================== */

.heat-column {
    min-width:
        0;
}


.heat-top-line {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        7px;
}


.heat-label {
    overflow:
        hidden;

    font-size:
        13px;

    font-weight:
        680;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.latest-row .heat-label {
    font-size:
        14px;
}


.numeric-score {
    flex:
        0 0 auto;

    color:
        #8a8a8a;

    font-size:
        11px;

    font-variant-numeric:
        tabular-nums;
}


/* ==========================================================
   THERMAL PROGRESS
   ========================================================== */

.progress {
    position:
        relative;

    width:
        100%;

    height:
        10px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #e6e8e9;
}


.latest-row .progress {
    height:
        12px;
}


/*
Le dégradé occupe TOUJOURS 100 % de la barre.

On ne réduit pas sa largeur.

On utilise clip-path dans JS pour en révéler uniquement
la partie correspondant au score.
*/

.progress-bar {
    position:
        absolute;

    inset:
        0;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,

            #3f7dd9 0%,

            #47a9e8 18%,

            #f1d34f 48%,

            #f2a13b 67%,

            #ed692f 82%,

            #dc3027 92%,

            #b91919 100%
        );

    clip-path:
        inset(
            0
            100%
            0
            0
        );

    transition:
        clip-path
        0.9s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* ==========================================================
   ACTIONS
   ========================================================== */

.game-actions {
    display:
        flex;

    justify-content:
        center;

    margin-top:
        20px;
}


.reset-button {
    padding:
        9px
        13px;

    border:
        1px solid
        #d5d5d0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #777;

    font-size:
        12px;

    cursor:
        pointer;
}


.reset-button:hover {
    border-color:
        #999;

    color:
        #222;
}


.alpha-note {
    margin:
        20px
        auto
        0;

    color:
        #999;

    font-size:
        11px;

    text-align:
        center;
}


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

@media (
    max-width: 600px
) {

    .game {
        width:
            calc(
                100% - 20px
            );

        padding-top:
            28px;
    }


    .game-header {
        margin-bottom:
            24px;
    }


    .game-panel {
        padding:
            18px;
    }


    .guess-line {
        flex-direction:
            column;
    }


    .guess-line button {
        padding:
            14px;
    }


    .victory-content {
        padding:
            25px
            18px
            20px;
    }


    .victory-icon img {
        height:
            54px;

        max-width:
            126px;
    }


    .victory-separator {
        margin:
            20px
            auto;
    }


    .victory-next {
        margin-top:
            20px;

        padding:
            15px;
    }


    .results-header,
    .result-row {
        grid-template-columns:
            42px
            minmax(
                78px,
                0.9fr
            )
            minmax(
                130px,
                1.5fr
            );

        gap:
            8px;
    }


    .results-header {
        padding:
            9px
            10px;

        font-size:
            9px;
    }


    .result-row {
        padding:
            10px;
    }


    .latest-title {
        padding:
            9px
            11px;
    }


    .attempt-badge {
        min-width:
            32px;

        padding:
            4px
            6px;

        font-size:
            10px;
    }


    .latest-row .attempt-badge {
        font-size:
            9px;
    }


    .word {
        font-size:
            13px;
    }


    .latest-row .word {
        font-size:
            15px;
    }


    .heat-label {
        font-size:
            11px;
    }


    .latest-row .heat-label {
        font-size:
            12px;
    }


    .numeric-score {
        display:
            none;
    }


    .word-pos {
        font-size:
            10px;
    }
}

/* ==========================================================
   Motmaître brand
   ========================================================== */

.logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0 auto 12px;
    background: none;
}

.brand-logo-image {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 18px;
}

@media (max-width: 600px) {
    .brand-logo-image {
        width: 62px;
        height: 62px;
        border-radius: 16px;
    }
}

/* ==========================================================
   Motmètre — animation plus progressive
   ========================================================== */

.progress-bar {
    transition:
        clip-path 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition-duration: 0.01ms;
    }
}

/* MOTMAITRE_V3_COMPACT_METER_START */

.result-row {
    grid-template-columns:
        minmax(72px, 92px)
        minmax(130px, 1.15fr)
        minmax(320px, 2.4fr) !important;
    align-items: center !important;
    column-gap: 14px !important;
    min-height: 0 !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

.latest-row {
    min-height: 0 !important;
}

.word-column,
.heat-column {
    min-width: 0;
}

.word {
    line-height: 1.05 !important;
}

.word-pos {
    margin-top: 3px !important;
    line-height: 1 !important;
}

.heat-column {
    display: block !important;
}

.heat-meter-line {
    display: grid;
    grid-template-columns:
        minmax(108px, max-content)
        58px
        minmax(90px, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.heat-temperature {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.numeric-score {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.heat-label {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 20px;
    margin: 0 !important;
    white-space: nowrap;
}

.progression-value {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.progress {
    width: 100% !important;
    min-width: 0;
    height: 14px !important;
    margin: 0 !important;
    border-radius: 5px !important;
    overflow: hidden;
}

.progress-bar {
    border-radius: 5px !important;
}

#message[hidden] {
    display: none !important;
}

@media (max-width: 700px) {
    .result-row {
        grid-template-columns:
            58px
            minmax(78px, 0.85fr)
            minmax(165px, 1.7fr) !important;
        column-gap: 7px !important;
        padding: 9px 9px !important;
    }

    .attempt-badge {
        font-size: 11px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
        white-space: nowrap;
    }

    .word {
        font-size: 15px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .word-pos {
        font-size: 10px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .heat-meter-line {
        grid-template-columns:
            minmax(73px, max-content)
            42px
            minmax(48px, 1fr);
        gap: 5px;
    }

    .numeric-score {
        font-size: 11px !important;
    }

    .heat-label {
        min-width: 16px;
        font-size: 14px !important;
    }

    .progression-value {
        font-size: 11px !important;
    }

    .progress {
        height: 11px !important;
    }
}

@media (max-width: 420px) {
    .result-row {
        grid-template-columns:
            54px
            minmax(72px, 0.8fr)
            minmax(155px, 1.65fr) !important;
        column-gap: 5px !important;
    }

    .heat-meter-line {
        grid-template-columns:
            minmax(68px, max-content)
            38px
            minmax(42px, 1fr);
        gap: 4px;
    }

    .numeric-score,
    .progression-value {
        font-size: 10px !important;
    }
}

/* MOTMAITRE_V3_COMPACT_METER_END */

/* MOTMAITRE_V3_MOBILE_BALANCE_START */

/*
Mobile :
- récupère de la largeur pour la barre ;
- garde °C + emoji compacts ;
- garde le ‰ lisible ;
- laisse davantage de place au mot ;
- même grille pour l'en-tête et les résultats.
*/

@media (max-width: 700px) {

    .result-row,
    .results-header {
        grid-template-columns:
            52px
            minmax(105px, 0.9fr)
            minmax(225px, 2fr) !important;
        column-gap: 6px !important;
    }

    .heat-meter-line {
        grid-template-columns:
            max-content
            42px
            minmax(100px, 1fr) !important;
        gap: 4px !important;
    }

    .heat-temperature {
        display: grid !important;
        grid-template-columns:
            max-content
            18px;
        align-items: center;
        gap: 2px !important;
        width: max-content !important;
        min-width: 0 !important;
    }

    .numeric-score {
        display: inline !important;
        visibility: visible !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .heat-label {
        display: inline-flex !important;
        width: 18px !important;
        min-width: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .progression-value {
        width: 42px !important;
        min-width: 42px !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .progress {
        min-width: 100px !important;
        width: 100% !important;
    }
}


@media (max-width: 480px) {

    .result-row,
    .results-header {
        grid-template-columns:
            48px
            minmax(88px, 0.8fr)
            minmax(190px, 1.9fr) !important;
        column-gap: 4px !important;
    }

    .heat-meter-line {
        grid-template-columns:
            max-content
            38px
            minmax(78px, 1fr) !important;
        gap: 3px !important;
    }

    .numeric-score {
        font-size: 9.5px !important;
    }

    .heat-label {
        width: 16px !important;
        min-width: 16px !important;
        font-size: 13px !important;
    }

    .progression-value {
        width: 38px !important;
        min-width: 38px !important;
        font-size: 10px !important;
    }

    .progress {
        min-width: 78px !important;
    }
}


@media (max-width: 360px) {

    .result-row,
    .results-header {
        grid-template-columns:
            44px
            minmax(74px, 0.72fr)
            minmax(156px, 1.8fr) !important;
        column-gap: 3px !important;
    }

    .heat-meter-line {
        grid-template-columns:
            max-content
            34px
            minmax(60px, 1fr) !important;
        gap: 2px !important;
    }

    .numeric-score {
        font-size: 8.5px !important;
    }

    .heat-label {
        width: 15px !important;
        min-width: 15px !important;
        font-size: 12px !important;
    }

    .progression-value {
        width: 34px !important;
        min-width: 34px !important;
        font-size: 9px !important;
    }

    .progress {
        min-width: 60px !important;
    }
}

/* MOTMAITRE_V3_MOBILE_BALANCE_END */

/* MOTMAITRE_ALIGNED_METER_HEADERS_START */

.results-header {
    align-items: center !important;
}

.results-header > span,
.results-meter-header > span {
    color: inherit !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.results-meter-header {
    display: grid !important;
    grid-template-columns:
        94px
        58px
        minmax(90px, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.results-meter-title {
    grid-column: 1 !important;
    justify-self: start !important;
}

.results-progress-title {
    grid-column: 2 / 4 !important;
    justify-self: start !important;
}

.heat-temperature {
    display: grid !important;
    grid-template-columns:
        5.25ch
        20px !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 6px !important;
    width: 94px !important;
    min-width: 94px !important;
}

.numeric-score {
    display: block !important;
    width: 5.25ch !important;
    min-width: 5.25ch !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

.heat-label {
    display: inline-flex !important;
    width: 20px !important;
    min-width: 20px !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.heat-meter-line {
    grid-template-columns:
        94px
        58px
        minmax(90px, 1fr) !important;
    gap: 10px !important;
}

.progress-bar {
    background:
        linear-gradient(
            90deg,
            #2f80ed 0%,
            #ffd84d 55%,
            #ff9a3c 78%,
            #e53935 100%
        ) !important;
}

@media (max-width: 700px) {

    .results-header > span,
    .results-meter-header > span {
        font-size: 9px !important;
        letter-spacing: 0.045em !important;
    }

    .results-meter-header,
    .heat-meter-line {
        grid-template-columns:
            72px
            42px
            minmax(100px, 1fr) !important;
        gap: 4px !important;
    }

    .heat-temperature {
        grid-template-columns:
            5.25ch
            17px !important;
        gap: 3px !important;
        width: 72px !important;
        min-width: 72px !important;
    }

    .numeric-score {
        width: 5.25ch !important;
        min-width: 5.25ch !important;
        text-align: right !important;
    }

    .heat-label {
        width: 17px !important;
        min-width: 17px !important;
    }
}

@media (max-width: 480px) {

    .results-header > span,
    .results-meter-header > span {
        font-size: 8px !important;
        letter-spacing: 0.02em !important;
    }

    .results-meter-header,
    .heat-meter-line {
        grid-template-columns:
            66px
            38px
            minmax(78px, 1fr) !important;
        gap: 3px !important;
    }

    .heat-temperature {
        grid-template-columns:
            5.25ch
            15px !important;
        gap: 2px !important;
        width: 66px !important;
        min-width: 66px !important;
    }

    .heat-label {
        width: 15px !important;
        min-width: 15px !important;
    }
}

@media (max-width: 360px) {

    .results-header > span,
    .results-meter-header > span {
        font-size: 7px !important;
        letter-spacing: 0 !important;
    }

    .results-meter-header,
    .heat-meter-line {
        grid-template-columns:
            61px
            34px
            minmax(60px, 1fr) !important;
        gap: 2px !important;
    }

    .heat-temperature {
        grid-template-columns:
            5.25ch
            14px !important;
        gap: 1px !important;
        width: 61px !important;
        min-width: 61px !important;
    }

    .heat-label {
        width: 14px !important;
        min-width: 14px !important;
    }
}

/* MOTMAITRE_ALIGNED_METER_HEADERS_END */

/* MOTMAITRE_FINAL_HEADER_GAP_GRADIENT_START */

/*
1) Donne un vrai espace visuel entre MOTMÈTRE °C et PROGRESSION ‰
sans modifier l'alignement des valeurs.
*/

.results-progress-title {
    padding-left: 18px !important;
}


/*
2) Dégradé final plus net :
bleu → jaune → orange → rouge.
Les transitions sont volontairement courtes afin d'éviter
la grande zone vert/gris obtenue naturellement entre bleu et jaune.
*/

.progress-bar {
    background-color: transparent !important;
    background-image:
        linear-gradient(
            90deg,
            #2f80ed 0%,
            #2f80ed 30%,
            #ffd84d 36%,
            #ffd84d 58%,
            #ff9a3c 68%,
            #ff9a3c 82%,
            #e53935 90%,
            #e53935 100%
        ) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}


/*
Neutralise un éventuel ancien fond hérité sur des pseudo-éléments.
*/

.progress-bar::before,
.progress-bar::after {
    background: none !important;
    background-image: none !important;
}


@media (max-width: 700px) {
    .results-progress-title {
        padding-left: 8px !important;
    }
}


@media (max-width: 480px) {
    .results-progress-title {
        padding-left: 6px !important;
    }
}


@media (max-width: 360px) {
    .results-progress-title {
        padding-left: 4px !important;
    }
}

/* MOTMAITRE_FINAL_HEADER_GAP_GRADIENT_END */

/* MOTMAITRE_HOT_YELLOW_GRADIENT_START */

/*
Couleurs du Motmètre :
- un mot dans le top sémantique (progression affichée) commence directement
  par le jaune puis passe progressivement à l'orange et au rouge ;
- le bleu reste réservé aux états froids / frais / glacés.
*/

/* Mot qui commence à chauffer : JAUNE → ORANGE → ROUGE */
.result-row:has(.progression-value:not(:empty)) .progress-bar {
    background:
        linear-gradient(
            90deg,
            #f6d84a 0%,
            #f8c84a 26%,
            #f5a442 52%,
            #ef7f36 73%,
            #e95732 88%,
            #dc2f2f 100%
        ) !important;
}

/* Mot froid / frais / glacé : BLEU uniquement */
.result-row:not(:has(.progression-value:not(:empty))) .progress-bar {
    background:
        linear-gradient(
            90deg,
            #8ec5ff 0%,
            #64a9f3 45%,
            #3f86df 72%,
            #2563b8 100%
        ) !important;
}

/* Même logique dans le bloc DERNIER ESSAI */
.latest-row:has(.progression-value:not(:empty)) .progress-bar {
    background:
        linear-gradient(
            90deg,
            #f6d84a 0%,
            #f8c84a 26%,
            #f5a442 52%,
            #ef7f36 73%,
            #e95732 88%,
            #dc2f2f 100%
        ) !important;
}

.latest-row:not(:has(.progression-value:not(:empty))) .progress-bar {
    background:
        linear-gradient(
            90deg,
            #8ec5ff 0%,
            #64a9f3 45%,
            #3f86df 72%,
            #2563b8 100%
        ) !important;
}

/* MOTMAITRE_HOT_YELLOW_GRADIENT_END */

/* MOTMAITRE_MOBILE_BAR_BALANCE_V4_START */

@media (max-width: 700px) {

    /*
    Rééquilibrage volontairement plus visible que la V3 :
    on récupère ~25–35 px pour le Motmètre selon la largeur écran.
    L'autofit JS V2 protège toujours les mots longs.
    */
    .result-row,
    .results-header {
        grid-template-columns:
            46px
            minmax(88px, 0.82fr)
            minmax(210px, 1.90fr) !important;

        column-gap: 3px !important;
    }

    .result-row {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }


    /*
    Température / emoji / progression plus compacts,
    pour envoyer le maximum d'espace utile à la barre.
    */
    .heat-meter-line {
        grid-template-columns:
            49px
            32px
            minmax(105px, 1fr) !important;

        gap: 2px !important;
    }

    .heat-temperature {
        display: grid !important;

        grid-template-columns:
            30px
            17px !important;

        align-items: center !important;
        justify-content: start !important;

        gap: 2px !important;

        width: 49px !important;
        min-width: 49px !important;
        max-width: 49px !important;
    }


    /*
    Les °C et les ‰ sont strictement identiques :
    même taille, même graisse, même line-height.
    */
    .numeric-score,
    .progression-value {
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;

        font-variant-numeric: tabular-nums;
        white-space: nowrap !important;
    }

    .numeric-score {
        width: 30px !important;
        min-width: 30px !important;

        text-align: right !important;
    }

    .heat-label {
        width: 17px !important;
        min-width: 17px !important;
        max-width: 17px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 13px !important;
        line-height: 1 !important;
    }

    .progression-value {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;

        text-align: right !important;
    }

    .progress {
        min-width: 105px !important;
        width: 100% !important;
    }


    /*
    Le mot ne se coupe jamais :
    l'autofit existant réduit uniquement si nécessaire.
    */
    .result-row .word-column {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .result-row .word {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}


@media (max-width: 400px) {

    .result-row,
    .results-header {
        grid-template-columns:
            42px
            minmax(84px, 0.78fr)
            minmax(200px, 1.95fr) !important;

        column-gap: 3px !important;
    }

    .result-row {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .heat-meter-line {
        grid-template-columns:
            48px
            31px
            minmax(92px, 1fr) !important;

        gap: 2px !important;
    }

    .heat-temperature {
        grid-template-columns:
            29px
            17px !important;

        gap: 2px !important;

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

    .numeric-score,
    .progression-value {
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    .numeric-score {
        width: 29px !important;
        min-width: 29px !important;
    }

    .heat-label {
        width: 17px !important;
        min-width: 17px !important;
        max-width: 17px !important;

        font-size: 13px !important;
    }

    .progression-value {
        width: 31px !important;
        min-width: 31px !important;
        max-width: 31px !important;
    }

    .progress {
        min-width: 92px !important;
    }
}


@media (max-width: 350px) {

    .result-row,
    .results-header {
        grid-template-columns:
            40px
            minmax(80px, 0.76fr)
            minmax(184px, 1.90fr) !important;

        column-gap: 2px !important;
    }

    .heat-meter-line {
        grid-template-columns:
            45px
            29px
            minmax(76px, 1fr) !important;

        gap: 2px !important;
    }

    .heat-temperature {
        grid-template-columns:
            27px
            16px !important;

        gap: 2px !important;

        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
    }

    .numeric-score,
    .progression-value {
        font-size: 10px !important;
        font-weight: 700 !important;
    }

    .numeric-score {
        width: 27px !important;
        min-width: 27px !important;
    }

    .heat-label {
        width: 16px !important;
        min-width: 16px !important;
        max-width: 16px !important;

        font-size: 12px !important;
    }

    .progression-value {
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
    }

    .progress {
        min-width: 76px !important;
    }
}

/* MOTMAITRE_MOBILE_BAR_BALANCE_V4_END */

/* MOTMAITRE_MOBILE_S22_LAYOUT_V8_START */

/*
Desktop :
- ESSAI reste affiché ;
- les badges restent #1, #2, #3...
Aucune règle desktop ci-dessous.
*/


@media (max-width: 700px) {

    /*
    Mobile :
    le libellé desktop ESSAI reste dans le HTML,
    mais on affiche N° sans modifier le desktop.
    */
    .results-header > span:first-child {
        font-size: 0 !important;
    }

    .results-header > span:first-child::after {
        content: "N°";

        font-size: 8px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: 0.02em !important;
    }


    /*
    Le DOM conserve #17 pour le desktop.
    Sur mobile on affiche uniquement data-attempt="17".
    */
    .attempt-badge {
        font-size: 0 !important;
    }

    .attempt-badge::after {
        content: attr(data-attempt);

        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }


    /*
    Grille mobile.
    Le dernier track utilise minmax(0, ...) :
    il ne peut donc plus forcer la ligne à dépasser de la carte.
    C'est ce qui garantit la marge droite sur S22.
    */
    .result-row,
    .results-header {
        grid-template-columns:
            30px
            minmax(88px, 0.88fr)
            minmax(0, 2.06fr) !important;

        column-gap: 3px !important;

        box-sizing: border-box !important;
    }

    .result-row {
        padding-left: 8px !important;
        padding-right: 14px !important;
    }

    .latest-row {
        padding-right: 17px !important;
    }


    /*
    Colonne N° réellement compacte.
    */
    .attempt-column {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
    }

    .attempt-badge {
        min-width: 27px !important;
        height: 27px !important;

        padding: 0 4px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;
    }


    /*
    Les mots sont petits sur mobile :
    600 est plus lisible que le gras très fort actuel.
    L'autofit existant continue de réduire uniquement les mots longs.
    */
    .result-row .word {
        font-weight: 600 !important;
    }


    /*
    Motmètre :
    largeur sûre pour 55,32 + emoji,
    puis progression compacte,
    puis la barre prend TOUT l'espace restant.
    Aucun min-width rigide sur la barre = aucun débordement à droite.
    */
    .heat-column,
    .heat-meter-line,
    .progress {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .heat-column {
        padding-right: 2px !important;
    }

    .latest-row .heat-column {
        padding-right: 3px !important;
    }

    .heat-meter-line {
        grid-template-columns:
            58px
            31px
            minmax(0, 1fr) !important;

        gap: 2px !important;

        width: 100% !important;
    }

    .heat-temperature {
        display: grid !important;

        grid-template-columns:
            36px
            19px !important;

        align-items: center !important;
        justify-content: start !important;

        gap: 3px !important;

        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
    }

    .numeric-score,
    .progression-value {
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        font-variant-numeric: tabular-nums;
        white-space: nowrap !important;
    }

    .numeric-score {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;

        text-align: right !important;
    }

    .heat-label {
        width: 19px !important;
        min-width: 19px !important;
        max-width: 19px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 14px !important;
        line-height: 1 !important;
    }

    .progression-value {
        width: 31px !important;
        min-width: 31px !important;
        max-width: 31px !important;

        text-align: right !important;
    }

    .progress {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
    }
}


@media (max-width: 400px) {

    .result-row,
    .results-header {
        grid-template-columns:
            28px
            minmax(84px, 0.86fr)
            minmax(0, 2.12fr) !important;

        column-gap: 2px !important;
    }

    .result-row {
        padding-left: 7px !important;
        padding-right: 13px !important;
    }

    .latest-row {
        padding-right: 17px !important;
    }

    .attempt-column {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
    }

    .attempt-badge {
        min-width: 25px !important;
        height: 25px !important;

        padding: 0 3px !important;
    }

    .attempt-badge::after {
        font-size: 9.5px !important;
    }

    .heat-meter-line {
        grid-template-columns:
            56px
            30px
            minmax(0, 1fr) !important;
    }

    .heat-temperature {
        grid-template-columns:
            35px
            18px !important;

        gap: 3px !important;

        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
    }

    .numeric-score,
    .progression-value {
        font-size: 10.5px !important;
    }

    .numeric-score {
        width: 35px !important;
        min-width: 35px !important;
        max-width: 35px !important;
    }

    .heat-label {
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;

        font-size: 13px !important;
    }

    .progression-value {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
    }
}


@media (max-width: 350px) {

    .result-row,
    .results-header {
        grid-template-columns:
            27px
            minmax(80px, 0.84fr)
            minmax(0, 2.14fr) !important;
    }

    .result-row {
        padding-right: 11px !important;
    }

    .latest-row {
        padding-right: 14px !important;
    }

    .attempt-column {
        width: 27px !important;
        min-width: 27px !important;
        max-width: 27px !important;
    }

    .attempt-badge {
        min-width: 24px !important;
        height: 24px !important;
    }

    .attempt-badge::after {
        font-size: 9px !important;
    }

    .heat-meter-line {
        grid-template-columns:
            53px
            28px
            minmax(0, 1fr) !important;
    }

    .heat-temperature {
        grid-template-columns:
            33px
            17px !important;

        width: 53px !important;
        min-width: 53px !important;
        max-width: 53px !important;
    }

    .numeric-score,
    .progression-value {
        font-size: 10px !important;
    }

    .numeric-score {
        width: 33px !important;
        min-width: 33px !important;
        max-width: 33px !important;
    }

    .heat-label {
        width: 17px !important;
        min-width: 17px !important;
        max-width: 17px !important;

        font-size: 12px !important;
    }

    .progression-value {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
    }
}

/* MOTMAITRE_MOBILE_S22_LAYOUT_V8_END */

/* MOTMAITRE_MOBILE_UNIFORM_RESPONSIVE_V12_START */

@media (max-width: 700px) {

    /*
    Même taille pour TOUS les mots d'un même écran,
    mais adaptation fluide à la largeur du téléphone.

    Exemples approximatifs :
    - 320px : 12px
    - 360px : 12.4px
    - 390px : 13.45px
    - >= 400px : plafonné à 13.5px

    Aucun redimensionnement mot par mot.
    */
    .result-row .word,
    .latest-row .word {
        font-size: clamp(12px, 3.45vw, 13.5px) !important;
        font-weight: 600 !important;
        line-height: 1.05 !important;
        letter-spacing: -0.025em !important;

        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;

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

        margin: 0 !important;
    }


    /*
    POS toujours masqués sur mobile.
    */
    .word-pos {
        display: none !important;
    }


    /*
    Quelques pixels supplémentaires rendus au mot,
    sans sacrifier la barre.
    */
    .result-row,
    .results-header {
        grid-template-columns:
            30px
            minmax(102px, 0.98fr)
            minmax(0, 1.98fr) !important;

        column-gap: 3px !important;
    }


    /*
    Plus compact en hauteur maintenant qu'il n'y a plus
    de seconde ligne NOM / VERBE / ADJ.
    */
    .result-row {
        min-height: 41px !important;
        height: auto !important;

        padding-top: 3px !important;
        padding-bottom: 3px !important;

        align-items: center !important;
    }

    .latest-row {
        min-height: 41px !important;
        height: auto !important;

        padding-top: 3px !important;
        padding-bottom: 3px !important;

        align-items: center !important;
    }

    .result-row .word-column,
    .latest-row .word-column {
        display: flex !important;
        align-items: center !important;

        min-height: 21px !important;
        min-width: 0 !important;

        overflow: hidden !important;
    }


    /*
    Correction Android emoji conservée.
    */
    .heat-column,
    .heat-meter-line,
    .heat-temperature,
    .heat-label {
        overflow: visible !important;
    }

    .heat-meter-line,
    .heat-temperature {
        align-items: center !important;
    }

    .heat-temperature {
        min-height: 23px !important;
    }

    .heat-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        height: 21px !important;
        min-height: 21px !important;
        line-height: 21px !important;

        padding-top: 1px !important;
        padding-bottom: 1px !important;

        box-sizing: content-box !important;
        vertical-align: middle !important;
    }

    .numeric-score {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        min-height: 21px !important;
        line-height: 21px !important;
    }
}


@media (max-width: 430px) {

    /*
    Zone typique Galaxy S22 / iPhone / Pixel :
    taille autour de 12–13px selon le viewport réel.
    */
    .result-row,
    .results-header {
        grid-template-columns:
            28px
            minmax(100px, 0.98fr)
            minmax(0, 2fr) !important;

        column-gap: 2px !important;
    }

    .result-row,
    .latest-row {
        min-height: 40px !important;

        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
}


@media (max-width: 360px) {

    .result-row .word,
    .latest-row .word {
        font-size: 12px !important;
        letter-spacing: -0.03em !important;
    }

    .result-row,
    .results-header {
        grid-template-columns:
            27px
            minmax(94px, 0.96fr)
            minmax(0, 2.02fr) !important;
    }

    .result-row,
    .latest-row {
        min-height: 39px !important;
    }
}

/* MOTMAITRE_MOBILE_UNIFORM_RESPONSIVE_V12_END */

/* MOTMAITRE_HEADER_INFO_V13_START */

.game-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 24px !important;
    text-align: left !important;
}

.brand-lockup {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.brand-copy {
    min-width: 0;
}
.brand-lockup h1 {
    margin: 0 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
    text-transform: none !important;
}

.brand-lockup .subtitle {
    margin: 6px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
}

.game-header .header-actions {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
}

.game-header .header-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

.game-header .header-icon-button svg {
    width: 19px !important;
    height: 19px !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 701px) {
    .numeric-score,
    .progression-value {
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        font-variant-numeric: tabular-nums;
    }

    .heat-temperature {
        grid-template-columns: 5.25ch 23px !important;
        gap: 5px !important;
        width: 82px !important;
        min-width: 82px !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .heat-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 23px !important;
        min-width: 23px !important;
        max-width: 23px !important;
        height: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 20px !important;
        line-height: 28px !important;
        overflow: visible !important;
    }
}

.game-info-dialog {
    width: min(590px, calc(100vw - 32px));
    max-width: 590px;
    max-height: min(82vh, 760px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: #ffffff;
    color: #222222;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.game-info-dialog::backdrop {
    background: rgba(22, 22, 22, 0.58);
    backdrop-filter: blur(3px);
}

.game-info-shell {
    max-height: min(82vh, 760px);
    overflow: auto;
    overscroll-behavior: contain;
}

.game-info-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 24px 18px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    backdrop-filter: blur(10px);
}

.game-info-eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #777777;
}

.game-info-header h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.game-info-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f0f0ee;
    color: #222222;
    font: inherit;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.game-info-content {
    display: grid;
    gap: 22px;
    padding: 22px 24px 26px;
}

.game-info-lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #444444;
}

.game-info-section {
    display: grid;
    gap: 12px;
}

.game-info-section h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}

.game-info-section p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #5f5f5f;
}

.meaning-map {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    overflow-x: auto;
    padding: 2px 0 4px;
    scrollbar-width: none;
}

.meaning-map::-webkit-scrollbar {
    display: none;
}

.meaning-chip {
    flex: 0 0 auto;
    padding: 7px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.meaning-chip-cold {
    background: #dceeff;
    color: #28659c;
}

.meaning-chip-warm {
    background: #fff0a8;
    color: #775b00;
}

.meaning-chip-hot {
    background: #ffd0a2;
    color: #8b430e;
}

.meaning-chip-secret {
    background: #242424;
    color: #ffffff;
}

.meaning-arrow {
    flex: 0 0 auto;
    color: #a0a0a0;
    font-size: 13px;
}

.game-info-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.game-info-card {
    display: grid;
    gap: 5px;
    padding: 14px;
    border-radius: 16px;
    background: #f5f5f3;
}

.game-info-card strong {
    font-size: 13px;
}

.game-info-card span {
    font-size: 12px;
    line-height: 1.45;
    color: #666666;
}

.game-info-rules {
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 19px;
}

.game-info-rules li {
    padding-left: 2px;
    font-size: 13px;
    line-height: 1.45;
    color: #555555;
}

.game-info-note {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 16px;
    background: #fffdf5;
}

.game-info-note p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #5f5f5f;
}

@media (max-width: 700px) {
    .game-header {
        gap: 10px !important;
    }

    .brand-lockup {
        gap: 8px;
    }
.brand-lockup h1 {
        font-size: 20px !important;
    }

    .brand-lockup .subtitle {
        margin-top: 4px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.01em !important;
    }

    .game-header .header-actions {
        gap: 5px !important;
    }

    .game-header .header-icon-button {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .game-header .header-icon-button svg {
        width: 16px !important;
        height: 16px !important;
    }

    .game-info-dialog {
        width: calc(100vw - 20px);
        max-height: min(86vh, 760px);
        border-radius: 20px;
    }

    .game-info-shell {
        max-height: min(86vh, 760px);
    }

    .game-info-header {
        padding: 19px 18px 15px;
    }

    .game-info-header h2 {
        font-size: 22px;
    }

    .game-info-close {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 22px;
    }

    .game-info-content {
        gap: 18px;
        padding: 18px;
    }

    .game-info-lead {
        font-size: 14px;
        line-height: 1.45;
    }

    .game-info-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 370px) {
.brand-lockup h1 {
        font-size: 18px !important;
    }

    .brand-lockup .subtitle {
        font-size: 9px !important;
    }

    .game-header .header-actions {
        gap: 3px !important;
    }

    .game-header .header-icon-button {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
    }

    .game-header .header-icon-button svg {
        width: 15px !important;
        height: 15px !important;
    }
}

/* MOTMAITRE_HEADER_INFO_V13_END */

/* MOTMAITRE_REAL_LOGO_V14_START */

/*
Le visuel du logo reste exactement celui qui existait avant V13.
On ne modifie ici que son placement dans le nouveau header.
*/
.brand-lockup .logo-mark {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin: 0 !important;
}

.brand-lockup .logo-mark img,
.brand-lockup .logo-mark svg {
    display: block;
    width: auto;
    max-width: 100%;
    height: 48px;
    max-height: 48px;
    object-fit: contain;
}

@media (max-width: 700px) {
    .brand-lockup .logo-mark img,
    .brand-lockup .logo-mark svg {
        height: 38px;
        max-height: 38px;
    }
}

@media (max-width: 370px) {
    .brand-lockup .logo-mark img,
    .brand-lockup .logo-mark svg {
        height: 34px;
        max-height: 34px;
    }
}

/* MOTMAITRE_REAL_LOGO_V14_END */

/* MOTMAITRE_INFO_REPLAY_V15_START */

/*
La frise précédente était horizontale avec overflow-x:auto.
Sur certaines largeurs, le dernier bloc « Mot secret » pouvait donc
être visuellement coupé. Ici : grille responsive, aucun débordement.
*/
.meaning-map {
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 8px !important;

    width: 100% !important;

    padding: 0 !important;

    overflow: visible !important;
}

.meaning-step {
    display: grid;
    grid-template-rows:
        auto
        auto
        auto;

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

    gap: 4px;

    min-width: 0;
    min-height: 88px;

    padding: 11px 8px;

    border-radius: 15px;

    text-align: center;
}

.meaning-step > span {
    font-size: 18px;
    line-height: 1;
}

.meaning-step strong {
    max-width: 100%;

    font-size: 12px;
    line-height: 1.1;

    white-space: normal;
}

.meaning-step small {
    max-width: 100%;

    font-size: 10px;
    line-height: 1.15;

    white-space: normal;

    opacity: 0.72;
}

.meaning-step-cold {
    background: #dceeff;
    color: #28659c;
}

.meaning-step-warm {
    background: #fff0a8;
    color: #775b00;
}

.meaning-step-hot {
    background: #ffd0a2;
    color: #8b430e;
}

.meaning-step-secret {
    background: #242424;
    color: #ffffff;
}


/*
Feedback discret quand l'utilisateur rejoue un mot existant.
On attire l'œil vers le bloc supérieur sans alerte agressive.
*/
#latest-section.is-replayed-guess {
    animation:
        motmaitre-replay-panel
        420ms
        ease-out;
}

#latest-section.is-replayed-guess .latest-title {
    letter-spacing: 0.035em;
}

@keyframes motmaitre-replay-panel {
    0% {
        transform: translateY(0);
    }

    38% {
        transform: translateY(-3px);
    }

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


@media (max-width: 700px) {

    .meaning-map {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .meaning-step {
        min-height: 76px;

        padding: 10px 7px;
    }

    .meaning-step strong {
        font-size: 11px;
    }

    .meaning-step small {
        font-size: 9.5px;
    }

    .game-info-section p {
        line-height: 1.5;
    }
}

/* MOTMAITRE_INFO_REPLAY_V15_END */

/* ==========================================================
   MOT-LAMBDA V16 — ADVENTURE / TOTEM HEADER
   ========================================================== */

.brand-lockup {
    align-items:
        center
        !important;

    gap:
        14px
        !important;
}


.brand-lockup .logo-mark {
    align-self:
        center
        !important;
}


.brand-lockup .logo-mark img,
.brand-lockup .logo-mark svg {
    height:
        58px
        !important;

    max-height:
        58px
        !important;

    width:
        58px
        !important;

    max-width:
        58px
        !important;

    border-radius:
        15px;

    object-fit:
        cover;

    box-shadow:
        0
        7px
        18px
        rgba(
            8,
            17,
            31,
            0.16
        );
}


.brand-lockup h1 {
    font-family:
        Copperplate,
        "Copperplate Gothic Bold",
        "Arial Black",
        "Trebuchet MS",
        sans-serif
        !important;

    font-size:
        32px
        !important;

    font-weight:
        800
        !important;

    line-height:
        0.96
        !important;

    letter-spacing:
        0.018em
        !important;

    text-transform:
        uppercase
        !important;

    color:
        #2b2925;

    text-shadow:
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.9
        ),
        0
        3px
        10px
        rgba(
            77,
            57,
            35,
            0.11
        );
}


.brand-lockup .subtitle {
    margin-top:
        7px
        !important;

    color:
        #77716a;

    font-size:
        12px
        !important;

    font-weight:
        650;

    letter-spacing:
        0.015em;
}


@media (
    max-width:
        700px
) {

    .brand-lockup {
        gap:
            10px
            !important;
    }


    .brand-lockup .logo-mark img,
    .brand-lockup .logo-mark svg {
        width:
            44px
            !important;

        max-width:
            44px
            !important;

        height:
            44px
            !important;

        max-height:
            44px
            !important;

        border-radius:
            12px;
    }


    .brand-lockup h1 {
        font-size:
            25px
            !important;

        letter-spacing:
            0.012em
            !important;
    }


    .brand-lockup .subtitle {
        margin-top:
            5px
            !important;

        font-size:
            10.5px
            !important;
    }
}


@media (
    max-width:
        370px
) {

    .brand-lockup .logo-mark img,
    .brand-lockup .logo-mark svg {
        width:
            40px
            !important;

        max-width:
            40px
            !important;

        height:
            40px
            !important;

        max-height:
            40px
            !important;
    }


    .brand-lockup h1 {
        font-size:
            22px
            !important;
    }
}

/* ==========================================================
   MOT-LAMBDA V17 — DARK TOTEM BADGE REFINEMENT
   ========================================================== */

.brand-lockup {
    gap:
        12px
        !important;
}


.brand-lockup .logo-mark {
    display:
        inline-flex
        !important;

    align-items:
        center
        !important;

    justify-content:
        center
        !important;

    padding:
        8px
        !important;

    border-radius:
        19px
        !important;

    background:
        linear-gradient(
            180deg,
            #07101d 0%,
            #0c1930 100%
        )
        !important;

    box-shadow:
        0
        10px
        24px
        rgba(
            7,
            16,
            29,
            0.18
        ),
        inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.08
        )
        !important;
}


.brand-lockup .logo-mark img,
.brand-lockup .logo-mark svg {
    height:
        52px
        !important;

    max-height:
        52px
        !important;

    width:
        52px
        !important;

    max-width:
        52px
        !important;

    border-radius:
        13px
        !important;

    object-fit:
        contain
        !important;

    box-shadow:
        none
        !important;
}


.brand-lockup h1 {
    margin-bottom:
        0
        !important;
}


.brand-lockup .subtitle {
    margin-top:
        2px
        !important;

    line-height:
        1.08
        !important;
}


@media (
    max-width:
        700px
) {

    .brand-lockup {
        gap:
            9px
            !important;
    }


    .brand-lockup .logo-mark {
        padding:
            6px
            !important;

        border-radius:
            15px
            !important;
    }


    .brand-lockup .logo-mark img,
    .brand-lockup .logo-mark svg {
        width:
            40px
            !important;

        max-width:
            40px
            !important;

        height:
            40px
            !important;

        max-height:
            40px
            !important;

        border-radius:
            10px
            !important;
    }


    .brand-lockup .subtitle {
        margin-top:
            1px
            !important;
    }
}