/* ==========================================================
   MOT-LAMBDA V28 — GROUP PLAY
   ========================================================== */

:root {
    --group-navy: #0d1d32;
    --group-navy-soft: #162d49;
    --group-gold: #efb34f;
    --group-gold-light: #ffd786;
    --group-border: rgba(13, 29, 50, 0.15);
}


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

#group-open-button.is-active {
    border-color: rgba(239, 179, 79, 0.65) !important;
    background: var(--group-navy) !important;
    color: #ffffff !important;
}

#group-open-button.is-active svg {
    stroke: var(--group-gold-light) !important;
}

.header-icon-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


/* ==========================================================
   SESSION BAR
   ========================================================== */

.group-session-bar[hidden] {
    display: none !important;
}

.group-session-bar {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin: 0 0 11px;
    padding: 7px 8px;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    border: 1px solid rgba(239, 179, 79, 0.38);
    border-radius: 7px;
    background: linear-gradient(118deg, #081421, #10243d);
    box-shadow: 0 7px 18px rgba(5, 16, 29, 0.12);
    color: #ffffff;
}

.group-session-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.group-session-emblem {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 215, 134, 0.34);
    border-radius: 4px;
    color: var(--group-gold-light);
    font-size: 10px;
}

.group-session-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.group-session-label {
    color: rgba(255, 255, 255, 0.58);
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.group-session-code {
    color: var(--group-gold-light);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.group-session-middle {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.group-session-online {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.62);
    font-size: 8.5px;
    font-weight: 750;
    white-space: nowrap;
}

.group-session-online::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #c4834e;
}

.group-session-online.is-connected::before {
    background: #72c796;
    box-shadow: 0 0 0 3px rgba(114, 199, 150, 0.12);
}

.group-session-participants {
    display: flex;
    min-width: 0;
    overflow: hidden;
    gap: 4px;
}

.group-session-actions {
    display: flex;
    gap: 5px;
}

.group-session-action {
    display: inline-flex;
    width: 30px;
    height: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    cursor: pointer;
}

.group-session-action:hover {
    background: rgba(255, 255, 255, 0.12);
}

.group-session-action svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}


/*
Bouton de sortie volontairement textuel : il doit rester
immédiatement identifiable, même sans ouvrir le gestionnaire.
*/
.group-session-leave {
    width: auto;
    min-width: 58px;
    padding: 0 9px;
    border-color: rgba(255, 171, 171, 0.34);
    background: rgba(162, 54, 54, 0.17);
    color: #ffd7d7;
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: 0.01em;
}

.group-session-leave:hover {
    border-color: rgba(255, 183, 183, 0.52);
    background: rgba(183, 58, 58, 0.27);
}


/*
Une archive jouée en équipe reste explicitement une archive.
On garde la plaque solo, mais on interdit le changement de
partie tant que le joueur appartient à la room.
*/
body.group-game-active.archive-game-active
.archive-return-button {
    display: none !important;
}

body.group-game-active.archive-game-active
.archive-mode-eyebrow::after {
    content: " · DESTINS LIÉS";
}

body.group-game-active.archive-game-active
.archive-mode-bar {
    margin-bottom: 11px;
}

.group-game-active .yesterday-word-card {
    display: none !important;
}

.group-game-active .game-actions {
    display: none !important;
}


/* ==========================================================
   PLAYER CHIPS
   ========================================================== */

.group-player-chip {
    display: inline-flex;
    max-width: 180px;
    min-height: 27px;
    padding: 0 8px;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--group-border);
    border-radius: 999px;
    background: #ffffff;
    color: #263244;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.group-player-chip.is-compact {
    min-height: 22px;
    padding: 0 6px;
    border-color: rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.075);
    color: rgba(255, 255, 255, 0.9);
    font-size: 8.5px;
}

.group-player-chip.is-self {
    font-weight: 900;
}

.group-player-chip.is-offline {
    opacity: 0.45;
}

.group-player-dot,
.group-author-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--group-player-color, #8a94a3);
}


/* ==========================================================
   COLORS — STABLE SERVER KEYS
   ========================================================== */

[data-group-color="coral"] {
    --group-player-color: #e66f5c;
}

[data-group-color="ocean"] {
    --group-player-color: #4b91c9;
}

[data-group-color="amber"] {
    --group-player-color: #d79b37;
}

[data-group-color="violet"] {
    --group-player-color: #8d74c9;
}

[data-group-color="teal"] {
    --group-player-color: #4aa59c;
}

[data-group-color="rose"] {
    --group-player-color: #c66f91;
}

[data-group-color="lime"] {
    --group-player-color: #88a84c;
}

[data-group-color="sky"] {
    --group-player-color: #69a9cc;
}

[data-group-color="indigo"] {
    --group-player-color: #6675b7;
}

[data-group-color="copper"] {
    --group-player-color: #ad7650;
}

[data-group-color="mint"] {
    --group-player-color: #63a985;
}

[data-group-color="plum"] {
    --group-player-color: #986c96;
}


/* ==========================================================
   AUTHOR IN RESULT ROW
   ========================================================== */

.group-word-meta {
    display: flex !important;
    min-width: 0;
    align-items: center;
    gap: 4px;
}

.group-author-name {
    max-width: 92px;
    overflow: hidden;
    color: #687284;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-author-pos {
    color: #9a9fa7;
}

.group-author-pos::before {
    content: "·";
    margin-right: 4px;
}


/* ==========================================================
   DIALOG
   ========================================================== */

.group-dialog {
    width: min(92vw, 470px);
    max-height: min(86vh, 720px);
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 9px;
    background: #f8f8f5;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    color: #172132;
}

.group-dialog::backdrop {
    background: rgba(4, 11, 20, 0.67);
    backdrop-filter: blur(3px);
}

.group-dialog-shell {
    display: flex;
    max-height: inherit;
    flex-direction: column;
}

.group-dialog-header {
    display: flex;
    padding: 16px 17px 13px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(120deg, #091624, #152d49);
    color: #ffffff;
}

.group-dialog-eyebrow {
    margin: 0 0 3px;
    color: var(--group-gold-light);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.095em;
    text-transform: uppercase;
}

.group-dialog-header h2 {
    margin: 0;
    font-family: "Cinzel", Georgia, serif;
    font-size: 21px;
    line-height: 1.05;
}

.group-dialog-header p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 10px;
    line-height: 1.35;
}

.group-dialog-close {
    width: 30px;
    height: 30px;
    padding: 0;
    flex: 0 0 30px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 19px;
    cursor: pointer;
}

.group-dialog-body {
    padding: 14px 16px 16px;
    overflow-y: auto;
}

.group-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 13px;
    padding: 3px;
    gap: 3px;
    border: 1px solid #deded8;
    border-radius: 6px;
    background: #efefeb;
}

.group-tab {
    min-height: 34px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #74746f;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}

.group-tab.is-active {
    background: #ffffff;
    color: #172132;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.group-form {
    display: grid;
    gap: 11px;
}

.group-field {
    display: grid;
    gap: 5px;
}

.group-field label {
    color: #4f5660;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.group-field input {
    width: 100%;
    height: 43px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #d7d7d2;
    border-radius: 5px;
    outline: 0;
    background: #ffffff;
    color: #172132;
    font-size: 15px;
    font-weight: 750;
}

.group-field input:focus {
    border-color: #8491a0;
    box-shadow: 0 0 0 3px rgba(22, 45, 73, 0.08);
}

#group-join-code {
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.group-primary-button {
    min-height: 43px;
    border: 0;
    border-radius: 5px;
    background: var(--group-navy);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.group-primary-button:hover {
    background: var(--group-navy-soft);
}

.group-primary-button:disabled {
    opacity: 0.48;
    cursor: default;
}

.group-invite-summary {
    margin: -3px 0 0;
    padding: 7px 9px;
    border-left: 2px solid var(--group-gold);
    background: #fff6e5;
    color: #5d5547;
    font-size: 9.5px;
    line-height: 1.35;
}

.group-dialog-message {
    margin: 12px 0 0;
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 10px;
    line-height: 1.35;
}

.group-dialog-message.is-error {
    background: #fff0ef;
    color: #a53c35;
}

.group-dialog-message.is-success {
    background: #edf8f1;
    color: #34714b;
}


/* ==========================================================
   ACTIVE DIALOG
   ========================================================== */

.group-active-code-block {
    display: flex;
    margin-bottom: 12px;
    padding: 12px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(239, 179, 79, 0.42);
    border-radius: 6px;
    background: #0d1d32;
    color: #ffffff;
}

.group-active-code-copy {
    display: grid;
    gap: 2px;
}

.group-active-code-copy span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
}

.group-active-code-copy strong {
    color: var(--group-gold-light);
    font-size: 22px;
    letter-spacing: 0.12em;
}

.group-copy-button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}

.group-active-meta {
    margin: 0 0 9px;
    color: #777a7d;
    font-size: 10px;
}

.group-active-participants {
    display: flex;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 6px;
}

.group-active-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.group-secondary-button,
.group-danger-button {
    min-height: 40px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}

.group-secondary-button {
    border: 1px solid #d1d2cf;
    background: #ffffff;
    color: #172132;
}

.group-danger-button {
    border: 1px solid #e3c0bc;
    background: #fff4f2;
    color: #a3453b;
}


/* ==========================================================
   HIDDEN STATE — AUTHOR CSS MUST NOT OVERRIDE [hidden]
   ========================================================== */

.group-form[hidden],
#group-lobby[hidden],
#group-active-panel[hidden] {
    display: none !important;
}


/* Pastille réservée au rendu compact mobile. */
.group-author-dot-mobile {
    display: none;
}


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

@media (max-width: 700px) {
    .group-session-bar {
        margin-bottom: 9px;
        padding: 6px;
        gap: 6px;
        border-radius: 6px;
    }

    .group-session-emblem {
        display: none;
    }

    .group-session-code {
        font-size: 12px;
    }

    .group-session-label {
        font-size: 6.7px;
    }

    .group-session-middle {
        display: grid;
        gap: 2px;
    }

    .group-session-online {
        font-size: 7.5px;
    }

    .group-session-participants {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .group-session-participants::-webkit-scrollbar {
        display: none;
    }

    .group-player-chip.is-compact {
        min-height: 19px;
        padding: 0 5px;
        font-size: 7.5px;
    }

    .group-session-action {
        width: 28px;
        height: 28px;
    }

    .group-session-leave {
        width: auto;
        min-width: 54px;
        padding: 0 7px;
        font-size: 8px;
    }

    .group-session-actions #group-session-manage {
        display: none;
    }

    .group-dialog {
        width: 100%;
        max-width: none;
        max-height: min(86vh, 700px);
        margin: auto 0 0;
        border-radius: 9px 9px 0 0;
    }

    .group-dialog-header {
        padding: 14px 15px 12px;
    }

    .group-dialog-header h2 {
        font-size: 19px;
    }

    .group-dialog-body {
        padding:
            12px
            14px
            calc(14px + env(safe-area-inset-bottom));
    }

    .group-field input {
        font-size: 16px;
    }

    /*
    Une seule ligne pour le mot en mode groupe mobile :
    pastille joueur + mot. Le pseudo et la nature grammaticale
    restent disponibles sur desktop uniquement.
    */
    .group-word-meta {
        display: none !important;
    }

    .group-word-with-player {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }

    .group-author-dot-mobile {
        display: inline-block;
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
        border-radius: 50%;
        background: var(--group-player-color, #8a94a3);
    }
}

@media (max-width: 390px) {
    .group-session-participants
    .group-player-chip:nth-child(n+4) {
        display: none;
    }

    .group-session-online {
        white-space: normal;
    }

    .group-active-actions {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   V28i — DESKTOP PLAYER COLUMN
   ========================================================== */

.group-player-header,
.group-player-column {
    display: none;
}

@media (min-width: 701px) {

    /*
    Destins liés desktop :
    ESSAI | JOUEUR | MOT | MOTMÈTRE / PROGRESSION
    */
    body.group-game-active
    .results-header,
    body.group-game-active
    .result-row {
        grid-template-columns:
            minmax(72px, 92px)
            minmax(82px, 0.72fr)
            minmax(118px, 1fr)
            minmax(320px, 2.4fr)
            !important;

        column-gap:
            12px
            !important;
    }

    body.group-game-active
    .results-header
    .group-player-header {
        display: block;
        min-width: 0;
        text-align: left;
    }

    body.group-game-active
    .group-player-column {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 6px;
        overflow: hidden;
    }

    body.group-game-active
    .group-player-column-name {
        min-width: 0;
        overflow: hidden;
        color: #687284;
        font-size: 11px;
        font-weight: 750;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/*
Mobile inchangé :
aucune colonne Joueur et pastille accolée au mot.
*/
@media (max-width: 700px) {

    body.group-game-active
    .group-player-header,
    body.group-game-active
    .group-player-column {
        display: none !important;
    }
}


/* ==========================================================
   V28j — LATEST BADGE + ROBUST DESTINS LIÉS ROSTER
   ========================================================== */

@media (min-width: 701px) {

    body.group-game-active
    .latest-title {
        left: 10px;
        padding: 3.5px 8px !important;
        border-radius: 4px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.06em !important;
    }
}


/*
Le centre du bandeau absorbe tout débordement.
Les boutons à droite ne rétrécissent jamais.
*/
.group-session-middle {
    overflow: hidden;
}

.group-session-actions {
    flex: 0 0 auto;
}

.group-session-participants {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.group-session-participants::-webkit-scrollbar {
    display: none;
}

.group-player-chip.is-compact {
    max-width: 112px;
    flex: 0 0 auto;
}

.group-player-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*
Même sur les très petits mobiles on garde tous les joueurs :
la zone est scrollable horizontalement au lieu de masquer
silencieusement les participants au-delà du troisième.
*/
@media (max-width: 390px) {

    .group-session-participants
    .group-player-chip:nth-child(n+4) {
        display: inline-flex;
    }
}

/* ==========================================================
   V29e — DESTINS LIÉS DESKTOP COMFORT
   ========================================================== */

@media (min-width: 701px) {

    .group-session-bar {
        margin-bottom: 13px;
        padding: 10px 11px;
        gap: 11px;
        border-radius: 8px;
    }

    .group-session-identity {
        gap: 9px;
    }

    .group-session-emblem {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 12px;
    }

    .group-session-copy {
        gap: 2px;
    }

    .group-session-label {
        font-size: 8.5px;
    }

    .group-session-code {
        font-size: 16px;
        letter-spacing: 0.105em;
    }

    .group-session-middle {
        gap: 10px;
    }

    .group-session-online {
        font-size: 9.5px;
    }

    .group-session-online::before {
        width: 7px;
        height: 7px;
        margin-right: 5px;
    }

    .group-session-participants {
        gap: 5px;
    }

    .group-session-participants
    .group-player-chip.is-compact {
        min-height: 26px;
        padding: 0 8px;
        gap: 6px;
        font-size: 9.5px;
    }

    .group-session-participants
    .group-player-dot {
        width: 8px;
        height: 8px;
        flex-basis: 8px;
    }

    .group-session-actions {
        gap: 6px;
    }

    .group-session-action {
        width: 34px;
        height: 34px;
    }

    .group-session-action svg {
        width: 17px;
        height: 17px;
    }

    .group-session-leave {
        width: auto;
        min-width: 66px;
        padding: 0 10px;
        font-size: 9.5px;
    }
}


/* ==========================================================
   V29f — EXPLICIT GAME MODE SWITCH
   ========================================================== */

.game-mode-switch {
    display: grid;
    grid-template-columns:
        minmax(120px, 1fr)
        minmax(270px, 340px);
    margin: 0 0 11px;
    padding: 8px 9px;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(16, 40, 67, 0.11);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 4px 14px rgba(16, 40, 67, 0.04);
}

.game-mode-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.game-mode-copy > span {
    color: #6c7480;
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-mode-copy > small {
    overflow: hidden;
    color: #8b9097;
    font-size: 8.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-mode-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    gap: 3px;
    border: 1px solid #deded8;
    border-radius: 6px;
    background: #efefeb;
}

.game-mode-button {
    display: flex;
    min-width: 0;
    min-height: 38px;
    padding: 4px 9px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #72736f;
    cursor: pointer;
    transition:
        background 120ms ease,
        color 120ms ease,
        box-shadow 120ms ease;
}

.game-mode-button:hover {
    color: #26374b;
}

.game-mode-button.is-active {
    background: #ffffff;
    color: #102843;
    box-shadow: 0 1px 5px rgba(16, 40, 67, 0.11);
}

.game-mode-switch[data-mode="group"]
#game-mode-group {
    background:
        linear-gradient(
            118deg,
            #0b1b2e,
            #132d49
        );
    color: #ffffff;
    box-shadow: 0 2px 7px rgba(5, 16, 29, 0.18);
}

.game-mode-switch[data-mode="group-pending"]
#game-mode-group {
    background: #fff5df;
    color: #654718;
    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(216, 153, 47, 0.23);
}

.game-mode-button svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.game-mode-switch[data-mode="group"]
#game-mode-group svg {
    color: var(--group-gold-light);
}

.game-mode-button-copy {
    display: grid;
    min-width: 0;
    gap: 0;
    text-align: left;
}

.game-mode-button-copy > strong {
    overflow: hidden;
    font-size: 9.5px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-mode-button-copy > small {
    margin-top: 2px;
    color: #9a9c9a;
    font-size: 6.8px;
    font-weight: 750;
    line-height: 1;
}

.game-mode-button.is-active
.game-mode-button-copy > small {
    color: #78828e;
}

.game-mode-switch[data-mode="group"]
#game-mode-group
.game-mode-button-copy > small {
    color: rgba(255, 255, 255, 0.57);
}

.group-back-solo-button,
.group-active-return-button {
    width: 100%;
    min-height: 36px;
    margin-top: 11px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #69717b;
    cursor: pointer;
    font-size: 9.5px;
    font-weight: 800;
}

.group-back-solo-button:hover,
.group-active-return-button:hover {
    background: #efefeb;
    color: #26374b;
}

.group-back-solo-button > span {
    margin-right: 4px;
}

.group-dialog-message.is-neutral {
    background: #eef2f5;
    color: #536171;
}

@media (max-width: 700px) {
    .game-mode-switch {
        grid-template-columns: 1fr;
        margin-bottom: 9px;
        padding: 7px;
        gap: 6px;
        border-radius: 6px;
    }

    .game-mode-copy {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
    }

    .game-mode-copy > span {
        font-size: 6.8px;
    }

    .game-mode-copy > small {
        font-size: 7.5px;
        text-align: right;
    }

    .game-mode-button {
        min-height: 37px;
        padding: 4px 7px;
        gap: 6px;
    }

    .game-mode-button svg {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }

    .game-mode-button-copy > strong {
        font-size: 9px;
    }

    .game-mode-button-copy > small {
        font-size: 6.4px;
    }
}


/* ==========================================================
   V29g — COMPACT MODE SWITCH + MOBILE KEYBOARD DIALOG
   ========================================================== */

.game-mode-switch {
    display: flex;
    margin: -1px 0 9px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.game-mode-options {
    display: grid;
    width: 230px;
    max-width: 100%;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    gap: 3px;
    border: 1px solid rgba(239, 179, 79, 0.22);
    border-radius: 999px;
    background: linear-gradient(118deg, #0a1727, #102843);
    box-shadow: 0 3px 10px rgba(7, 20, 35, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.game-mode-copy {
    display: none !important;
}

.game-mode-button {
    min-height: 32px;
    padding: 0 10px;
    gap: 6px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.52);
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.game-mode-button:hover {
    color: rgba(255, 255, 255, 0.88);
}

.game-mode-button svg {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
}

.game-mode-button-copy {
    display: block;
    text-align: center;
}

.game-mode-button-copy > strong {
    color: inherit;
    font-size: 9px;
    line-height: 1;
}

.game-mode-button-copy > small {
    display: none !important;
}

.game-mode-switch[data-mode="solo"] #game-mode-solo,
.game-mode-switch[data-mode="solo"] #game-mode-solo.is-active {
    background: linear-gradient(118deg, #1a3c5d, #17324e);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 5px rgba(0, 0, 0, 0.15);
}

.game-mode-switch[data-mode="solo"] #game-mode-solo svg {
    color: #f0bb58;
}

.game-mode-switch[data-mode="group"] #game-mode-group {
    background: linear-gradient(118deg, #173b5e, #1b456d);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(239, 179, 79, 0.42), 0 1px 6px rgba(0, 0, 0, 0.17);
}

.game-mode-switch[data-mode="group"] #game-mode-group svg {
    color: var(--group-gold-light);
}

.game-mode-switch[data-mode="group-pending"] #game-mode-group {
    background: linear-gradient(118deg, #76511b, #9b6d23);
    color: #fff5df;
    box-shadow: inset 0 0 0 1px rgba(255, 222, 155, 0.24), 0 1px 6px rgba(0, 0, 0, 0.16);
}

.game-mode-switch[data-mode="group-pending"] #game-mode-group svg {
    color: #ffe0a0;
}

@media (max-width: 700px) {
    .game-mode-switch {
        margin: -1px 0 8px;
        padding: 0;
    }

    .game-mode-options {
        width: min(224px, 74vw);
        padding: 2px;
        gap: 2px;
    }

    .game-mode-button {
        min-height: 30px;
        padding: 0 8px;
        gap: 5px;
    }

    .game-mode-button svg {
        width: 13px;
        height: 13px;
        flex-basis: 13px;
    }

    .game-mode-button-copy > strong {
        font-size: 8.5px;
    }

    .group-dialog {
        position: fixed;
        top: auto;
        right: 0;
        bottom: var(--group-keyboard-inset, 0px);
        left: 0;
        width: 100%;
        max-width: none;
        max-height: min(calc(var(--group-visual-height, 100dvh) - 8px), 700px);
        margin: 0;
        border-radius: 9px 9px 0 0;
        will-change: bottom, max-height;
    }

    .group-dialog-shell {
        max-height: inherit;
    }

    .group-dialog-body {
        overscroll-behavior: contain;
        scroll-padding-bottom: 10px;
    }

    .group-dialog.is-keyboard-open .group-dialog-header {
        padding: 9px 13px 8px;
    }

    .group-dialog.is-keyboard-open .group-dialog-header > div > p:not(.group-dialog-eyebrow) {
        display: none;
    }

    .group-dialog.is-keyboard-open .group-dialog-eyebrow {
        margin-bottom: 2px;
        font-size: 7px;
    }

    .group-dialog.is-keyboard-open .group-dialog-header h2 {
        font-size: 17px;
    }

    .group-dialog.is-keyboard-open .group-dialog-close {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        font-size: 17px;
    }

    .group-dialog.is-keyboard-open .group-dialog-body {
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    }

    .group-dialog.is-keyboard-open .group-tabs {
        margin-bottom: 8px;
        padding: 2px;
    }

    .group-dialog.is-keyboard-open .group-tab {
        min-height: 30px;
    }

    .group-dialog.is-keyboard-open .group-form {
        gap: 8px;
    }

    .group-dialog.is-keyboard-open .group-field {
        gap: 3px;
    }

    .group-dialog.is-keyboard-open .group-field label {
        font-size: 8px;
    }

    .group-dialog.is-keyboard-open .group-field input {
        height: 40px;
    }

    .group-dialog.is-keyboard-open .group-primary-button {
        min-height: 40px;
    }

    .group-dialog.is-keyboard-open .group-invite-summary {
        padding: 5px 8px;
        font-size: 8.5px;
    }

    .group-dialog.is-keyboard-open .group-back-solo-button {
        min-height: 29px;
        margin-top: 5px;
        font-size: 8.5px;
    }

    .group-dialog.is-keyboard-open .group-dialog-message {
        margin-top: 7px;
        padding: 6px 8px;
    }
}


/* ==========================================================
   V29h — HEADER MODE SWITCH HARMONY
   ========================================================== */

/*
Desktop :
logo à gauche ; à droite le switch puis les trois actions.
Le switch reprend les angles et le langage navy/or du site,
sans effet "pilule".
*/
@media (min-width: 701px) {

    .game-header {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            auto;
        align-items: start !important;
        gap: 11px 18px !important;
        margin-bottom: 13px !important;
    }

    .game-header
    .brand-lockup {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .header-controls {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    .game-header
    .game-mode-switch {
        display: flex;
        width: auto;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: flex-end;
    }

    .game-header
    .game-mode-options {
        width: 214px;
        height: 40px;
        box-sizing: border-box;
        grid-template-columns:
            82px
            126px;
        padding: 3px;
        gap: 3px;
        border:
            1px solid
            #d8d3c8;
        border-radius: 7px;
        background: #f1eee6;
        box-shadow:
            0 3px 10px
            rgba(16, 40, 67, 0.07);
    }

    .game-header
    .game-mode-button {
        min-height: 32px;
        padding: 0 8px;
        justify-content: center;
        gap: 0;
        border-radius: 5px;
        color: #68717c;
    }

    .game-header
    .game-mode-button-copy {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .game-header
    .game-mode-button-copy > strong {
        width: 100%;
        color: inherit;
        font-size: 10.5px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        letter-spacing: -0.01em;
    }

    .game-header
    .game-mode-switch[data-mode="solo"]
    #game-mode-solo,
    .game-header
    .game-mode-switch[data-mode="solo"]
    #game-mode-solo.is-active {
        background:
            linear-gradient(
                180deg,
                #f4c568,
                #e9ad42
            );
        color: #10243b;
        box-shadow:
            inset 0 0 0 1px
            rgba(128, 77, 7, 0.10),
            0 1px 4px
            rgba(120, 79, 17, 0.13);
    }

    .game-header
    .game-mode-switch[data-mode="group"]
    #game-mode-group {
        background:
            linear-gradient(
                118deg,
                #0b1b2e,
                #163653
            );
        color: #ffd27d;
        box-shadow:
            inset 0 0 0 1px
            rgba(239, 179, 79, 0.30),
            0 1px 5px
            rgba(5, 16, 29, 0.17);
    }

    .game-header
    .game-mode-switch[data-mode="group-pending"]
    #game-mode-group {
        background:
            linear-gradient(
                180deg,
                #e8b14e,
                #d3942c
            );
        color: #10243b;
        box-shadow:
            inset 0 0 0 1px
            rgba(128, 77, 7, 0.12),
            0 1px 5px
            rgba(120, 79, 17, 0.13);
    }

    .game-header
    .header-actions {
        grid-column: auto;
        grid-row: auto;
        gap: 8px !important;
    }

    .game-header
    .yesterday-word-card {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin:
            0
            !important;
    }
}


/*
Mobile :
ligne 1 = marque + switch.
ligne 2 = Mot de la veille + archives/stats/info.
On conserve les mêmes éléments et les mêmes actions ; seul leur
placement change pour exploiter correctement l'espace disponible.
*/
@media (max-width: 700px) {

    .game-header {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            auto;
        grid-template-rows:
            auto
            auto;
        align-items: center !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .game-header
    .brand-lockup {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        align-self: center;
    }

    /*
    display: contents permet au switch et aux icônes d'occuper
    chacun leur cellule de la grille du header sans dupliquer les
    boutons ni leur logique JS.
    */
    .header-controls {
        display: contents;
    }

    .game-header
    .game-mode-switch {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        margin: 0;
        padding: 0;
        justify-self: end;
    }

    .game-header
    .game-mode-options {
        width: 154px;
        height: 34px;
        box-sizing: border-box;
        grid-template-columns:
            58px
            90px;
        padding: 2px;
        gap: 2px;
        border:
            1px solid
            #d8d3c8;
        border-radius: 7px;
        background: #f1eee6;
        box-shadow:
            0 2px 8px
            rgba(16, 40, 67, 0.06);
    }

    .game-header
    .game-mode-button {
        min-height: 28px;
        padding: 0 5px;
        justify-content: center;
        gap: 0;
        border-radius: 5px;
        color: #68717c;
    }

    .game-header
    .game-mode-button-copy {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .game-header
    .game-mode-button-copy > strong {
        width: 100%;
        color: inherit;
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        letter-spacing: -0.018em;
    }

    .game-header
    .game-mode-switch[data-mode="solo"]
    #game-mode-solo,
    .game-header
    .game-mode-switch[data-mode="solo"]
    #game-mode-solo.is-active {
        background:
            linear-gradient(
                180deg,
                #f4c568,
                #e9ad42
            );
        color: #10243b;
        box-shadow:
            inset 0 0 0 1px
            rgba(128, 77, 7, 0.10);
    }

    .game-header
    .game-mode-switch[data-mode="group"]
    #game-mode-group {
        background:
            linear-gradient(
                118deg,
                #0b1b2e,
                #163653
            );
        color: #ffd27d;
        box-shadow:
            inset 0 0 0 1px
            rgba(239, 179, 79, 0.30);
    }

    .game-header
    .game-mode-switch[data-mode="group-pending"]
    #game-mode-group {
        background:
            linear-gradient(
                180deg,
                #e8b14e,
                #d3942c
            );
        color: #10243b;
    }

    .game-header
    .yesterday-word-card {
        grid-column: 1;
        grid-row: 2;
        width: auto;
        min-width: 0;
        margin:
            0
            !important;
        padding:
            5px
            6px
            !important;
        gap:
            5px
            !important;
    }

    .game-header
    .yesterday-word-emblem {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .game-header
    .yesterday-word-copy {
        min-width: 0;
        grid-template-columns:
            58px
            minmax(0, 1fr)
            !important;
        gap:
            5px
            !important;
    }

    .game-header
    .yesterday-word-meta {
        display: none !important;
    }

    .game-header
    .yesterday-word-kicker {
        font-size:
            6.4px
            !important;
    }

    .game-header
    .yesterday-word-value,
    .game-header
    .yesterday-word-value.is-masked {
        min-width: 0;
        font-size:
            11px
            !important;
        letter-spacing:
            0.08em
            !important;
    }

    .game-header
    .yesterday-word-reveal {
        min-width: 57px;
        height: 30px;
        padding:
            0
            7px
            !important;
        font-size:
            8px
            !important;
    }

    .game-header
    .header-actions {
        grid-column: 2;
        grid-row: 2;
        display: flex !important;
        width: auto;
        align-items: center !important;
        justify-content: flex-end !important;
        align-self: center;
        gap:
            4px
            !important;
    }

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

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

/* ==========================================================
   V29i — HEADER / SWITCH FINAL HARMONY
   ========================================================== */

@media (min-width: 701px) {
    .game-header {
        align-items: center !important;
    }

    .game-header .brand-lockup,
    .game-header .header-controls {
        align-self: center;
    }

    .game-header .header-controls {
        min-height: 44px;
    }

    .game-header .game-mode-options {
        width: 228px;
        height: 42px;
        grid-template-columns: 88px 134px;
        padding: 3px;
        gap: 3px;
        border: 1px solid #d5d8dc;
        border-radius: 7px;
        background: #f1f0ec;
        box-shadow: 0 3px 10px rgba(16, 40, 67, 0.07);
    }

    .game-header .game-mode-button {
        min-height: 34px;
        padding: 0 8px;
        justify-content: center;
        gap: 6px;
        border-radius: 5px;
        color: #6d7580;
    }

    .game-header .game-mode-button svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        stroke-width: 1.9;
    }

    .game-header .game-mode-button-copy {
        display: flex;
        width: auto;
        min-width: 0;
        align-items: center;
        justify-content: center;
    }

    .game-header .game-mode-button-copy > strong {
        width: auto;
        font-size: 10.5px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
    }

    .game-header .game-mode-switch[data-mode="solo"] #game-mode-solo,
    .game-header .game-mode-switch[data-mode="solo"] #game-mode-solo.is-active {
        background: linear-gradient(118deg, #0b1b2e, #173a5b);
        color: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 5px rgba(9,24,40,.18);
    }

    .game-header .game-mode-switch[data-mode="solo"] #game-mode-solo svg {
        color: #a8c9e6;
    }

    .game-header .game-mode-switch[data-mode="group"] #game-mode-group {
        background: linear-gradient(118deg, #433b70, #64518c);
        color: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(226,214,255,.17), 0 2px 6px rgba(53,42,91,.21);
    }

    .game-header .game-mode-switch[data-mode="group"] #game-mode-group svg {
        color: #d4c9ff;
    }

    .game-header .game-mode-switch[data-mode="group-pending"] #game-mode-group {
        background: linear-gradient(118deg, #56477f, #7863a3);
        color: #ffffff;
    }

    .game-header .game-mode-switch[data-mode="group-pending"] #game-mode-group svg {
        color: #e1d9ff;
    }
}

@media (max-width: 700px) {
    .game-header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 8px !important;
        row-gap: 8px !important;
    }

    .game-header .brand-lockup {
        grid-column: 1;
        grid-row: 1;
    }

    .game-header .header-controls {
        display: contents;
    }

    .game-header .header-actions {
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        width: auto;
        align-items: center !important;
        justify-content: flex-end !important;
        align-self: center;
        gap: 4px !important;
    }

    .game-header .game-mode-switch {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        height: 42px;
        margin: 0;
        padding: 0;
        align-self: stretch;
        justify-self: end;
    }

    .game-header .game-mode-options {
        width: 150px;
        height: 42px;
        box-sizing: border-box;
        grid-template-columns: 57px 87px;
        padding: 3px;
        gap: 3px;
        border: 1px solid #d5d8dc;
        border-radius: 7px;
        background: #f1f0ec;
        box-shadow: 0 2px 8px rgba(16,40,67,.06);
    }

    .game-header .game-mode-button {
        min-height: 34px;
        padding: 0 4px;
        justify-content: center;
        gap: 4px;
        border-radius: 5px;
        color: #6d7580;
    }

    .game-header .game-mode-button svg {
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
        stroke-width: 1.9;
    }

    .game-header .game-mode-button-copy {
        display: flex;
        width: auto;
        min-width: 0;
        align-items: center;
        justify-content: center;
    }

    .game-header .game-mode-button-copy > strong {
        width: auto;
        font-size: 8.8px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        letter-spacing: -0.02em;
    }

    .game-header .game-mode-switch[data-mode="solo"] #game-mode-solo,
    .game-header .game-mode-switch[data-mode="solo"] #game-mode-solo.is-active {
        background: linear-gradient(118deg, #0b1b2e, #173a5b);
        color: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }

    .game-header .game-mode-switch[data-mode="solo"] #game-mode-solo svg {
        color: #a8c9e6;
    }

    .game-header .game-mode-switch[data-mode="group"] #game-mode-group {
        background: linear-gradient(118deg, #433b70, #64518c);
        color: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(226,214,255,.17);
    }

    .game-header .game-mode-switch[data-mode="group"] #game-mode-group svg {
        color: #d4c9ff;
    }

    .game-header .game-mode-switch[data-mode="group-pending"] #game-mode-group {
        background: linear-gradient(118deg, #56477f, #7863a3);
        color: #ffffff;
    }

    .game-header .game-mode-switch[data-mode="group-pending"] #game-mode-group svg {
        color: #e1d9ff;
    }

    .game-header .yesterday-word-card {
        grid-column: 1;
        grid-row: 2;
        min-height: 42px;
        height: 42px;
        box-sizing: border-box;
        align-self: stretch;
    }

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

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

@media (max-width: 390px) {
    .game-header .game-mode-options {
        width: 142px;
        grid-template-columns: 54px 82px;
    }

    .game-header .game-mode-button {
        gap: 3px;
        padding: 0 3px;
    }

    .game-header .game-mode-button-copy > strong {
        font-size: 8.3px;
    }

    .game-header .game-mode-button svg {
        width: 11px;
        height: 11px;
        flex-basis: 11px;
    }
}


/* ==========================================================
   V29j — MOBILE HEADER BALANCE + FINAL SWITCH COLORS
   ========================================================== */

/*
Couleurs communes desktop/mobile.

Solo reprend exactement la famille navy du bloc
"Mot de la veille" :
#07111e -> #0d1d32 -> #132943.

Destins liés n'est plus violet : il part d'un bleu encre
et glisse vers un berry / lie-de-vin sombre.
*/
.game-header
.game-mode-switch[data-mode="solo"]
#game-mode-solo,
.game-header
.game-mode-switch[data-mode="solo"]
#game-mode-solo.is-active {
    background:
        linear-gradient(
            116deg,
            #07111e 0%,
            #0d1d32 58%,
            #132943 100%
        );
    color: #ffffff;
    box-shadow:
        inset 0 0 0 1px
        rgba(236, 173, 69, 0.24),
        0 2px 5px
        rgba(7, 16, 29, 0.16);
}

.game-header
.game-mode-switch[data-mode="solo"]
#game-mode-solo svg {
    color: #f0bd62;
}


.game-header
.game-mode-switch[data-mode="group"]
#game-mode-group {
    background:
        linear-gradient(
            118deg,
            #203047 0%,
            #493348 54%,
            #73394f 100%
        );
    color: #ffffff;
    box-shadow:
        inset 0 0 0 1px
        rgba(241, 196, 207, 0.18),
        0 2px 6px
        rgba(55, 31, 43, 0.18);
}

.game-header
.game-mode-switch[data-mode="group"]
#game-mode-group svg {
    color: #f3c6d2;
}


.game-header
.game-mode-switch[data-mode="group-pending"]
#game-mode-group {
    background:
        linear-gradient(
            118deg,
            #293a52 0%,
            #5d394d 56%,
            #84445c 100%
        );
    color: #ffffff;
    box-shadow:
        inset 0 0 0 1px
        rgba(246, 207, 217, 0.20),
        0 2px 6px
        rgba(55, 31, 43, 0.16);
}

.game-header
.game-mode-switch[data-mode="group-pending"]
#game-mode-group svg {
    color: #f5ccd6;
}


/*
MOBILE FINAL

Ligne 1 :
Marque                           Switch

Ligne 2 :
          Archives Stats Info

Ligne 3 :
Mot de la veille en pleine largeur

Si le Mot de la veille est masqué en Destins liés, la troisième
ligne disparaît naturellement et le header reste équilibré.
*/
@media (max-width: 700px) {

    .game-header {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
        grid-template-rows:
            auto
            auto
            auto;
        column-gap: 7px !important;
        row-gap: 7px !important;
        align-items: center !important;
    }

    .game-header
    .brand-lockup {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        align-self: center;
    }

    .game-header
    .header-controls {
        display: contents;
    }

    /*
    Switch de nouveau à droite du titre/slogan.
    */
    .game-header
    .game-mode-switch {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        height: 38px;
        margin: 0;
        padding: 0;
        align-self: center;
        justify-self: end;
    }

    .game-header
    .game-mode-options {
        width: 148px;
        height: 38px;
        box-sizing: border-box;
        grid-template-columns:
            56px
            86px;
        padding: 3px;
        gap: 3px;
        border:
            1px solid
            #d6d7d8;
        border-radius: 7px;
        background: #f1f0ec;
        box-shadow:
            0 2px 8px
            rgba(16, 40, 67, 0.06);
    }

    .game-header
    .game-mode-button {
        min-height: 30px;
        padding: 0 4px;
        justify-content: center;
        gap: 4px;
        border-radius: 5px;
    }

    .game-header
    .game-mode-button svg {
        width: 11px;
        height: 11px;
        flex:
            0
            0
            11px;
    }

    .game-header
    .game-mode-button-copy > strong {
        font-size: 8.7px;
        line-height: 1;
    }


    /*
    Les trois actions deviennent une vraie rangée centrée.
    */
    .game-header
    .header-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex !important;
        width: fit-content;
        margin: 0;
        align-items: center !important;
        justify-content: center !important;
        justify-self: center;
        align-self: center;
        gap: 7px !important;
    }

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

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


    /*
    Le mot de la veille revient sous les icônes, pleine largeur.
    */
    .game-header
    .yesterday-word-card {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        min-height: 42px;
        height: auto;
        margin:
            0
            !important;
        align-self: stretch;
    }
}


/*
Sur les très petits mobiles, priorité au lockup :
le switch perd quelques pixels mais conserve ses deux libellés.
*/
@media (max-width: 390px) {

    .game-header
    .game-mode-switch {
        height: 36px;
    }

    .game-header
    .game-mode-options {
        width: 136px;
        height: 36px;
        grid-template-columns:
            51px
            79px;
        padding: 3px;
    }

    .game-header
    .game-mode-button {
        min-height: 28px;
        gap: 3px;
        padding: 0 3px;
    }

    .game-header
    .game-mode-button-copy > strong {
        font-size: 8.1px;
    }

    .game-header
    .game-mode-button svg {
        width: 10px;
        height: 10px;
        flex-basis: 10px;
    }
}


/* ==========================================================
   V29k — SOLO MOBILE HEADER BREATHING
   ========================================================== */

@media (max-width: 700px) {

    body:not(.group-game-active)
    .game-header
    .yesterday-word-card {
        margin-top:
            5px
            !important;
    }
}

/* ==========================================================
   V29r — MOBILE BRAND + YESTERDAY ACTION
   ========================================================== */

/*
Révéler / Masquer gardent exactement la même empreinte.
La largeur ne dépend donc jamais du texte affiché.
*/
.game-header
.yesterday-word-reveal {
    width:
        86px
        !important;

    min-width:
        86px
        !important;

    max-width:
        86px
        !important;

    flex:
        0
        0
        86px
        !important;
}


@media (max-width: 700px) {

    /*
    Le nom de marque ne doit jamais casser après "Mot-".
    */
    .game-header
    .brand-copy {
        min-width:
            0;
    }

    .game-header
    .brand-lockup h1 {
        white-space:
            nowrap
            !important;
    }


    .game-header
    .yesterday-word-reveal {
        width:
            78px
            !important;

        min-width:
            78px
            !important;

        max-width:
            78px
            !important;

        flex-basis:
            78px
            !important;

        justify-self:
            end;
    }
}


@media (max-width: 430px) {

    .game-header
    .brand-lockup {
        gap:
            7px
            !important;
    }

    .game-header
    .brand-lockup h1 {
        font-size:
            19.5px
            !important;

        letter-spacing:
            0
            !important;
    }
}


@media (max-width: 370px) {

    .game-header
    .brand-lockup h1 {
        font-size:
            18px
            !important;

        letter-spacing:
            -0.01em
            !important;
    }
}


/*
Sous 365 px l'emblème du Mot de la veille est déjà masqué.
On passe explicitement la plaque à deux colonnes pour éviter que
le bouton ne tombe dans le track flexible et s'étire.
*/
@media (max-width: 365px) {

    body
    .game-header
    .yesterday-word-card {
        grid-template-columns:
            minmax(0, 1fr)
            78px
            !important;
    }

    .game-header
    .yesterday-word-copy {
        grid-column:
            1;
    }

    .game-header
    .yesterday-word-reveal {
        grid-column:
            2;

        width:
            78px
            !important;

        min-width:
            78px
            !important;

        max-width:
            78px
            !important;
    }
}

/* ==========================================================
   V29s — MOBILE CENTERED HEADER TEST
   ========================================================== */

/*
Essai mobile uniquement :

1. Marque centrée
2. Switch Solo / Destins liés centré
3. Archives / Stats / Info centrés
4. Mot de la veille inchangé en pleine largeur

Le desktop n'est pas modifié.
*/
@media (max-width: 700px) {

    .game-header {
        grid-template-columns:
            minmax(0, 1fr)
            !important;

        grid-template-rows:
            auto
            auto
            auto
            auto;

        column-gap:
            0
            !important;

        row-gap:
            8px
            !important;

        justify-items:
            center
            !important;

        align-items:
            center
            !important;
    }


    .game-header
    .brand-lockup {
        grid-column:
            1
            !important;

        grid-row:
            1
            !important;

        width:
            fit-content;

        max-width:
            100%;

        justify-self:
            center
            !important;

        justify-content:
            center
            !important;

        align-items:
            center
            !important;

        margin:
            0 auto
            !important;
    }


    .game-header
    .brand-copy {
        min-width:
            0;

        text-align:
            center
            !important;
    }


    .game-header
    .brand-lockup h1,
    .game-header
    .brand-lockup .subtitle {
        text-align:
            center
            !important;
    }


    .game-header
    .header-controls {
        display:
            contents;
    }


    .game-header
    .game-mode-switch {
        grid-column:
            1
            !important;

        grid-row:
            2
            !important;

        justify-self:
            center
            !important;

        align-self:
            center
            !important;

        margin:
            1px auto 0
            !important;
    }


    .game-header
    .header-actions {
        grid-column:
            1
            !important;

        grid-row:
            3
            !important;

        width:
            fit-content
            !important;

        justify-self:
            center
            !important;

        align-self:
            center
            !important;

        justify-content:
            center
            !important;

        margin:
            0 auto
            !important;
    }


    .game-header
    .yesterday-word-card {
        grid-column:
            1
            !important;

        grid-row:
            4
            !important;

        width:
            100%
            !important;

        justify-self:
            stretch
            !important;
    }
}

/* ==========================================================
   V29t — MOBILE HEADER CONTROLS ON ONE ROW
   ========================================================== */

@media (max-width: 700px) {

    /*
    Sous la marque centrée, le switch et les trois actions
    constituent désormais une seule ligne centrée.
    */
    .game-header
    .header-controls {
        grid-column:
            1
            !important;

        grid-row:
            2
            !important;

        display:
            flex
            !important;

        width:
            fit-content;

        max-width:
            100%;

        align-items:
            center
            !important;

        justify-content:
            center
            !important;

        justify-self:
            center
            !important;

        gap:
            9px
            !important;

        margin:
            0 auto
            !important;
    }


    .game-header
    .game-mode-switch {
        grid-column:
            auto
            !important;

        grid-row:
            auto
            !important;

        flex:
            0
            0
            auto;

        margin:
            0
            !important;
    }


    .game-header
    .header-actions {
        grid-column:
            auto
            !important;

        grid-row:
            auto
            !important;

        display:
            flex
            !important;

        width:
            fit-content
            !important;

        flex:
            0
            0
            auto;

        justify-content:
            center
            !important;

        gap:
            6px
            !important;

        margin:
            0
            !important;
    }


    /*
    La carte descend donc d'un cran seulement :
    marque = ligne 1
    contrôles = ligne 2
    mot de la veille = ligne 3
    */
    .game-header
    .yesterday-word-card {
        grid-column:
            1
            !important;

        grid-row:
            3
            !important;

        width:
            100%
            !important;
    }


    /*
    Le libellé dispose maintenant d'une vraie largeur dédiée.
    Il n'a aucune raison de casser sur deux lignes.
    */
    .game-header
    .yesterday-word-copy {
        grid-template-columns:
            82px
            minmax(0, 1fr)
            !important;
    }


    .game-header
    .yesterday-word-kicker {
        white-space:
            nowrap
            !important;
    }
}


@media (max-width: 390px) {

    .game-header
    .header-controls {
        gap:
            6px
            !important;
    }

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

    .game-header
    .header-icon-button {
        width:
            32px
            !important;

        min-width:
            32px
            !important;

        height:
            32px
            !important;
    }
}


/*
L'ancien responsive masquait volontairement le losange sous
365 px. On l'affiche désormais sur tous les mobiles.
*/
@media (max-width: 365px) {

    body
    .game-header
    .yesterday-word-emblem {
        display:
            inline-flex
            !important;

        width:
            22px
            !important;

        height:
            22px
            !important;

        flex:
            0
            0
            22px
            !important;
    }


    body
    .game-header
    .yesterday-word-copy {
        grid-template-columns:
            78px
            minmax(0, 1fr)
            !important;
    }


    body
    .game-header
    .yesterday-word-kicker {
        white-space:
            nowrap
            !important;
    }
}

/* ==========================================================
   V29u — MOBILE HEADER STRUCTURE / RESPONSIVE RAIL
   ========================================================== */

/*
Le header mobile devient un module visuel cohérent :

1. marque centrée ;
2. rail de commandes unique ;
3. Mot de la veille clairement séparé.

La largeur du rail et de ses éléments reste fluide afin de
tenir proprement sur les mobiles de 320 px à 700 px.
*/
@media (max-width: 700px) {

    .game-header {
        grid-template-columns:
            minmax(0, 1fr)
            !important;

        grid-template-rows:
            auto
            auto
            auto
            !important;

        box-sizing:
            border-box;

        width:
            100%;

        padding:
            13px
            10px
            10px
            !important;

        row-gap:
            11px
            !important;

        border:
            1px solid
            rgba(16, 40, 67, 0.065);

        border-radius:
            13px;

        background:
            rgba(255, 255, 255, 0.74);

        box-shadow:
            0 7px 24px
            rgba(16, 40, 67, 0.055);

        justify-items:
            center
            !important;
    }


    .game-header
    .brand-lockup {
        grid-column:
            1
            !important;

        grid-row:
            1
            !important;

        width:
            fit-content;

        max-width:
            100%;

        margin:
            0 auto
            !important;

        justify-self:
            center
            !important;

        justify-content:
            center
            !important;
    }


    /*
    Le rail donne une vraie "zone de commandes" au header.
    Il reste compact et ne prend jamais toute la largeur
    inutilement sur les grands mobiles.
    */
    .game-header
    .header-controls {
        grid-column:
            1
            !important;

        grid-row:
            2
            !important;

        display:
            grid
            !important;

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

        width:
            min(100%, 304px);

        box-sizing:
            border-box;

        padding:
            4px
            !important;

        gap:
            7px
            !important;

        align-items:
            center
            !important;

        justify-self:
            center
            !important;

        margin:
            0 auto
            !important;

        border:
            1px solid
            rgba(16, 40, 67, 0.085);

        border-radius:
            10px;

        background:
            #f4f2ec;

        box-shadow:
            inset 0 1px 0
            rgba(255, 255, 255, 0.82),
            0 3px 10px
            rgba(16, 40, 67, 0.045);
    }


    .game-header
    .game-mode-switch {
        grid-column:
            1
            !important;

        grid-row:
            1
            !important;

        width:
            100%
            !important;

        min-width:
            0;

        margin:
            0
            !important;
    }


    .game-header
    .game-mode-options {
        width:
            100%
            !important;

        min-width:
            0;

        grid-template-columns:
            minmax(54px, 0.42fr)
            minmax(82px, 0.58fr)
            !important;
    }


    .game-header
    .header-actions {
        grid-column:
            2
            !important;

        grid-row:
            1
            !important;

        display:
            flex
            !important;

        width:
            auto
            !important;

        flex:
            0
            0
            auto;

        gap:
            4px
            !important;

        align-items:
            center
            !important;

        justify-content:
            flex-end
            !important;

        margin:
            0
            !important;
    }


    .game-header
    .header-icon-button {
        width:
            clamp(30px, 8.3vw, 32px)
            !important;

        min-width:
            clamp(30px, 8.3vw, 32px)
            !important;

        height:
            clamp(30px, 8.3vw, 32px)
            !important;
    }


    /*
    Le bloc de la veille est visuellement distinct du rail.
    Il reste pleine largeur dans le module.
    */
    .game-header
    .yesterday-word-card {
        grid-column:
            1
            !important;

        grid-row:
            3
            !important;

        width:
            100%
            !important;

        margin:
            1px
            0
            0
            !important;

        justify-self:
            stretch
            !important;
    }
}


/*
Petits mobiles : on réduit le rail plutôt que de laisser
ses éléments se chevaucher ou sortir du viewport.
*/
@media (max-width: 390px) {

    .game-header {
        padding:
            11px
            8px
            9px
            !important;

        row-gap:
            9px
            !important;
    }


    .game-header
    .header-controls {
        width:
            min(100%, 286px);

        padding:
            3px
            !important;

        gap:
            5px
            !important;
    }


    .game-header
    .game-mode-button-copy > strong {
        font-size:
            8.6px
            !important;
    }


    .game-header
    .game-mode-button {
        padding:
            0
            4px
            !important;
    }


    .game-header
    .header-icon-button {
        width:
            30px
            !important;

        min-width:
            30px
            !important;

        height:
            30px
            !important;
    }
}


/*
Très petits mobiles : dernière sécurité de largeur.
Le rail reste sur une ligne sans écraser la marque.
*/
@media (max-width: 340px) {

    .game-header
    .header-controls {
        width:
            100%;

        gap:
            4px
            !important;
    }


    .game-header
    .game-mode-options {
        grid-template-columns:
            minmax(49px, 0.40fr)
            minmax(76px, 0.60fr)
            !important;
    }


    .game-header
    .game-mode-button-copy > strong {
        font-size:
            8px
            !important;

        letter-spacing:
            -0.025em
            !important;
    }


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


    .game-header
    .header-icon-button {
        width:
            29px
            !important;

        min-width:
            29px
            !important;

        height:
            29px
            !important;
    }
}

/* ==========================================================
   V29v — MOBILE YESTERDAY WORD AS THIRD STAT
   ========================================================== */

.yesterday-word-button-a11y {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0 0 0 0);

    white-space:
        nowrap;

    border:
        0;
}


.yesterday-word-eye {
    width:
        15px;

    height:
        15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.yesterday-word-eye-hide {
    display:
        none;
}


.yesterday-word-reveal[aria-pressed="true"]
.yesterday-word-eye-show {
    display:
        none;
}


.yesterday-word-reveal[aria-pressed="true"]
.yesterday-word-eye-hide {
    display:
        block;
}


@media (max-width: 700px) {

    /*
    Le header n'a désormais que deux niveaux :
    marque puis rail de commandes.
    */
    .game-header {
        grid-template-rows:
            auto
            auto
            !important;

        padding-bottom:
            12px
            !important;
    }


    /*
    Trois informations de jeu sur la même ligne.
    Le troisième bloc reçoit volontairement le plus d'espace.
    */
    .game-stats {
        grid-template-columns:
            minmax(54px, 0.68fr)
            minmax(92px, 1.02fr)
            minmax(122px, 1.35fr)
            !important;

        gap:
            6px
            !important;
    }


    .game-stats
    .stat {
        min-width:
            0;

        padding:
            8px
            8px
            !important;
    }


    .game-stats
    .stat-label {
        line-height:
            1.05;
    }


    /*
    Le Mot de la veille reprend exactement le langage visuel
    des cartes Essais / Déjà trouvé par.
    */
    body
    .game-stats
    .yesterday-word-card.is-inline-stat {
        position:
            static;

        isolation:
            auto;

        display:
            grid
            !important;

        grid-template-columns:
            minmax(0, 1fr)
            27px
            !important;

        grid-template-rows:
            auto;

        min-width:
            0;

        width:
            auto
            !important;

        height:
            auto;

        min-height:
            58px;

        box-sizing:
            border-box;

        margin:
            0
            !important;

        padding:
            7px
            7px
            !important;

        overflow:
            hidden;

        gap:
            4px
            !important;

        align-items:
            center;

        border:
            0
            !important;

        border-radius:
            5px
            !important;

        background:
            #f5f5f2
            !important;

        box-shadow:
            none
            !important;

        color:
            #18202a;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat::before {
        display:
            none
            !important;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-emblem {
        display:
            none
            !important;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-copy {
        display:
            grid
            !important;

        grid-template-columns:
            minmax(0, 1fr)
            !important;

        min-width:
            0;

        gap:
            3px
            !important;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-heading {
        display:
            block
            !important;

        min-width:
            0;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-kicker {
        display:
            block;

        overflow:
            hidden;

        color:
            #777
            !important;

        font-size:
            7.6px
            !important;

        font-weight:
            800;

        line-height:
            1;

        letter-spacing:
            0.035em
            !important;

        text-overflow:
            clip;

        white-space:
            nowrap
            !important;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-meta {
        display:
            none
            !important;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-value,
    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-value.is-masked {
        display:
            flex;

        min-width:
            0
            !important;

        min-height:
            18px;

        padding:
            0
            !important;

        overflow:
            hidden;

        align-items:
            center;

        justify-content:
            flex-start;

        border:
            0
            !important;

        background:
            transparent
            !important;

        box-shadow:
            none
            !important;

        color:
            #20242a
            !important;

        font-size:
            clamp(9.5px, 2.8vw, 13px)
            !important;

        font-weight:
            850
            !important;

        line-height:
            1;

        letter-spacing:
            -0.015em
            !important;

        text-align:
            left;

        text-overflow:
            clip;

        white-space:
            nowrap;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-value.is-masked {
        color:
            #777
            !important;

        font-size:
            10px
            !important;

        letter-spacing:
            0.055em
            !important;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-reveal {
        position:
            relative;

        display:
            inline-flex
            !important;

        width:
            27px
            !important;

        min-width:
            27px
            !important;

        max-width:
            27px
            !important;

        height:
            27px
            !important;

        min-height:
            27px;

        padding:
            0
            !important;

        align-items:
            center;

        justify-content:
            center;

        border:
            1px solid
            rgba(16, 40, 67, 0.12)
            !important;

        border-radius:
            8px
            !important;

        background:
            #ffffff
            !important;

        box-shadow:
            0
            1px
            3px
            rgba(16, 40, 67, 0.06)
            !important;

        color:
            #102843
            !important;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-reveal.is-loading {
        opacity:
            0.55;
    }


    /*
    En archive, le compteur "Déjà trouvé par" disparaît déjà.
    On garde Essais + Mot de la veille côte à côte.
    */
    .game-stats:has(
        .stat-solvers[hidden]
    ) {
        grid-template-columns:
            minmax(72px, 0.75fr)
            minmax(150px, 1.35fr)
            !important;
    }


    .game-stats:has(
        .stat-solvers[hidden]
    )
    .stat-attempts {
        grid-column:
            auto
            !important;
    }
}


@media (max-width: 350px) {

    .game-stats {
        grid-template-columns:
            minmax(50px, 0.62fr)
            minmax(86px, 0.98fr)
            minmax(114px, 1.40fr)
            !important;

        gap:
            5px
            !important;
    }


    .game-stats
    .stat {
        padding:
            7px
            6px
            !important;
    }


    .game-stats
    .stat-label {
        font-size:
            7.7px
            !important;
    }


    .game-stats
    .stat strong {
        font-size:
            12.5px
            !important;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat {
        grid-template-columns:
            minmax(0, 1fr)
            25px
            !important;

        padding:
            6px
            !important;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-kicker {
        font-size:
            7px
            !important;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-value,
    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-value.is-masked {
        font-size:
            9.5px
            !important;
    }


    body
    .game-stats
    .yesterday-word-card.is-inline-stat
    .yesterday-word-reveal {
        width:
            25px
            !important;

        min-width:
            25px
            !important;

        max-width:
            25px
            !important;

        height:
            25px
            !important;
    }
}


/* ==========================================================
   V29x — MOBILE STATS TYPOGRAPHY ALIGNMENT
   ========================================================== */

/*
Les valeurs Essais / Déjà trouvé par reprennent la signature
visuelle du mot de la veille : même taille responsive, même
poids et même rythme typographique. Les labels sont inchangés.
*/
@media (max-width: 700px) {

    .game-stats
    .stat strong {
        font-size:
            clamp(9.5px, 2.8vw, 13px)
            !important;

        font-weight:
            850
            !important;

        line-height:
            1;

        letter-spacing:
            -0.015em
            !important;
    }
}


/*
Même plancher que le mot de la veille sur les très petits
mobiles afin que les trois cartes restent visuellement alignées.
*/
@media (max-width: 350px) {

    .game-stats
    .stat strong {
        font-size:
            9.5px
            !important;
    }
}

/* ==========================================================
   V29y — MOBILE NIGHT HEADER / COMMAND DOCK
   ========================================================== */

/*
Mobile uniquement :
1. la marque devient un vrai bandeau bleu nuit bord-à-bord ;
2. logo + nom + slogan restent centrés comme un ensemble ;
3. le switch et les trois actions vivent dans un dock clair séparé ;
4. aucun HTML ni comportement JS n'est modifié.
*/
@media (max-width: 700px) {

    /*
    Le bandeau doit pouvoir toucher le haut du viewport, même si
    le conteneur principal conserve ses marges latérales pour le jeu.
    */
    .game {
        padding-top:
            0
            !important;
    }


    .game-header {
        grid-template-columns:
            minmax(0, 1fr)
            !important;

        grid-template-rows:
            auto
            auto
            !important;

        width:
            100%
            !important;

        box-sizing:
            border-box;

        margin-bottom:
            12px
            !important;

        padding:
            0
            !important;

        row-gap:
            10px
            !important;

        border:
            0
            !important;

        border-radius:
            0
            !important;

        background:
            transparent
            !important;

        box-shadow:
            none
            !important;

        overflow:
            visible;

        justify-items:
            center
            !important;
    }


    /*
    Full bleed réel : le parent .game reste volontairement plus étroit
    pour le jeu, mais la marque prend toute la largeur de l'écran.
    On reprend exactement la famille de bleu nuit du badge logo V17.
    */
    .game-header
    .brand-lockup {
        grid-column:
            1
            !important;

        grid-row:
            1
            !important;

        width:
            100vw
            !important;

        max-width:
            none
            !important;

        box-sizing:
            border-box;

        margin-left:
            calc(50% - 50vw)
            !important;

        margin-right:
            calc(50% - 50vw)
            !important;

        padding:
            calc(12px + env(safe-area-inset-top))
            calc(14px + env(safe-area-inset-right))
            12px
            calc(14px + env(safe-area-inset-left))
            !important;

        align-items:
            center
            !important;

        justify-content:
            center
            !important;

        justify-self:
            center
            !important;

        gap:
            10px
            !important;

        border-bottom:
            1px solid
            rgba(255, 215, 134, 0.12);

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

        box-shadow:
            0 7px 20px
            rgba(7, 16, 29, 0.13)
            !important;
    }


    /*
    Le petit badge sombre n'est plus nécessaire : le bandeau entier
    porte désormais cette identité. Le totem reste inchangé.
    */
    .game-header
    .brand-lockup
    .logo-mark {
        margin:
            0
            !important;

        padding:
            0
            !important;

        border-radius:
            0
            !important;

        background:
            transparent
            !important;

        box-shadow:
            none
            !important;
    }


    .game-header
    .brand-copy {
        min-width:
            0;

        text-align:
            left
            !important;
    }


    .game-header
    .brand-lockup h1 {
        color:
            #f7f4ed
            !important;

        text-align:
            left
            !important;

        text-shadow:
            none
            !important;
    }


    .game-header
    .brand-lockup .subtitle {
        color:
            rgba(255, 255, 255, 0.64)
            !important;

        text-align:
            left
            !important;

        text-shadow:
            none
            !important;
    }


    /*
    Le dock de commandes reste en dehors du bandeau sombre.
    Une seule ligne : switch à gauche, trois actions à droite.
    */
    .game-header
    .header-controls {
        grid-column:
            1
            !important;

        grid-row:
            2
            !important;

        display:
            grid
            !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            !important;

        width:
            min(100%, 430px)
            !important;

        box-sizing:
            border-box;

        margin:
            0 auto
            !important;

        padding:
            5px
            !important;

        gap:
            6px
            !important;

        align-items:
            center
            !important;

        justify-self:
            center
            !important;

        border:
            1px solid
            rgba(16, 40, 67, 0.09)
            !important;

        border-radius:
            9px
            !important;

        background:
            rgba(255, 255, 255, 0.82)
            !important;

        box-shadow:
            0 5px 16px
            rgba(16, 40, 67, 0.065)
            !important;

        backdrop-filter:
            blur(10px);

        -webkit-backdrop-filter:
            blur(10px);
    }


    .game-header
    .game-mode-switch {
        grid-column:
            1
            !important;

        grid-row:
            1
            !important;

        width:
            100%
            !important;

        min-width:
            0;

        margin:
            0
            !important;

        padding:
            0
            !important;
    }


    .game-header
    .game-mode-options {
        width:
            100%
            !important;

        min-width:
            0;

        height:
            34px
            !important;

        box-sizing:
            border-box;

        grid-template-columns:
            minmax(48px, 0.42fr)
            minmax(80px, 0.58fr)
            !important;

        padding:
            3px
            !important;

        gap:
            3px
            !important;

        border:
            1px solid
            #d8d4ca
            !important;

        border-radius:
            7px
            !important;

        background:
            #efede7
            !important;

        box-shadow:
            inset 0 1px 0
            rgba(255, 255, 255, 0.78)
            !important;
    }


    .game-header
    .game-mode-button {
        min-height:
            26px
            !important;

        padding:
            0 5px
            !important;

        border-radius:
            5px
            !important;
    }


    .game-header
    .header-actions {
        grid-column:
            2
            !important;

        grid-row:
            1
            !important;

        display:
            flex
            !important;

        width:
            auto
            !important;

        margin:
            0
            !important;

        gap:
            4px
            !important;

        align-items:
            center
            !important;

        justify-content:
            flex-end
            !important;
    }


    .game-header
    .header-icon-button {
        width:
            clamp(30px, 8vw, 32px)
            !important;

        min-width:
            clamp(30px, 8vw, 32px)
            !important;

        height:
            clamp(30px, 8vw, 32px)
            !important;

        padding:
            0
            !important;

        border:
            1px solid
            rgba(16, 40, 67, 0.10)
            !important;

        border-radius:
            7px
            !important;

        background:
            #f5f3ee
            !important;

        color:
            #102843
            !important;

        box-shadow:
            none
            !important;
    }


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

        height:
            15px
            !important;
    }
}

/* ==========================================================
   V29z — MOBILE STATS DOCK / STANDALONE SEARCH
   ========================================================== */

/*
Mobile uniquement :
1. Essais / Déjà trouvé par / Mot de la veille vivent dans un
   dock reprenant exactement le langage du dock de commandes V29y ;
2. la grande carte blanche du formulaire disparaît ;
3. le formulaire devient standalone dans la largeur utile du jeu ;
4. aucun HTML, JS, backend ou scoring n'est modifié.
*/
@media (max-width: 700px) {

    /*
    Le panneau n'est plus une carte visuelle sur mobile. Il reste
    seulement un conteneur structurel pour les stats, le formulaire
    et le message d'état.
    */
    .game-panel {
        width:
            100%;

        box-sizing:
            border-box;

        margin:
            0;

        padding:
            0
            !important;

        border:
            0
            !important;

        border-radius:
            0
            !important;

        background:
            transparent
            !important;

        box-shadow:
            none
            !important;

        overflow:
            visible;
    }


    /*
    Même empreinte que .header-controls en V29y :
    largeur, padding, bordure, rayon, fond et ombre identiques.
    Les trois cartes restent à l'intérieur et conservent leur rôle.
    */
    .game-stats {
        width:
            min(100%, 430px)
            !important;

        box-sizing:
            border-box;

        margin:
            0 auto 14px
            !important;

        padding:
            5px
            !important;

        gap:
            6px
            !important;

        border:
            1px solid
            rgba(16, 40, 67, 0.09)
            !important;

        border-radius:
            9px
            !important;

        background:
            rgba(255, 255, 255, 0.82)
            !important;

        box-shadow:
            0 5px 16px
            rgba(16, 40, 67, 0.065)
            !important;

        backdrop-filter:
            blur(10px);

        -webkit-backdrop-filter:
            blur(10px);
    }


    /*
    Les cartes internes sont légèrement plus intégrées au dock,
    sans changer leurs dimensions ni la hiérarchie typographique.
    */
    .game-stats
    .stat,
    body
    .game-stats
    .yesterday-word-card.is-inline-stat {
        box-shadow:
            none
            !important;
    }


    /*
    Le formulaire n'a plus d'enveloppe blanche. Il occupe toute la
    largeur utile définie par .game et reste donc aligné avec les
    marges naturelles du contenu mobile.
    */
    .game-panel
    #guess-form {
        width:
            100%;

        box-sizing:
            border-box;

        margin:
            0;

        padding:
            0;

        background:
            transparent;
    }


    .game-panel
    #guess-form
    .guess-line {
        width:
            100%;

        box-sizing:
            border-box;

        margin:
            0;
    }


    .game-panel
    #guess-form
    .guess-line input {
        box-sizing:
            border-box;
    }


    /*
    Le message appartient désormais au flux standalone lui aussi.
    Une petite marge l'aligne avec le champ sans recréer de carte.
    */
    .game-panel
    .message {
        margin:
            11px 2px 0
            !important;
    }
}

/* ==========================================================
   V29aa — MOBILE SWITCH TYPO / ICON EMPHASIS
   ========================================================== */

/*
Mobile uniquement : on donne un peu plus de présence au switch
sans modifier sa hauteur, sa largeur, son padding ou son layout.
Le texte Solo / Destins liés et leurs pictogrammes sont simplement
légèrement agrandis, avec deux replis pour les petits écrans.
*/
@media (max-width: 700px) {

    .game-header
    .game-mode-button-copy > strong {
        font-size:
            9.4px
            !important;

        line-height:
            1
            !important;
    }


    .game-header
    .game-mode-button svg {
        width:
            12px
            !important;

        height:
            12px
            !important;

        flex:
            0
            0
            12px
            !important;
    }
}


@media (max-width: 390px) {

    .game-header
    .game-mode-button-copy > strong {
        font-size:
            9.2px
            !important;
    }


    .game-header
    .game-mode-button svg {
        width:
            11.5px
            !important;

        height:
            11.5px
            !important;

        flex-basis:
            11.5px
            !important;
    }
}


@media (max-width: 340px) {

    .game-header
    .game-mode-button-copy > strong {
        font-size:
            8.8px
            !important;

        letter-spacing:
            -0.018em
            !important;
    }


    .game-header
    .game-mode-button svg {
        width:
            11px
            !important;

        height:
            11px
            !important;

        flex-basis:
            11px
            !important;
    }
}

/* ==========================================================
   V29ab — MOBILE OPEN CONTROLS / MODERN SEARCH
   ========================================================== */

/*
Mobile uniquement :
1. le switch + les trois actions quittent leur coque blanche ;
2. les trois stats quittent elles aussi leur dock parent ;
3. chaque élément garde sa propre identité visuelle ;
4. le champ de recherche perd sa bordure grise et devient plus léger.
*/
@media (max-width: 700px) {

    /*
    Plus de "carte autour des cartes" : on conserve seulement
    l'alignement et la grille définis par V29y.
    */
    .game-header
    .header-controls {
        width:
            min(100%, 430px)
            !important;

        margin:
            0 auto
            !important;

        padding:
            0
            !important;

        gap:
            8px
            !important;

        border:
            0
            !important;

        border-radius:
            0
            !important;

        background:
            transparent
            !important;

        box-shadow:
            none
            !important;

        backdrop-filter:
            none
            !important;

        -webkit-backdrop-filter:
            none
            !important;
    }


    /*
    Les boutons d'action deviennent de petits objets autonomes.
    On garde le langage clair / bleu nuit déjà installé en V29y.
    */
    .game-header
    .header-icon-button {
        background:
            rgba(255, 255, 255, 0.76)
            !important;

        border-color:
            rgba(16, 40, 67, 0.075)
            !important;

        box-shadow:
            0 3px 10px
            rgba(16, 40, 67, 0.05)
            !important;
    }


    /*
    Même principe pour les statistiques : le parent n'est plus une
    coque. Les trois cartes existantes se suffisent à elles-mêmes.
    */
    .game-stats {
        width:
            min(100%, 430px)
            !important;

        margin:
            0 auto 14px
            !important;

        padding:
            0
            !important;

        gap:
            7px
            !important;

        border:
            0
            !important;

        border-radius:
            0
            !important;

        background:
            transparent
            !important;

        box-shadow:
            none
            !important;

        backdrop-filter:
            none
            !important;

        -webkit-backdrop-filter:
            none
            !important;
    }


    .game-stats
    .stat,
    body
    .game-stats
    .yesterday-word-card.is-inline-stat {
        background:
            rgba(255, 255, 255, 0.68)
            !important;

        box-shadow:
            0 3px 11px
            rgba(16, 40, 67, 0.04)
            !important;
    }


    /*
    Champ standalone : plus de trait gris permanent. Le volume vient
    du fond et d'une ombre diffuse ; l'état actif utilise un halo
    bleu nuit discret plutôt qu'une bordure lourde.
    */
    .game-panel
    #guess-form
    .guess-line input {
        border:
            0
            !important;

        border-radius:
            8px
            !important;

        outline:
            0;

        background:
            rgba(255, 255, 255, 0.88)
            !important;

        box-shadow:
            0 4px 15px
            rgba(16, 40, 67, 0.065)
            !important;

        transition:
            box-shadow 160ms ease,
            background 160ms ease,
            transform 160ms ease
            !important;
    }


    .game-panel
    #guess-form
    .guess-line input:focus {
        border:
            0
            !important;

        background:
            #ffffff
            !important;

        box-shadow:
            0 0 0 2px
            rgba(16, 40, 67, 0.11),
            0 6px 18px
            rgba(16, 40, 67, 0.085)
            !important;
    }


    .game-panel
    #guess-form
    .guess-line input:disabled {
        border:
            0
            !important;

        background:
            rgba(239, 239, 235, 0.82)
            !important;

        box-shadow:
            none
            !important;
    }
}

/* ==========================================================
   V29ac — MOBILE CONTROLS COMPACT WIDTH / STRONGER PRESENCE
   ========================================================== */

/*
Mobile uniquement :
1. le groupe switch + actions cesse de s'étirer inutilement ;
2. le switch gagne de la hauteur et de la présence typographique ;
3. les trois actions deviennent légèrement plus grandes ;
4. l'ensemble reste centré et tient jusqu'à 320 px.
*/
@media (max-width: 700px) {

    .game-header
    .header-controls {
        grid-template-columns:
            auto
            auto
            !important;

        width:
            min(100%, 390px)
            !important;

        gap:
            7px
            !important;

        justify-content:
            center
            !important;
    }


    /*
    Le switch ne consomme plus tout le track disponible. Sa largeur
    reste fluide sur les petits téléphones puis plafonne à 220 px.
    */
    .game-header
    .game-mode-switch {
        width:
            clamp(180px, 55vw, 220px)
            !important;

        justify-self:
            end
            !important;
    }


    .game-header
    .game-mode-options {
        height:
            40px
            !important;

        grid-template-columns:
            minmax(54px, 0.40fr)
            minmax(92px, 0.60fr)
            !important;
    }


    .game-header
    .game-mode-button {
        min-height:
            32px
            !important;

        padding:
            0 6px
            !important;

        gap:
            5px
            !important;
    }


    .game-header
    .game-mode-button-copy > strong {
        font-size:
            10.2px
            !important;

        line-height:
            1
            !important;
    }


    .game-header
    .game-mode-button svg {
        width:
            13.5px
            !important;

        height:
            13.5px
            !important;

        flex:
            0
            0
            13.5px
            !important;
    }


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


    .game-header
    .header-icon-button {
        width:
            clamp(34px, 9.2vw, 36px)
            !important;

        min-width:
            clamp(34px, 9.2vw, 36px)
            !important;

        height:
            clamp(34px, 9.2vw, 36px)
            !important;
    }


    .game-header
    .header-icon-button svg {
        width:
            17px
            !important;

        height:
            17px
            !important;
    }
}


@media (max-width: 390px) {

    .game-header
    .game-mode-button-copy > strong {
        font-size:
            10px
            !important;
    }


    .game-header
    .game-mode-button svg {
        width:
            13px
            !important;

        height:
            13px
            !important;

        flex-basis:
            13px
            !important;
    }
}


@media (max-width: 340px) {

    .game-header
    .header-controls {
        gap:
            6px
            !important;
    }


    .game-header
    .game-mode-switch {
        width:
            180px
            !important;
    }


    .game-header
    .game-mode-button {
        padding:
            0 4px
            !important;

        gap:
            4px
            !important;
    }


    .game-header
    .game-mode-button-copy > strong {
        font-size:
            9.4px
            !important;

        letter-spacing:
            -0.018em
            !important;
    }


    .game-header
    .game-mode-button svg {
        width:
            12.5px
            !important;

        height:
            12.5px
            !important;

        flex-basis:
            12.5px
            !important;
    }


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


    .game-header
    .header-icon-button {
        width:
            33px
            !important;

        min-width:
            33px
            !important;

        height:
            33px
            !important;
    }


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

        height:
            16px
            !important;
    }
}

/* ==========================================================
   V29ad — MOBILE CONTROLS FULL WIDTH / STRONGER SCALE
   ========================================================== */

/*
Correction de direction par rapport à V29ac :
1. la ligne switch + actions réutilise toute la largeur utile mobile ;
2. le switch prend tout l'espace restant devant les trois actions ;
3. hauteur, textes et pictogrammes gagnent encore en présence ;
4. les marges normales du jeu restent intactes et le tout tient à 320 px.
*/
@media (max-width: 700px) {

    .game-header
    .header-controls {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            !important;

        width:
            100%
            !important;

        max-width:
            none
            !important;

        gap:
            8px
            !important;

        justify-content:
            stretch
            !important;

        justify-self:
            stretch
            !important;
    }


    .game-header
    .game-mode-switch {
        width:
            100%
            !important;

        min-width:
            0;

        justify-self:
            stretch
            !important;
    }


    .game-header
    .game-mode-options {
        width:
            100%
            !important;

        height:
            44px
            !important;

        padding:
            4px
            !important;

        gap:
            4px
            !important;

        grid-template-columns:
            minmax(58px, 0.40fr)
            minmax(98px, 0.60fr)
            !important;
    }


    .game-header
    .game-mode-button {
        min-height:
            36px
            !important;

        padding:
            0 8px
            !important;

        gap:
            6px
            !important;
    }


    .game-header
    .game-mode-button-copy > strong {
        font-size:
            11px
            !important;

        line-height:
            1
            !important;
    }


    .game-header
    .game-mode-button svg {
        width:
            15.5px
            !important;

        height:
            15.5px
            !important;

        flex:
            0
            0
            15.5px
            !important;
    }


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


    .game-header
    .header-icon-button {
        width:
            38px
            !important;

        min-width:
            38px
            !important;

        height:
            38px
            !important;
    }


    .game-header
    .header-icon-button svg {
        width:
            18px
            !important;

        height:
            18px
            !important;
    }
}


@media (max-width: 390px) {

    .game-header
    .header-controls {
        gap:
            7px
            !important;
    }


    .game-header
    .game-mode-button {
        padding:
            0 6px
            !important;

        gap:
            5px
            !important;
    }


    .game-header
    .game-mode-button-copy > strong {
        font-size:
            10.6px
            !important;
    }


    .game-header
    .game-mode-button svg {
        width:
            15px
            !important;

        height:
            15px
            !important;

        flex-basis:
            15px
            !important;
    }


    .game-header
    .header-icon-button {
        width:
            37px
            !important;

        min-width:
            37px
            !important;

        height:
            37px
            !important;
    }
}


@media (max-width: 340px) {

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


    .game-header
    .game-mode-options {
        grid-template-columns:
            minmax(52px, 0.40fr)
            minmax(88px, 0.60fr)
            !important;
    }


    .game-header
    .game-mode-button {
        padding:
            0 5px
            !important;

        gap:
            4px
            !important;
    }


    .game-header
    .game-mode-button-copy > strong {
        font-size:
            10px
            !important;

        letter-spacing:
            -0.015em
            !important;
    }


    .game-header
    .game-mode-button svg {
        width:
            14px
            !important;

        height:
            14px
            !important;

        flex-basis:
            14px
            !important;
    }


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


    .game-header
    .header-icon-button {
        width:
            36px
            !important;

        min-width:
            36px
            !important;

        height:
            36px
            !important;
    }


    .game-header
    .header-icon-button svg {
        width:
            17px
            !important;

        height:
            17px
            !important;
    }
}

/* ==========================================================
   V29ae — MOBILE CONTROLS EQUAL HEIGHT / BALANCED WIDTH
   ========================================================== */

/*
Affinage de V29ad :
1. le switch et les trois boutons d'action ont exactement la même hauteur ;
2. les gaps existants sont conservés ;
3. les actions gagnent en largeur et réduisent naturellement le switch ;
4. la ligne reste pleine largeur et tient sur les petits mobiles.
*/
@media (max-width: 700px) {

    .game-header
    .header-controls {
        gap:
            8px
            !important;
    }


    .game-header
    .game-mode-options {
        height:
            44px
            !important;
    }


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


    .game-header
    .header-icon-button {
        width:
            44px
            !important;

        min-width:
            44px
            !important;

        height:
            44px
            !important;
    }


    .game-header
    .header-icon-button svg {
        width:
            19.5px
            !important;

        height:
            19.5px
            !important;
    }
}


@media (max-width: 390px) {

    .game-header
    .header-controls {
        gap:
            7px
            !important;
    }


    .game-header
    .game-mode-options {
        height:
            42px
            !important;
    }


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


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


    .game-header
    .header-icon-button {
        width:
            42px
            !important;

        min-width:
            42px
            !important;

        height:
            42px
            !important;
    }


    .game-header
    .header-icon-button svg {
        width:
            19px
            !important;

        height:
            19px
            !important;
    }
}


@media (max-width: 340px) {

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


    .game-header
    .game-mode-options {
        height:
            40px
            !important;

        padding:
            3px
            !important;
    }


    .game-header
    .game-mode-button {
        min-height:
            32px
            !important;
    }


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


    .game-header
    .header-icon-button {
        width:
            40px
            !important;

        min-width:
            40px
            !important;

        height:
            40px
            !important;
    }


    .game-header
    .header-icon-button svg {
        width:
            18px
            !important;

        height:
            18px
            !important;
    }
}

/* ==========================================================
   V29af — DESKTOP NIGHT HEADER / OPEN GAME LAYOUT
   ========================================================== */

/*
Desktop : même langage que le mobile validé en V29ab/V29ae.
Le bandeau marque est full bleed, les commandes sont ouvertes,
le panneau blanc disparaît et Mot de la veille rejoint les stats.
*/
@media (min-width: 701px) {
    .game {
        padding-top: 0 !important;
    }

    .game-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        width: 100% !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
        gap: 14px !important;
        align-items: center !important;
        justify-items: center !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible;
    }

    .game-header .brand-lockup {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100vw !important;
        max-width: none !important;
        box-sizing: border-box;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 17px max(24px, calc((100vw - 760px) / 2)) !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: center !important;
        gap: 12px !important;
        border-bottom: 1px solid rgba(255, 215, 134, 0.12);
        background: linear-gradient(180deg, #07101d 0%, #0c1930 100%) !important;
        box-shadow: 0 8px 24px rgba(7, 16, 29, 0.12) !important;
    }

    .game-header .brand-lockup .logo-mark {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .game-header .brand-copy {
        min-width: 0;
        text-align: left !important;
    }

    .game-header .brand-lockup h1 {
        color: #f7f4ed !important;
        text-align: left !important;
    }

    .game-header .brand-lockup .subtitle {
        color: rgba(255, 255, 255, 0.64) !important;
        text-align: left !important;
    }

    /* Commandes hors bandeau, sans carte englobante. */
    .game-header .header-controls {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: auto auto !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 10px !important;
        align-items: center !important;
        justify-self: center !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .game-header .game-mode-switch {
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
        justify-self: start !important;
    }

    .game-header .game-mode-options {
        width: 233px !important;
        min-width: 0;
    }

    .game-header .header-actions {
        display: flex !important;
        width: auto !important;
        margin: 0 !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .game-header .header-icon-button {
        background: rgba(255, 255, 255, 0.76) !important;
        border-color: rgba(16, 40, 67, 0.075) !important;
        box-shadow: 0 3px 10px rgba(16, 40, 67, 0.05) !important;
    }

    /* Le panneau devient purement structurel. */
    .game-panel {
        width: 100%;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible;
    }

    .game-stats {
        grid-template-columns:
            minmax(130px, 0.78fr)
            minmax(190px, 1fr)
            minmax(230px, 1.22fr) !important;
        width: 100% !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
        gap: 10px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .game-stats .stat,
    body .game-stats .yesterday-word-card {
        min-width: 0;
        min-height: 64px;
        box-sizing: border-box;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.68) !important;
        box-shadow: 0 3px 11px rgba(16, 40, 67, 0.04) !important;
    }

    body .game-stats .yesterday-word-card[hidden] {
        display: none !important;
    }

    /* Mot de la veille devient la troisième carte, plus une bannière. */
    body .game-stats .yesterday-word-card {
        position: static;
        isolation: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 34px;
        grid-template-rows: auto;
        padding: 11px 12px !important;
        overflow: hidden;
        gap: 8px !important;
        align-items: center;
        border: 0 !important;
        border-radius: 5px !important;
        color: #18202a;
    }

    body .game-stats .yesterday-word-card::before,
    body .game-stats .yesterday-word-emblem,
    body .game-stats .yesterday-word-meta {
        display: none !important;
    }

    body .game-stats .yesterday-word-copy {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        min-width: 0;
        gap: 4px !important;
    }

    body .game-stats .yesterday-word-heading {
        display: block !important;
        min-width: 0;
    }

    body .game-stats .yesterday-word-kicker {
        display: block;
        overflow: hidden;
        color: #777 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.05;
        letter-spacing: 0.05em !important;
        text-transform: uppercase;
        white-space: nowrap !important;
    }

    body .game-stats .yesterday-word-value,
    body .game-stats .yesterday-word-value.is-masked {
        display: flex;
        min-width: 0 !important;
        width: auto;
        min-height: 20px;
        padding: 0 !important;
        overflow: hidden;
        align-items: center;
        justify-content: flex-start;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #20242a !important;
        font-size: 16px !important;
        font-weight: 850 !important;
        line-height: 1;
        letter-spacing: -0.015em !important;
        text-align: left;
        white-space: nowrap;
    }

    body .game-stats .yesterday-word-value.is-masked {
        color: #777 !important;
        font-size: 12px !important;
        letter-spacing: 0.055em !important;
    }

    body .game-stats .yesterday-word-reveal {
        position: relative;
        display: inline-flex !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px;
        padding: 0 !important;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(16, 40, 67, 0.10) !important;
        border-radius: 5px !important;
        background: rgba(255, 255, 255, 0.82) !important;
        box-shadow: 0 1px 3px rgba(16, 40, 67, 0.05) !important;
        color: #102843 !important;
    }

    /* Quand la troisième carte est masquée, les deux autres réoccupent la ligne. */
    body.group-game-active .game-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .game-stats:has(.stat-solvers[hidden]) {
        grid-template-columns: minmax(160px, 0.8fr) minmax(260px, 1.2fr) !important;
    }

    /* Recherche standalone, sans bordure grise permanente. */
    .game-panel #guess-form,
    .game-panel #guess-form .guess-line {
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    .game-panel #guess-form .guess-line input {
        box-sizing: border-box;
        border: 0 !important;
        border-radius: 8px !important;
        outline: 0;
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 4px 15px rgba(16, 40, 67, 0.065) !important;
        transition: box-shadow 160ms ease, background 160ms ease, transform 160ms ease !important;
    }

    .game-panel #guess-form .guess-line input:focus {
        border: 0 !important;
        background: #ffffff !important;
        box-shadow:
            0 0 0 2px rgba(16, 40, 67, 0.11),
            0 6px 18px rgba(16, 40, 67, 0.085) !important;
    }

    .game-panel .message {
        margin: 11px 2px 0 !important;
    }
}

/* ==========================================================
   V29ah — DESTINS LIÉS SESSION BAR / ROOM STAT
   ========================================================== */

/*
Le code de room quitte le bandeau de session et occupe le
3e emplacement des stats quand Destins liés est actif.
Le bandeau sombre est donc réservé à la présence, aux joueurs
et aux deux actions réellement utiles : partager / quitter.
*/
.stat-group-room {
    display: none;
}

body.group-game-active
.game-stats
.stat-group-room {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

body.group-game-active
.game-stats
.stat-group-room
.group-session-code {
    color: #102843 !important;
    font-weight: 900 !important;
    letter-spacing: 0.09em !important;
    white-space: nowrap;
}


/*
Le bandeau Destins liés n'a plus que deux zones :
présence + roster flexible, puis actions fixes.
*/
.group-session-bar {
    grid-template-columns:
        minmax(0, 1fr)
        auto;
}

.group-session-middle {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.group-session-online {
    flex: 0 0 auto;
}

.group-session-participants {
    min-width: 0;
    flex: 1 1 auto;
}

/*
Le bouton « … » ouvrait le même gestionnaire que Quitter.
Il reste dans le DOM pour ne toucher à aucune logique JS,
mais n'a plus de représentation visuelle.
*/
.group-session-actions
#group-session-manage {
    display: none !important;
}


@media (min-width: 701px) {

    /*
    En équipe, la troisième carte est maintenant le code de room :
    on conserve donc la distribution desktop à trois colonnes.
    */
    body.group-game-active
    .game-stats {
        grid-template-columns:
            minmax(130px, 0.78fr)
            minmax(190px, 1fr)
            minmax(230px, 1.22fr)
            !important;
    }

    body.group-game-active
    .game-stats
    .stat-group-room
    .group-session-code {
        font-size: 16px !important;
    }
}


@media (max-width: 700px) {

    .group-session-middle {
        gap: 7px;
    }

    body.group-game-active
    .game-stats
    .stat-group-room
    .group-session-code {
        font-size:
            clamp(10.5px, 3vw, 13px)
            !important;
    }
}


@media (max-width: 350px) {

    .group-session-middle {
        gap: 5px;
    }

    body.group-game-active
    .game-stats
    .stat-group-room
    .group-session-code {
        font-size: 10px !important;
    }
}

/* ==========================================================
   V29ai — GROUP STATS / ROSTER HARMONY
   ========================================================== */

/*
Destins liés utilise désormais exactement trois cartes :
Essais équipe / Joueurs / Destins liés.
Le Mot de la veille reste un élément solo et est explicitement
masqué en groupe, y compris après les règles mobiles V29v.
*/
body.group-game-active
.game-stats {
    grid-template-columns:
        repeat(3, minmax(0, 1fr))
        !important;

    --group-stat-value-size:
        15px;
}

body.group-game-active
.game-stats
.yesterday-word-card,
body.group-game-active
.game-stats
.yesterday-word-card.is-inline-stat {
    display:
        none
        !important;
}

body.group-game-active
.game-stats
.stat-attempts,
body.group-game-active
.game-stats
.stat-solvers,
body.group-game-active
.game-stats
.stat-group-room {
    min-width:
        0;

    width:
        auto;
}

/*
En solo, #solved-count reste le compteur historique.
En groupe, la même carte devient la présence temps réel :
"1 en ligne", "2 en ligne", etc. La pastille existante du
WebSocket est réutilisée et devient verte quand il est connecté.
*/
.group-stat-online {
    display:
        none;
}

body.group-game-active
.game-stats
.stat-solvers
#solved-count {
    display:
        none
        !important;
}

body.group-game-active
.game-stats
.stat-solvers
.group-stat-online {
    display:
        inline-flex
        !important;

    min-width:
        0;

    align-items:
        center;

    color:
        #20242a
        !important;

    white-space:
        nowrap;
}

/*
Les trois valeurs utilisent rigoureusement la même famille,
la même taille, le même poids et la même hauteur de ligne.
Le code garde seulement un très léger tracking fonctionnel.
*/
body.group-game-active
.game-stats
#attempt-count,
body.group-game-active
.game-stats
.group-stat-online,
body.group-game-active
.game-stats
.group-session-code {
    font-family:
        inherit
        !important;

    font-size:
        var(--group-stat-value-size)
        !important;

    font-weight:
        850
        !important;

    line-height:
        1
        !important;
}

body.group-game-active
.game-stats
.group-session-code {
    color:
        #20242a
        !important;

    letter-spacing:
        0.045em
        !important;
}

body.group-game-active
.game-stats
.group-stat-online {
    letter-spacing:
        -0.015em
        !important;
}

/* Destins liés : code + partage vivent dans la même carte. */
.group-room-stat-row {
    display:
        flex;

    min-width:
        0;

    width:
        100%;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        7px;
}

body.group-game-active
.game-stats
.group-room-share {
    display:
        inline-flex
        !important;

    width:
        30px;

    min-width:
        30px;

    height:
        30px;

    padding:
        0;

    flex:
        0 0 30px;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(16, 40, 67, 0.11)
        !important;

    border-radius:
        5px
        !important;

    background:
        rgba(255, 255, 255, 0.82)
        !important;

    box-shadow:
        0 1px 3px rgba(16, 40, 67, 0.05)
        !important;

    color:
        #102843
        !important;
}

body.group-game-active
.game-stats
.group-room-share svg {
    width:
        15px
        !important;

    height:
        15px
        !important;
}

/*
Le bandeau sombre ne contient plus que le roster et Quitter.
Le roster peut dépasser horizontalement : le défilement reste
naturel au doigt/trackpad mais aucune scrollbar n'est affichée.
*/
.group-session-bar {
    grid-template-columns:
        minmax(0, 1fr)
        auto
        !important;

    align-items:
        center;
}

.group-session-middle {
    display:
        flex;

    min-width:
        0;

    overflow:
        hidden;

    align-items:
        center;
}

.group-session-participants {
    display:
        flex;

    min-width:
        0;

    width:
        100%;

    flex:
        1 1 auto;

    flex-wrap:
        nowrap;

    gap:
        6px;

    overflow-x:
        auto
        !important;

    overflow-y:
        hidden;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        none;

    touch-action:
        pan-x;

    overscroll-behavior-inline:
        contain;
}

.group-session-participants::-webkit-scrollbar {
    display:
        none;

    width:
        0;

    height:
        0;
}

.group-session-participants
.group-player-chip.is-compact {
    flex:
        0 0 auto;

    border-radius:
        6px
        !important;
}

.group-session-actions {
    flex:
        0 0 auto;
}

/* Le gestionnaire reste dans le DOM pour la logique historique. */
.group-session-actions
#group-session-manage {
    display:
        none
        !important;
}


@media (max-width: 700px) {

    body.group-game-active
    .game-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr))
            !important;

        --group-stat-value-size:
            clamp(9.5px, 2.8vw, 13px);
    }

    body.group-game-active
    .game-stats
    .group-room-share {
        width:
            27px;

        min-width:
            27px;

        height:
            27px;

        flex-basis:
            27px;
    }

    body.group-game-active
    .game-stats
    .group-room-share svg {
        width:
            14px
            !important;

        height:
            14px
            !important;
    }

    .group-session-participants {
        gap:
            5px;
    }

    .group-session-participants
    .group-player-chip.is-compact {
        border-radius:
            5px
            !important;
    }
}


@media (max-width: 350px) {

    body.group-game-active
    .game-stats {
        --group-stat-value-size:
            9.5px;
    }

    .group-room-stat-row {
        gap:
            4px;
    }

    body.group-game-active
    .game-stats
    .group-room-share {
        width:
            25px;

        min-width:
            25px;

        height:
            25px;

        flex-basis:
            25px;
    }
}

/* ==========================================================
   V29aj — GROUP LEAVE CONFIRMATION
   ========================================================== */

/*
Le modal conserve son langage visuel existant, mais la sortie
possède désormais un état dédié : aucun code, lien ou roster
n'est affiché lorsqu'on demande à quitter l'équipe.
*/
.group-leave-confirm-panel[hidden] {
    display: none !important;
}

.group-leave-confirm-panel {
    display: grid;
    gap: 13px;
}

.group-leave-confirm-copy {
    padding: 13px 14px;
    border: 1px solid #e1e1dc;
    border-radius: 6px;
    background: #ffffff;
}

.group-leave-confirm-copy strong {
    display: block;
    color: #172132;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
}

.group-leave-confirm-copy p {
    margin: 5px 0 0;
    color: #73777d;
    font-size: 10px;
    line-height: 1.45;
}

.group-leave-confirm-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
}

@media (max-width: 390px) {
    .group-leave-confirm-actions {
        grid-template-columns: 1fr;
    }

    .group-leave-confirm-actions .group-danger-button {
        grid-row: 1;
    }
}

/* ==========================================================
   V29aw — MODAL MOTION + QUIET GROUP OPEN
   ========================================================== */

/* Le dialog reçoit le focus sans afficher de contour parasite. */
.group-dialog:focus {
    outline: none;
}

/*
Ouverture desktop alignée sur le langage Archives / Statistiques :
petite montée, légère échelle et fondu du backdrop.
*/
.group-dialog[open] {
    animation:
        group-dialog-in
        0.32s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

.group-dialog[open]::backdrop {
    animation:
        group-dialog-backdrop-in
        0.20s
        ease-out
        both;
}

@keyframes group-dialog-backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes group-dialog-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/*
Mobile : vrai bottom-sheet, même durée et même courbe que
Archives / Statistiques. Aucun champ n'est focalisé par l'ouverture.
*/
@media (max-width: 700px) {
    .group-dialog[open] {
        animation:
            group-dialog-sheet-in
            0.34s
            cubic-bezier(0.22, 1, 0.36, 1)
            both;
    }
}

@keyframes group-dialog-sheet-in {
    from {
        opacity: 1;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .group-dialog[open],
    .group-dialog[open]::backdrop {
        animation: none;
    }
}

/* ==========================================================
   V29ax — MODAL CLOSE MOTION + ARCHIVE TWO-CARD STATS
   ========================================================== */

/*
Le <dialog> natif doit rester ouvert pendant l'animation de sortie.
JS ajoute is-closing, puis appelle dialog.close() seulement à la fin.
*/
.group-dialog.is-closing[open] {
    pointer-events: none;
    animation:
        group-dialog-out
        0.22s
        cubic-bezier(0.4, 0, 1, 1)
        both;
}

.group-dialog.is-closing[open]::backdrop {
    animation:
        group-dialog-backdrop-out
        0.20s
        ease-in
        both;
}

@keyframes group-dialog-backdrop-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes group-dialog-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
}

@media (max-width: 700px) {
    .group-dialog.is-closing[open] {
        animation:
            group-dialog-sheet-out
            0.28s
            cubic-bezier(0.4, 0, 1, 1)
            both;
    }
}

@keyframes group-dialog-sheet-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(100%);
    }
}

/*
Archive solo : uniquement les deux informations pertinentes.
Le Mot de la veille est déjà explicitement masqué en archive.
*/
body.archive-game-active:not(.group-game-active)
.game-stats {
    grid-template-columns:
        repeat(2, minmax(0, 1fr))
        !important;
}

body.archive-game-active:not(.group-game-active)
.game-stats
.stat-group-room,
body.archive-game-active:not(.group-game-active)
.game-stats
.yesterday-word-card,
body.archive-game-active:not(.group-game-active)
.game-stats
.yesterday-word-card.is-inline-stat {
    display:
        none
        !important;
}

@media (prefers-reduced-motion: reduce) {
    .group-dialog.is-closing[open],
    .group-dialog.is-closing[open]::backdrop {
        animation: none;
    }
}

/* ==========================================================
   V29ba — GROUP ROSTER CHIP SIZE
   ========================================================== */

/*
Le roster du bandeau Destins liés reste compact et scrollable,
mais le nom des joueurs et leur pastille gagnent en présence.
Le réglage est volontairement limité au bandeau de session :
les autres chips utilisées dans les modales restent inchangées.
*/
.group-session-participants
.group-player-chip.is-compact {
    min-height:
        26px;

    padding:
        0 8px;

    gap:
        6px;

    font-size:
        9.5px;

    line-height:
        1;
}

.group-session-participants
.group-player-chip.is-compact
.group-player-dot {
    width:
        8px;

    height:
        8px;

    flex-basis:
        8px;
}


@media (max-width: 700px) {

    .group-session-participants
    .group-player-chip.is-compact {
        min-height:
            28px;

        padding:
            0 9px;

        gap:
            7px;

        font-size:
            10px;
    }

    .group-session-participants
    .group-player-chip.is-compact
    .group-player-dot {
        width:
            9px;

        height:
            9px;

        flex-basis:
            9px;
    }
}


@media (max-width: 350px) {

    .group-session-participants
    .group-player-chip.is-compact {
        min-height:
            26px;

        padding:
            0 8px;

        gap:
            6px;

        font-size:
            9.5px;
    }

    .group-session-participants
    .group-player-chip.is-compact
    .group-player-dot {
        width:
            8px;

        height:
            8px;

        flex-basis:
            8px;
    }
}

/* ==========================================================
   V29be — DESTINS LIÉS : ANIMATIONS CONCURRENTES
   ========================================================== */

/*
Plusieurs propositions reçues presque simultanément restent visibles
ensemble pendant leur Motmètre. Chaque ligne conserve sa propre
animation au lieu d'être remplacée par la proposition suivante.
*/
body.group-game-active
#latest-guess.is-group-animation-stack {
    display: grid;
}

body.group-game-active
#latest-guess.is-group-animation-stack
.latest-row + .latest-row {
    border-top:
        1px solid
        rgba(13, 29, 50, 0.10)
        !important;
}