/* ---------------------------------------------------------------------------
   Motchi : l'espace « Entre amis » (lot 4).

   Tout ce que le multijoueur demande au même endroit : les parties en cours, la
   création, le code reçu, et les règles en trente secondes. L'accueil n'en
   porte plus rien, il ne fait qu'y mener.

   Les règles du socle valent ici : toute encre est un jeton, donc mesurée, et
   aucune valeur de couleur n'est écrite en clair. Les voiles font exception,
   un blanc translucide étant une transparence et non une teinte.
--------------------------------------------------------------------------- */

/* ── Le retour ──
   Il nomme ce que l'on quitte : depuis un espace, la marche au-dessus est le
   choix du mode, pas « la page précédente ». Le dessin vient du socle
   (variante `back`) ; l'écran ne pose que sa marge. */
.friends-back { margin-bottom: var(--space-5); }

/* ── L'en-tête ──
   La pastille d'identité et le titre : l'espace dit à qui il appartient, ce
   qu'un visiteur n'a pas et pour qui l'en-tête est une présentation. */
.friends-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }

.friends-head-mark {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gold);
    color: var(--on-gold);
    font-family: var(--font-title);
    font-size: var(--type-card);
    font-weight: 600;
    text-transform: uppercase;
}

/* Les deux rythmes, à l'opposé du titre. Ils ne disent pas où l'on est mais ce
   que l'espace propose, et ne se montrent qu'au large : sur un téléphone, ils
   pousseraient le titre sur trois lignes pour répéter ce que le formulaire de
   création dit plus bas, avec ce qu'ils changent. */
.friends-head-modes { display: none; }

/* ── L'arrivée d'un visiteur ──
   Ce qu'est le mode d'un côté, la scène de l'autre : c'est la mise en page de
   la carte de l'accueil, parce que c'est la même chose à dire. Sur un
   téléphone, la scène passe dessous. */
.friends-landing { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.friends-landing-copy { align-self: center; }
.friends-landing-copy .ui-title { margin: var(--space-4) 0 var(--space-3); }
.friends-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 0; }

.friends-landing-scene { position: relative; display: flex; align-items: center; justify-content: center; }
.friends-landing-scene .ui-scene { max-width: 320px; }

/* Le voile clair derrière la scène : le proto le pose ici et le retire de la
   carte de l'accueil, dont le feutre fait déjà ce travail. */
.friends-scene-veil {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 330px;
    max-width: 100%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, .02) 57%, transparent 58%);
}

/* ── Les parties en cours ──
   La ligne entière est la cible du clic : sur un téléphone, un lien dans la
   ligne est une cible de la taille d'un mot. */
.friends-running { margin-bottom: var(--space-5); }

.friends-section-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.friends-section-head > div { flex: 1; min-width: 0; }

.friends-count {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 29px;
    height: 29px;
    border-radius: 50%;
    background: var(--mode-light);
    color: var(--mode-dark);
    font-family: var(--font-title);
    font-size: var(--type-sm);
    font-weight: 600;
}

.friends-game-list { display: flex; flex-direction: column; gap: var(--space-2); }

.friends-game {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--tile-border);
    border-radius: var(--radius-lg);
    background: var(--tile);
    color: var(--ink);
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast);
}
.friends-game:hover { transform: translateY(-2px); box-shadow: var(--shadow-paper-md); }
.friends-game:focus-visible { outline: none; box-shadow: var(--ring); }

.friends-game-mark {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mode);
    color: var(--on-accent);
    font-family: var(--font-title);
    font-weight: 600;
    text-transform: uppercase;
}

.friends-game-go { display: none; flex: none; color: var(--mode-dark); font-size: var(--type-sm); font-weight: 900; }
.friends-game-go span { margin-left: var(--space-1); }

/* ── Le reste de la liste ──
   Au-delà de deux parties, la création se retrouvait hors de l'écran. Les deux
   dernières restent posées, le reste se déplie sous elles. */
/* Le bouton reste au bas de la liste, dépliée ou non : un `<summary>` ouvre
   forcément ce qui le suit, donc il était posé avant les lignes qu'il révèle et
   se retrouvait au milieu du bloc une fois ouvert. C'est l'ordre d'affichage qui
   le descend, et non celui du document, où il doit rester devant ce qu'il
   commande. */
.friends-more { margin-top: var(--space-2); display: flex; flex-direction: column; }
.friends-more > summary { order: 2; list-style: none; cursor: pointer; }
.friends-more[open] > summary { margin-top: var(--space-2); }
.friends-more > summary::-webkit-details-marker { display: none; }

.friends-more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    color: var(--mode-dark);
    font-size: var(--type-sm);
    font-weight: 900;
}
.friends-more > summary:hover { background: var(--mode-light); }
.friends-more > summary:focus-visible { outline: none; box-shadow: var(--ring); }

.friends-more[open] .friends-more-open,
.friends-more:not([open]) .friends-more-close { display: none; }
.friends-more[open] .friends-fold-sign { transform: rotate(180deg); }


.friends-game-name { flex: 1; min-width: 0; }
.friends-game-name b { display: block; font-family: var(--font-code); font-weight: 700; letter-spacing: 1px; }
.friends-game-name small { display: block; font-size: var(--type-sm); color: var(--cream-sub); }

/* L'invitation au compte : ce qu'elle propose à gauche, le bouton à droite. Il
   ne prend pas toute la largeur, n'étant pas l'action de l'écran mais une offre
   posée en chemin. Sur un téléphone, il passe dessous et s'étale. */
.friends-invite { margin-bottom: var(--space-5); }
.friends-invite .ui-title { margin: var(--space-1) 0 var(--space-2); }
.friends-invite .ui-btn { margin-top: var(--space-4); }

@media (min-width: 900px) {
    .friends-invite {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-5);
    }
    .friends-invite .ui-btn { width: auto; min-width: 245px; margin-top: 0; }
}

/* ── Le séparateur ──
   Il nomme ce qui suit plutôt que de tracer un trait : deux gestes commencent
   ici, et rien ne les annonçait. */
.friends-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-4);
    color: var(--light-sub);
    font-family: var(--font-code);
    font-size: var(--type-label);
    font-weight: 900;
    letter-spacing: .9px;
    text-transform: uppercase;
}
.friends-divider::before,
.friends-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .18); }

/* ── Les panneaux ──
   Un `<details>` natif : son état survit au morphing de Turbo, et le contenu
   reste dans le document pour la recherche du navigateur. */
.friends-play { display: grid; gap: var(--space-4); }
.friends-panel { padding: var(--space-4); }

.friends-fold > summary { list-style: none; cursor: pointer; }
.friends-fold > summary::-webkit-details-marker { display: none; }

.friends-fold-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
}
.friends-fold-head:hover { background: var(--mode-light); }
.friends-fold > summary:focus-visible { outline: none; }
.friends-fold > summary:focus-visible .friends-fold-head { box-shadow: var(--ring); }

.friends-fold-head > span:nth-child(2) { flex: 1; min-width: 0; }
.friends-fold-head b { display: block; font-family: var(--font-title); font-size: var(--type-card); font-weight: 600; color: var(--ink); }
.friends-fold-head small { display: block; font-size: var(--type-sm); color: var(--cream-sub); }

/* Les symboles de section (« + », « # », « ↻ », le livre des règles) : un signe
   et non une commande. Le proto les pose sans fond ni cadre dans cet espace, et
   c'est ce qui les distingue d'un bouton : posé sur une pastille colorée, le
   « + » d'un titre se lit comme un bouton d'ajout. */
.friends-fold-mark,
.friends-section-mark {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--mode-dark);
    font-family: var(--font-title);
    font-size: var(--type-section);
    font-weight: 600;
}

/* Le chevron : il dit dans quel sens le panneau va bouger, donc il tourne. */
.friends-fold-sign {
    width: 30px;
    height: 30px;
    flex: none;
    position: relative;
    border-radius: 50%;
    background: var(--mode-light);
    transition: transform var(--dur-fast) ease;
}
.friends-fold-sign::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--mode-dark);
    border-bottom: 2px solid var(--mode-dark);
    transform: translateY(-2px) rotate(45deg);
}
.friends-fold[open] .friends-fold-sign { transform: rotate(180deg); }

/* Le trait ne sépare que ce qui se replie : sur les deux panneaux de jeu, qui
   ne se replient plus au large, il ne marquait plus rien. Le résumé des règles
   le garde, lui qui s'ouvre et se referme à toutes les largeurs. */
.friends-fold > form { margin-top: var(--space-4); }
.friends-fold > .friends-rules-body { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--paper-border); }

@media (max-width: 899px) {
    .friends-panel .friends-fold > form { padding-top: var(--space-4); border-top: 1px dashed var(--paper-border); }
}

/* La ligne qui dit ce que le panneau fait, sous son titre : le proto ne la
   montre qu'au large, où la place ne manque pas. */
.friends-fold-head em { display: none; font-style: normal; font-size: var(--type-sm); color: var(--cream-sub); }

/* ── Le choix du rythme ──
   Deux cartes que l'on choisit, et non deux boutons radio habillés : c'est la
   cible qui compte sur un téléphone. Le bouton natif reste, invisible mais
   présent, parce que c'est lui qui porte le focus et l'état. */
.friends-modes { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.friends-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); }

.friends-mode-option { position: relative; display: block; cursor: pointer; }
.friends-mode-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}
.friends-mode-option span {
    height: 100%;
    min-height: 68px;
    display: grid;
    align-content: center;
    padding: var(--space-3);
    border: 2px solid var(--tile-border);
    border-radius: var(--radius-lg);
    background: var(--tile);
}
.friends-mode-option b { display: block; font-family: var(--font-title); font-weight: 600; color: var(--ink); }
.friends-mode-option small { display: block; font-size: var(--type-sm); color: var(--cream-sub); }
.friends-mode-option input:checked + span { border-color: var(--gold); background: var(--gold-bg); }
.friends-mode-option input:focus-visible + span { box-shadow: var(--ring); }

.friends-panel .ui-note { margin-bottom: var(--space-4); }

/* ── Les deux accès d'un visiteur ──
   Deux tuiles de même rang, et le « ou » entre elles plutôt qu'au-dessus : ce
   n'est pas une suite d'étapes mais un choix. */
.friends-access { margin-bottom: var(--space-5); }

.friends-access-head { margin-bottom: var(--space-4); }
.friends-access-head .ui-title { margin-top: var(--space-0); }

.friends-access-grid { position: relative; display: grid; gap: var(--space-7); }

/* Le « ou » : au-dessus de la seconde tuile sur un téléphone, où elles se
   suivent, entre les deux au large, où elles sont côte à côte. Deux positions
   pour un seul dessin, d'où les deux sélecteurs et un seul jeu de mesures. */
.friends-access-grid::after,
.friends-access-option + .friends-access-option::before {
    content: "ou";
    position: absolute;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--paper-border);
    border-radius: 50%;
    background: var(--cream);
    box-shadow: var(--shadow-paper-sm);
    color: var(--cream-sub);
    font-family: var(--font-code);
    font-size: var(--type-label);
    font-weight: 800;
    text-transform: uppercase;
}
.friends-access-grid::after { top: 50%; display: none; }
.friends-access-option + .friends-access-option::before { top: calc(var(--space-4) * -1); }

/* La tuile vient du socle : surface, liseré, rayon. L'écran ne pose que ce qui
   lui appartient, la colonne et l'épaisseur de sa marge. */
.friends-access-option {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    box-shadow: var(--shadow-paper-sm);
}
.friends-access-option .ui-title { margin: var(--space-1) 0; }
.friends-access-option form { display: contents; }
/* Les deux appels à l'action s'alignent quels que soient les textes au-dessus
   d'eux : c'est le pied de la tuile qui les tient, pas la fin du paragraphe. */
.friends-access-option .ui-field-group { margin-top: auto; padding-top: var(--space-3); }
.friends-access-option > .ui-btn:first-of-type { margin-top: auto; }
.friends-access-option .ui-field-group + .ui-btn { margin-top: var(--space-2); }
/* L'écart entre deux boutons empilés part du bas de l'épaisseur : l'ombre pleine
   déborde de six pixels sous le premier, et une marge qui les ignore colle le
   second dessous. */
.friends-access-option .ui-btn + .ui-btn { margin-top: calc(var(--space-3) + var(--btn-depth)); }

.friends-access-kind { display: flex; align-items: center; gap: var(--space-2); margin: 0; min-height: 32px; }
.friends-access-icon {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--mode-light);
    border-radius: var(--radius-sm);
    background: var(--mode-light);
    color: var(--mode-dark);
}


/* ── « J'ai un code » ──
   Un écran pour un geste : le titre et la mascotte, puis une ligne de
   formulaire et ses deux sorties. */
.join-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.join-head .ui-title { margin: var(--space-2) 0; }
.join-head .ui-mascot { flex: none; width: 76px; height: 76px; }

.join-panel { padding: var(--space-4); }
.join-form { display: grid; gap: var(--space-4); }
.join-form .ui-field { text-align: center; }
/* C'est l'écart de la grille qui espace les lignes, pas la marge du champ :
   laissée là, elle compte dans la hauteur de la ligne, et le bouton aligné sur
   le bas de cette ligne descend de seize pixels sous les champs. */
.join-form .ui-field-group { margin-bottom: 0; }

/* Deux liens du socle : l'écran ne décide que de leur alignement. Leur encre,
   leur souligné et leurs états viennent de la variante, donc ils sont les mêmes
   ici que partout ailleurs. */
.join-alternatives {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

/* ── Les règles en trente secondes ──
   Le principe, puis quatre étapes numérotées et dessinées : une règle de jeu
   se lit mieux en quatre vignettes qu'en quatre phrases, et c'est ainsi que le
   proto la présente. L'ordre est la règle, d'où la liste ordonnée et les
   numéros. */
.friends-rules { margin-top: var(--space-5); }
.friends-rules-body { display: flex; flex-direction: column; gap: var(--space-4); }

.friends-rules-intro { display: flex; align-items: flex-start; gap: var(--space-3); }
.friends-rules-intro .ui-title { margin: var(--space-1) 0; }

.friends-rules-mark {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--gold);
    color: var(--on-gold);
}

.friends-steps { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.friends-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--tile-border);
    border-radius: var(--radius-lg);
    background: var(--tile);
}

.friends-step-mark {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--mode-light);
    color: var(--mode-dark);
}

.friends-step-text { min-width: 0; }
.friends-step-text b { display: block; font-family: var(--font-title); font-size: var(--type-body); font-weight: 600; color: var(--ink); }
.friends-step-text small { display: block; font-size: var(--type-sm); color: var(--cream-sub); }

.friends-step-number {
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    font-family: var(--font-code);
    font-size: var(--type-label);
    font-style: normal;
    font-weight: 700;
    color: var(--mode);
}

/* ── Au-delà du téléphone ──
   Créer et rejoindre passent côte à côte : ce sont deux gestes de même rang,
   et l'un n'est pas la suite de l'autre. */
@media (min-width: 900px) {
    .friends-play { grid-template-columns: 1fr 1fr; }

    /* Côte à côte, les deux panneaux ne se replient plus : ils sont ouverts et
       de même hauteur, comme le proto les pose. Un panneau replié y laisserait
       un grand vide à côté de son voisin, et le chevron promettrait un geste
       qui n'a plus de raison d'être. */
    .friends-panel > .friends-fold > summary { cursor: default; pointer-events: none; }
    .friends-panel .friends-fold-sign { display: none; }
    /* Sauf si l'un se referme quand même (au clavier, ou d'un écran retaillé) :
       un panneau vide aussi haut que son voisin est un trou, pas un alignement. */
    .friends-play:has(.friends-fold:not([open])) { align-items: start; }
    .friends-game-go { display: block; }
    .friends-fold-head em { display: block; }

    .friends-landing { grid-template-columns: 1.08fr .92fr; gap: var(--space-5); align-items: center; }
    .friends-landing-scene .ui-scene { max-width: none; }

    .friends-access-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
    .friends-access-grid::after { display: grid; }
    .friends-access-option + .friends-access-option::before { display: none; }
    .friends-access-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
    .friends-access-head .ui-hint { max-width: 330px; text-align: right; }

    /* La mascotte reprend sa taille, et le formulaire tient sur une ligne :
       le code, le pseudo quand il le faut, et le bouton au bout. */
    .join-head .ui-mascot { width: 112px; height: 112px; }
    .join-panel { padding: var(--space-6); }
    .join-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }

    /* Le refus se lit sous le champ sans décaler le bouton : celui-ci est aligné
       sur le bas de la ligne, et un message qui grandit le ferait descendre d'un
       cran. Le message est donc posé hors du flux, et c'est l'écart sous la
       ligne qui lui fait sa place, seulement quand il y en a un. */
    .join-form .ui-field-group { position: relative; }
    .join-form .ui-field-error { position: absolute; top: 100%; left: 0; margin: var(--space-1) 0 0; }
    .join-form:has(.ui-field-error) { row-gap: var(--space-8); }
    .join-form.is-identified { grid-template-columns: minmax(0, 1fr) auto; }
    .join-form .ui-btn { width: auto; padding-inline: var(--space-6); }
    .join-alternatives { flex-direction: row; justify-content: center; gap: var(--space-5); grid-column: 1 / -1; }

    .friends-head-modes { display: flex; gap: var(--space-2); margin: 0 0 0 auto; }
    .friends-head-modes span {
        padding: var(--space-2) var(--space-3);
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, .1);
        color: var(--light);
        font-size: var(--type-sm);
        font-weight: 900;
        white-space: nowrap;
    }
}


/* ── La page complète des règles ──
   Son ouverture est posée directement sur le feutre : une grande carte bleue
   sur ce même fond n'ajouterait aucune hiérarchie. La mascotte et les faits
   structurent le hero, puis le papier reprend uniquement le contenu à lire. */
.friends-rules-hero {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: center;
    min-height: 282px;
}

.friends-rules-hero-art {
    position: relative;
    align-self: end;
    display: grid;
    place-items: end center;
    width: 100%;
    height: 245px;
    pointer-events: none;
    transform: translateY(calc(var(--space-5) + 10px));
}

.friends-rules-hero-copy { padding: var(--space-6) var(--space-1); }
.friends-rules-hero-copy .ui-title { max-width: 650px; margin: var(--space-3) 0 var(--space-2); color: var(--light); }
.friends-rules-hero-copy .ui-hint { max-width: 650px; }
.friends-rules-hero-copy .ui-eyebrow svg { width: 17px; height: 17px; }

.friends-rules-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.friends-rules-hero-mascot {
    position: relative;
    z-index: 1;
    width: 230px;
    height: 245px;
    object-position: center bottom;
}

.friends-rules-section,
.friends-forbidden-rules,
.friends-rules-two-columns { margin-top: var(--space-5); }

.friends-rules-section { position: relative; z-index: 0; }

.friends-rules-section-heading .ui-title,
.friends-rules-two-columns .ui-title { margin-top: var(--space-1); }

.friends-rules-section-heading .ui-hint,
.friends-score-rules > .ui-hint { margin-top: var(--space-1); }

.friends-rules-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.friends-rules-step .ui-tile {
    position: relative;
    min-height: 166px;
}

.friends-rules-step-number {
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    color: var(--mode);
    font-family: var(--font-code);
    font-size: var(--type-label);
    font-style: normal;
    font-weight: 800;
}

.friends-rules-step-icon {
    display: block;
    width: 25px;
    height: 25px;
    margin-bottom: var(--space-5);
    color: var(--mode-dark);
}

.friends-rules-step .ui-title { margin: 0; }
.friends-rules-step .ui-hint { margin-top: var(--space-2); }

.friends-rules-two-columns {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: var(--space-5);
}

.friends-score-cases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.friends-score-case {
    min-height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.friends-score-case .ui-stat { flex: 1; justify-content: center; }
.friends-score-case > small {
    display: block;
    margin-top: var(--space-1);
    color: var(--cream-sub);
    font-size: var(--type-label);
    line-height: 1.35;
    text-align: center;
}

.friends-good-to-know ul {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.friends-good-to-know li {
    position: relative;
    padding-left: var(--space-5);
    color: var(--ink-soft);
    font-size: var(--type-sm);
    line-height: 1.5;
}

.friends-good-to-know li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--mode-dark);
}

.friends-good-to-know .ui-btn { width: 100%; }

.friends-forbidden-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.friends-forbidden-rule {
    display: flex;
    flex-direction: column;
    min-height: 154px;
    box-shadow: inset 0 3px var(--mode), var(--shadow-paper-sm);
}

.friends-forbidden-rule:nth-child(2) { box-shadow: inset 0 3px var(--gold), var(--shadow-paper-sm); }
.friends-forbidden-rule:nth-child(3) { box-shadow: inset 0 3px var(--warning), var(--shadow-paper-sm); }
.friends-forbidden-rule:nth-child(4) { box-shadow: inset 0 3px var(--danger), var(--shadow-paper-sm); }
.friends-forbidden-rule:nth-child(5) { box-shadow: inset 0 3px var(--success), var(--shadow-paper-sm); }

.friends-forbidden-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--space-3);
    border: 1px solid var(--mode-light);
    border-radius: var(--radius-md);
    background: var(--mode-light);
    color: var(--mode-dark);
}

.friends-forbidden-icon svg { width: 18px; height: 18px; }
.friends-forbidden-rule .ui-title { margin: 0; }
.friends-forbidden-rule .ui-hint { margin-top: var(--space-1); }

.friends-forbidden-example {
    align-self: flex-start;
    margin-top: auto;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: var(--type-label);
    font-style: normal;
    font-weight: 900;
}

@media (max-width: 640px) {
    .friends-rules-hero {
        grid-template-columns: minmax(0, 1fr) 105px;
        min-height: 0;
    }

    .friends-rules-hero-art { height: 145px; }

    .ui-mascot-halo {
        bottom: -4px;
        width: 150px;
        height: 142px;
        margin-left: -69px;
    }

    .friends-rules-hero-copy { padding: var(--space-4) var(--space-1); }
    .friends-rules-hero-copy .ui-title { margin-top: var(--space-2); }
    .friends-rules-hero-mascot { width: 108px; height: 145px; margin-right: calc(var(--space-3) * -1); }

    .friends-rules-facts {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-1);
        margin-top: var(--space-3);
    }

    .friends-rules-facts .ui-chip {
        justify-content: center;
        min-width: 0;
        padding-inline: var(--space-1);
        text-align: center;
        white-space: normal;
    }

    .friends-rules-steps { grid-template-columns: 1fr; gap: var(--space-2); }

    .friends-rules-step .ui-tile {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: var(--space-3);
        min-height: 0;
    }

    .friends-rules-step-icon {
        grid-row: 1 / 3;
        width: 24px;
        height: 24px;
        margin: 0;
    }

    .friends-rules-step .ui-title,
    .friends-rules-step .ui-hint { grid-column: 2; }

    .friends-rules-step .ui-hint { margin-top: var(--space-1); }

    .friends-rules-two-columns { grid-template-columns: 1fr; gap: var(--space-3); }

    .friends-score-cases { grid-template-columns: 1fr; }

    .friends-score-case {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 0;
    }

    .friends-score-case .ui-stat {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        grid-column: 1 / -1;
        text-align: left;
    }

    .friends-score-case .ui-stat-value { grid-row: 1 / 3; }
    .friends-score-case .ui-stat-label { align-self: end; }
    .friends-score-case > small {
        grid-column: 2;
        margin: 0;
        text-align: left;
    }

    .friends-forbidden-grid { grid-template-columns: 1fr; }

    .friends-forbidden-rule {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: var(--space-3);
        min-height: 0;
    }

    .friends-forbidden-icon {
        grid-area: 1 / 1 / 3;
        margin: 0;
    }

    .friends-forbidden-rule .ui-title,
    .friends-forbidden-rule .ui-hint { grid-column: 2; }

    .friends-forbidden-rule .ui-hint { margin-top: var(--space-1); }
    .friends-forbidden-example { grid-area: 1 / 3 / 3; align-self: center; margin: 0; }
}


/* ── Statistiques entre amis ──
   Même composition que le proto : le hero reste directement sur le feutre,
   puis les chiffres sont regroupés sur trois papiers. La mascotte descend
   jusque sur le premier papier ; le halo partagé avec les règles reste derrière
   elle et conserve son mouvement lent. */
.friends-data-hero {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    align-items: center;
    min-height: 310px;
    overflow: visible;
}

.friends-data-hero-copy { position: relative; z-index: 2; padding: var(--space-6) var(--space-1); }
.friends-data-hero-copy .ui-eyebrow { color: var(--light-sub); }
.friends-data-hero-copy .ui-eyebrow svg { width: 17px; height: 17px; }
.friends-data-hero-copy .ui-title { max-width: 650px; margin: var(--space-3) 0 var(--space-2); color: var(--light); }
.friends-data-hero-copy .ui-title span { color: var(--gold); }
.friends-data-hero-copy .ui-hint { max-width: 620px; }

.friends-data-hero-art {
    position: relative;
    align-self: end;
    display: grid;
    place-items: end center;
    width: 100%;
    height: 270px;
    pointer-events: none;
    transform: translateY(calc(var(--space-5) + 10px));
}

.friends-data-hero-art .ui-mascot-halo {
    bottom: -2px;
    width: 285px;
    height: 250px;
    margin-left: -142px;
}

.friends-data-hero-mascot {
    position: relative;
    z-index: 1;
    width: 260px;
    height: 270px;
    object-fit: contain;
    object-position: center bottom;
}

.friends-stats-dashboard {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: var(--space-4);
}

.friends-stats-dashboard > .ui-paper,
.friends-stats-empty { margin-top: var(--space-5); }

.friends-section-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
}

.friends-section-bar .ui-title,
.friends-stats-modes > .ui-title,
.friends-stats-empty .ui-title { margin-top: var(--space-1); }

.friends-player-identity { margin-top: var(--space-2); }

.friends-overview-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.friends-success-ring {
    --friends-success: 0%;
    display: grid;
    place-items: center;
    width: 196px;
    height: 196px;
    border-radius: 50%;
    background: conic-gradient(var(--gold) 0 var(--friends-success), var(--paper-border) var(--friends-success) 100%);
    box-shadow: inset 0 0 0 1px var(--paper-border);
}

.friends-success-ring::before {
    content: "";
    grid-area: 1 / 1;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background: var(--cream);
    box-shadow: var(--shadow-paper-sm);
}

.friends-success-ring > span { position: relative; grid-area: 1 / 1; text-align: center; }
.friends-success-ring b,
.friends-success-ring small { display: block; }
.friends-success-ring b { color: var(--mode-dark); font-family: var(--font-title); font-size: var(--type-display); font-weight: 700; line-height: 1; }
.friends-success-ring small { margin-top: var(--space-1); color: var(--cream-sub); font-size: var(--type-label); font-weight: 900; }

.friends-overview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.friends-overview-metric {
    min-height: 136px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.friends-overview-metric-icon {
    display: block;
    width: 22px;
    height: 22px;
    margin-bottom: var(--space-2);
    color: var(--mode-dark);
}

.friends-overview-metric .ui-stat-value { font-size: var(--type-metric); }
.friends-overview-metric .ui-stat-label { font-size: var(--type-label); }

.friends-stats-modes { display: flex; flex-direction: column; }
.friends-stats-modes > .ui-title { max-width: 360px; }

.friends-mode-distribution { --friends-classic-share: 0%; margin-top: var(--space-5); }
.friends-mode-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.friends-mode-row span b,
.friends-mode-row span small { display: block; }
.friends-mode-row span b { color: var(--mode-dark); font-family: var(--font-title); font-size: var(--type-body); font-weight: 600; }
.friends-mode-row span small { margin-top: var(--space-1); color: var(--cream-sub); font-size: var(--type-label); }
.friends-mode-row strong { color: var(--mode-dark); font-family: var(--font-code); font-size: var(--type-body); }
.friends-mode-row-blitz b,
.friends-mode-row-blitz strong { color: var(--cream-sub); }

.friends-mode-bar {
    position: relative;
    display: block;
    height: 12px;
    margin: var(--space-2) 0 var(--space-4);
    overflow: hidden;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--mode) 0 var(--friends-classic-share), var(--gold) var(--friends-classic-share) 100%);
}

.friends-blitz-records {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.friends-blitz-records .ui-stat-value { font-size: var(--type-card); }
.friends-blitz-records .ui-stat-label { font-size: var(--type-label); }
.friends-stats-modes > .ui-btn { align-self: flex-start; margin-top: auto; padding-inline: 0; }

.friends-stats-clues { grid-column: 1 / -1; }
.friends-clue-quality {
    flex: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--success-bg);
    color: var(--success);
    font-size: var(--type-label);
    font-weight: 900;
}
.friends-clue-quality b { font-family: var(--font-code); }

.friends-clue-flow {
    display: grid;
    grid-template-columns: 1fr 32px 1fr 32px 1fr;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.friends-clue-flow-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-content: center;
    column-gap: var(--space-3);
    min-height: 132px;
}

.friends-clue-flow-icon {
    grid-row: 1 / 3;
    align-self: center;
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: var(--radius-md);
    background: var(--mode-light);
    color: var(--mode-dark);
}

.friends-clue-flow-card.ui-tile-success .friends-clue-flow-icon { background: var(--success-bg); color: var(--success); }
.friends-clue-flow-card.ui-tile-danger .friends-clue-flow-icon { background: var(--danger-bg); color: var(--danger); }
.friends-clue-flow-card .ui-stat { align-items: flex-start; text-align: left; }
.friends-clue-flow-card .ui-stat-value { font-size: var(--type-metric); }
.friends-clue-flow-card .ui-stat-label { font-size: var(--type-sm); }
.friends-clue-flow-sign { color: var(--cream-sub); text-align: center; font-size: var(--type-section); font-weight: 900; }

.friends-clue-note { margin-top: var(--space-3); }
.friends-clue-note b,
.friends-clue-note small { display: block; }
.friends-clue-note small { margin-top: var(--space-1); }

.friends-history-cta {
    width: min(360px, 100%);
    margin: var(--space-5) auto 0;
}
.friends-history-cta svg { width: 18px; height: 18px; }

.friends-stats-empty {
    position: relative;
    z-index: 0;
    text-align: center;
}
.friends-stats-empty .ui-hint { max-width: 570px; margin: var(--space-2) auto var(--space-5); }
.friends-stats-empty .ui-btn { width: min(320px, 100%); margin-inline: auto; }

@media (max-width: 899px) {
    .friends-data-hero { grid-template-columns: minmax(0, 1fr) 250px; }
    .friends-data-hero-mascot { width: 230px; }
    .friends-stats-dashboard { grid-template-columns: 1fr; }
    .friends-stats-clues { grid-column: auto; }
}

@media (max-width: 640px) {
    .friends-data-hero {
        grid-template-columns: minmax(0, 1fr) 112px;
        min-height: 0;
    }

    .friends-data-hero-copy { padding: var(--space-4) var(--space-1); }
    .friends-data-hero-copy .ui-title { margin-top: var(--space-2); }
    .friends-data-hero-copy .ui-hint { font-size: var(--type-sm); }

    .friends-data-hero-art {
        height: 170px;
        transform: translateY(calc(var(--space-5) + 12px));
    }

    .friends-data-hero-art .ui-mascot-halo {
        bottom: -4px;
        left: 55%;
        width: 162px;
        height: 150px;
        margin-left: -81px;
    }

    .friends-data-hero-mascot {
        width: 140px;
        height: 170px;
        margin-right: calc(var(--space-3) * -1);
    }

    .friends-stats-dashboard { gap: 0; }
    .friends-stats-dashboard > .ui-paper,
    .friends-stats-empty { margin-top: var(--space-4); }

    .friends-section-bar { align-items: flex-start; }
    .friends-overview-layout { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-4); }
    .friends-success-ring { justify-self: center; width: 174px; height: 174px; }
    .friends-success-ring::before { width: 132px; height: 132px; }

    .friends-overview-metrics { gap: var(--space-1); }
    .friends-overview-metric { min-height: 112px; padding-inline: var(--space-1); }
    .friends-overview-metric-icon { width: 18px; height: 18px; }
    .friends-overview-metric .ui-stat-value { font-size: var(--type-section); }
    .friends-overview-metric .ui-stat-label { font-size: var(--type-label); }

    .friends-clue-flow { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
    .friends-clue-flow-sign { display: none; }
    .friends-clue-flow-card { grid-template-columns: 32px minmax(0, 1fr); min-height: 105px; padding: var(--space-3); }
    .friends-clue-flow-card:first-child { grid-column: 1 / -1; }
    .friends-clue-flow-icon { width: 31px; height: 31px; }
    .friends-clue-flow-card .ui-stat-value { font-size: var(--type-section); }
    .friends-clue-flow-card .ui-stat-label { font-size: var(--type-label); }

    .friends-clue-quality { padding: var(--space-2); font-size: var(--type-label); }
    .friends-clue-note { align-items: flex-start; }
}

/* ── Historique des parties entre amis ── */
.friends-history-hero .friends-data-hero-art { height: 290px; }
.friends-history-hero .friends-data-hero-mascot { width: 245px; height: 270px; }

.friends-history-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.friends-history-facts > span {
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .1);
    color: var(--light-sub);
    font-size: var(--type-label);
}

.friends-history-facts b { color: var(--light); font-family: var(--font-code); }

.friends-history-hero-note {
    position: absolute;
    z-index: 3;
    top: var(--space-3);
    right: 0;
    min-width: 145px;
    padding: var(--space-3);
    border: 4px solid var(--light);
    border-radius: var(--radius-lg);
    background: var(--cream);
    color: var(--ink);
    transform: rotate(3deg);
    box-shadow: var(--shadow-paper-md);
}

.friends-history-hero-note small,
.friends-history-hero-note b,
.friends-history-hero-note em { display: block; }
.friends-history-hero-note small { color: var(--cream-sub); font-family: var(--font-code); font-size: var(--type-label); font-weight: 800; text-transform: uppercase; }
.friends-history-hero-note b { margin-top: var(--space-1); font-family: var(--font-title); font-size: var(--type-card); }
.friends-history-hero-note em { margin-top: var(--space-1); color: var(--danger); font-size: var(--type-label); font-style: normal; font-weight: 900; }

.friends-history-surface,
.friends-history-empty-first { position: relative; z-index: 0; margin-top: var(--space-5); }

.friends-history-filters {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-md);
    background: var(--mode-light);
}

.friends-history-filters a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--mode-dark);
    font-size: var(--type-label);
    font-weight: 900;
    text-decoration: none;
}

.friends-history-filters a[aria-current="page"] { background: var(--tile); box-shadow: var(--shadow-paper-sm); }
.friends-history-filters a:focus-visible { outline: none; box-shadow: var(--ring); }

.friends-history-months { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.friends-history-month { display: grid; gap: var(--space-3); }
.friends-history-month-continuation { margin-top: calc(var(--space-5) * -1); }

.friends-history-month > h3 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--cream-sub);
    font-family: var(--font-code);
    font-size: var(--type-label);
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.friends-history-month > h3::after { content: ""; flex: 1; height: 1px; background: var(--paper-border); }
.friends-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.friends-history-card {
    min-width: 0;
    min-height: 112px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--tile-border);
    border-radius: var(--radius-lg);
    background: var(--tile);
    color: var(--ink);
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast), border-color var(--dur-fast);
    box-shadow: var(--shadow-paper-sm);
}

.friends-history-card:hover { transform: translateY(-2px); border-color: var(--mode); box-shadow: var(--shadow-paper-md); }
.friends-history-card:focus-visible { outline: none; box-shadow: var(--ring); }

.friends-game-score {
    --friends-score: 0deg;
    --friends-score-color: var(--gold);
    position: relative;
    width: 66px;
    height: 66px;
    display: grid;
    place-content: center;
    border-radius: 50%;
    background: conic-gradient(var(--friends-score-color) var(--friends-score), var(--paper-border) 0);
    text-align: center;
}

.friends-game-score::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--tile); }
.friends-game-score b,
.friends-game-score small { position: relative; z-index: 1; display: inline; }
.friends-game-score b { color: var(--ink); font-family: var(--font-title); font-size: var(--type-card); font-weight: 700; }
.friends-game-score small { color: var(--cream-sub); font-size: var(--type-label); font-weight: 900; }
.friends-history-card.great { --friends-score-color: var(--success); }
.friends-history-card.soft { --friends-score-color: var(--danger); }

.friends-game-copy { min-width: 0; }
.friends-game-copy > span { display: flex; align-items: center; gap: var(--space-2); }
.friends-game-copy b { color: var(--mode-dark); font-family: var(--font-code); font-size: var(--type-body); letter-spacing: 1.2px; }
.friends-game-copy em { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--mode-light); color: var(--mode-dark); font-size: var(--type-label); font-style: normal; font-weight: 900; }
.friends-game-copy small { display: block; margin-top: var(--space-2); overflow: hidden; color: var(--cream-sub); font-size: var(--type-label); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.friends-game-players { display: flex; padding-left: var(--space-3); }
.friends-game-players i {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    margin-left: calc(var(--space-2) * -1);
    border: 2px solid var(--tile);
    border-radius: 50%;
    background: var(--mode);
    color: var(--light);
    font-family: var(--font-title);
    font-size: var(--type-label);
    font-style: normal;
    font-weight: 700;
}
.friends-game-players i:nth-child(2) { background: var(--gold); color: var(--on-gold); }
.friends-game-players i:nth-child(3) { background: var(--mode-dark); }

.friends-game-arrow {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--mode-light);
    color: var(--mode-dark);
    transition: transform var(--dur-fast);
}
.friends-history-card:hover .friends-game-arrow { transform: translateX(3px); }

.friends-history-empty {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    text-align: center;
}
.friends-history-empty > span { width: 34px; height: 34px; color: var(--mode-dark); }
.friends-history-empty .ui-title { margin-top: var(--space-3); }
.friends-history-empty .ui-hint { max-width: 520px; margin: var(--space-1) auto var(--space-4); }
.friends-history-empty .ui-btn { width: min(320px, 100%); }

.friends-history-more-wrap { display: flex; justify-content: center; }
.friends-history-more { width: min(360px, 100%); margin-top: var(--space-5); }
.friends-history-more small { margin-left: var(--space-1); font-size: var(--type-label); }
.friends-history-previous { width: min(360px, 100%); margin: var(--space-3) auto 0; }

/* ── Détail d'une partie ── */
.friends-game-hero {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px 240px;
    grid-template-rows: 1fr auto;
    gap: 0 var(--space-3);
    min-height: 370px;
    overflow: visible;
}

.friends-game-hero-copy { align-self: center; padding: var(--space-6) 0 var(--space-5) var(--space-1); }
.friends-game-hero-copy .ui-eyebrow { color: var(--light-sub); }
.friends-game-hero-copy .ui-title { max-width: 540px; margin-top: var(--space-3); color: var(--light); }
.friends-game-hero-copy > .ui-hint { margin-top: var(--space-3); }

.friends-game-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.friends-game-meta > span {
    width: 112px;
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .1);
    color: var(--light-sub);
    font-size: var(--type-label);
    font-weight: 900;
}
.friends-game-meta small { color: var(--light-sub); font-family: var(--font-code); font-size: var(--type-label); font-weight: 800; text-transform: uppercase; }
.friends-game-meta b { color: var(--gold); font-family: var(--font-code); font-size: var(--type-sm); letter-spacing: 1.2px; }
.friends-game-meta .friends-game-mode { font-family: var(--font-code); font-size: var(--type-sm); }

.friends-game-participants { display: flex; align-items: center; margin-top: var(--space-4); color: var(--light-sub); font-size: var(--type-label); }
.friends-game-participant-avatars { display: flex; margin-right: var(--space-4); }
.friends-game-participant-avatars i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-right: calc(var(--space-2) * -1);
    border: 3px solid var(--mode);
    border-radius: 50%;
    background: var(--gold);
    color: var(--on-gold);
    font-family: var(--font-title);
    font-size: var(--type-label);
    font-style: normal;
    font-weight: 700;
}
.friends-game-participant-avatars i:nth-child(2n) { background: var(--light); color: var(--mode-dark); }
.friends-game-participant-avatars i:nth-child(3n) { background: var(--mode-dark); color: var(--light); }

.friends-final-score {
    align-self: center;
    padding: var(--space-5) var(--space-3);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--mode-dark) 70%, transparent);
    color: var(--light);
    text-align: center;
}
.friends-final-score small,
.friends-final-score b,
.friends-final-score span { display: block; }
.friends-final-score small { color: var(--light-sub); font-family: var(--font-code); font-size: var(--type-label); font-weight: 800; text-transform: uppercase; }
.friends-final-score b { margin: var(--space-1) 0; color: var(--gold); font-family: var(--font-title); font-size: 64px; line-height: 1; }
.friends-final-score b em { color: var(--light-sub); font-size: var(--type-section); font-style: normal; }
.friends-final-score span { font-size: var(--type-label); font-weight: 900; }

.friends-game-hero-mascot { position: relative; align-self: stretch; pointer-events: none; }
.friends-game-hero-mascot .ui-mascot-halo { bottom: -12px; width: 250px; height: 235px; margin-left: -125px; }
.friends-game-result-mascot {
    position: absolute;
    z-index: 1;
    right: var(--space-4);
    bottom: -12px;
    width: 235px;
    height: 285px;
    object-fit: contain;
    object-position: center bottom;
}

.friends-result-strip {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    padding: 0 var(--space-1);
}
.friends-result-strip > span {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-lg);
    /* Même surface que le score final. À 70 %, elle garde tous les petits
       libellés au-dessus de 4,5:1, y compris sur la rayure la plus claire. */
    background: color-mix(in srgb, var(--mode-dark) 70%, transparent);
}
.friends-result-strip b { font-family: var(--font-title); font-size: var(--type-card); }
.friends-result-strip small { color: var(--light-sub); font-size: var(--type-sm); font-weight: 900; }
.friends-result-strip .won b { color: var(--success-bg); }
.friends-result-strip .lost b { color: var(--danger-on-felt); }
.friends-result-strip .penalty b { color: var(--gold); }
.friends-result-strip .passed b { color: var(--light-sub); }

.friends-awards-section { position: relative; z-index: 0; margin-top: var(--space-5); overflow: hidden; }
.friends-awards-note { padding: var(--space-2) var(--space-3); border-radius: 99px; background: var(--mode-light); color: var(--mode-dark); font-size: var(--type-label); font-weight: 900; }
.friends-awards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }

.friends-award-card {
    --award: var(--gold);
    --award-bg: var(--gold-bg);
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    align-items: center;
    min-height: 205px;
    padding: 0;
    overflow: hidden;
    border-color: var(--award);
    background: linear-gradient(135deg, var(--award-bg), var(--tile));
}
.friends-award-card-blue { --award: var(--mode); --award-bg: var(--mode-light); }
.friends-award-card-green { --award: var(--success); --award-bg: var(--success-bg); }
.friends-award-card-coral { --award: var(--danger); --award-bg: var(--danger-bg); }

.friends-award-mascot { position: relative; align-self: stretch; overflow: hidden; }
.friends-award-mascot::before { content: ""; position: absolute; bottom: -70px; left: -50px; width: 210px; height: 210px; border-radius: 50%; background: color-mix(in srgb, var(--award) 13%, transparent); }
.friends-award-mascot img { position: absolute; z-index: 1; bottom: -4px; left: var(--space-2); width: 135px; height: 170px; object-fit: contain; object-position: center bottom; }

.friends-award-copy { min-width: 0; padding: var(--space-5) var(--space-5) var(--space-5) var(--space-2); }
.friends-award-copy > span { color: var(--award); font-family: var(--font-code); font-size: var(--type-label); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.friends-award-copy .ui-title { margin-top: var(--space-1); }
.friends-award-copy p { min-height: 40px; margin-top: var(--space-1); color: var(--cream-sub); font-size: var(--type-sm); line-height: 1.45; }
.friends-award-copy strong { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid color-mix(in srgb, var(--award) 27%, var(--tile)); border-radius: 99px; background: rgba(255, 255, 255, .72); }
.friends-award-copy strong b { color: var(--ink); font-family: var(--font-code); font-size: var(--type-label); }
.friends-award-copy strong em { color: var(--award); font-family: var(--font-code); font-size: var(--type-label); font-style: normal; font-weight: 900; }

.friends-rounds-section { margin-top: var(--space-5); }
.friends-rounds-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-1) var(--space-3); }
.friends-rounds-heading .ui-eyebrow { color: var(--light-sub); }
.friends-rounds-heading .ui-title { margin-top: var(--space-1); color: var(--light); }
.friends-rounds-heading > div:last-child { display: flex; gap: var(--space-1); }
.friends-rounds-heading > div:last-child span { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--type-label); font-weight: 900; }
.friends-rounds-heading .won { color: var(--success); background: var(--success-bg); }
.friends-rounds-heading .lost { color: var(--danger); background: var(--danger-bg); }
.friends-rounds-heading .penalty { color: var(--on-gold); background: var(--gold); }
.friends-rounds-heading .passed { color: var(--cream-sub); background: var(--cream); }

.friends-rounds-list { display: grid; gap: var(--space-2); }
.friends-round-row { overflow: hidden; border: 1px solid var(--paper-border); border-left: 5px solid var(--cream-sub); border-radius: var(--radius-lg); background: var(--cream); box-shadow: var(--shadow-paper-sm); }
.friends-round-row.won { border-left-color: var(--success); }
.friends-round-row.lost,
.friends-round-row.penalty { border-left-color: var(--danger); }

.friends-round-summary {
    min-height: 82px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto 34px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.friends-round-summary::-webkit-details-marker { display: none; }
.friends-round-summary:focus-visible { outline: none; box-shadow: inset var(--ring); }

.friends-round-number { width: 43px; height: 43px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--mode-light); color: var(--mode-dark); font-family: var(--font-code); font-size: var(--type-label); font-weight: 800; }
.friends-round-word small,
.friends-round-word b { display: block; }
.friends-round-word small { color: var(--cream-sub); font-size: var(--type-label); font-weight: 900; }
.friends-round-word b { margin-top: var(--space-1); color: var(--ink); font-family: var(--font-title); font-size: var(--type-body); }
.friends-round-status { min-width: 76px; padding: var(--space-2); border-radius: var(--radius-sm); text-align: center; font-size: var(--type-label); font-weight: 900; }
.friends-round-status.won { color: var(--success); background: var(--success-bg); }
.friends-round-status.lost,
.friends-round-status.penalty { color: var(--danger); background: var(--danger-bg); }
.friends-round-status.passed { color: var(--cream-sub); background: var(--paper-border); }
.friends-round-summary .fold-indicator { width: 32px; height: 32px; background: var(--paper-border); color: var(--cream-sub); }
.friends-round-row[open] .fold-indicator { transform: rotate(180deg); }

.friends-round-detail { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5) 80px; border-top: 1px solid var(--paper-border); background: rgba(255, 255, 255, .48); }
.friends-round-detail > div > span { display: block; margin-bottom: var(--space-2); color: var(--cream-sub); font-family: var(--font-code); font-size: var(--type-label); font-weight: 800; text-transform: uppercase; }
.friends-round-story > p { color: var(--ink-soft); font-size: var(--type-sm); }
.friends-round-story > p b { color: var(--ink); }
.friends-round-story .bot-decision { margin-top: var(--space-3); }

.friends-round-detail-human { display: block; padding-top: var(--space-3); padding-bottom: var(--space-4); }
.friends-round-human { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--space-5); }
.friends-round-retained > span,
.friends-round-answer > span {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--cream-sub);
    font-family: var(--font-code);
    font-size: var(--type-label);
    font-weight: 800;
    text-transform: uppercase;
}
.friends-round-retained-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.friends-round-retained-list > span {
    padding: var(--space-2) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--mode) 30%, var(--paper-border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--mode-light) 65%, white);
    color: var(--mode-dark);
    font-size: var(--type-label);
    font-weight: 700;
}
.friends-round-retained-list small { color: var(--cream-sub); font-size: var(--type-sm); }
.friends-round-retained-clue { display: grid; gap: 2px; }
.friends-round-retained-clue b { color: var(--mode-dark); font-size: var(--type-sm); line-height: 1.1; }
.friends-round-retained-clue small { display: block; font-size: var(--type-label); font-weight: 600; }
.friends-round-answer b,
.friends-round-answer small { display: block; }
.friends-round-answer b { color: var(--ink); font-family: var(--font-title); font-size: var(--type-body); }
.friends-round-answer small { margin-top: var(--space-1); color: var(--cream-sub); font-size: var(--type-label); font-weight: 800; }
.friends-round-answer small.won { color: var(--success); }
.friends-round-answer small.lost,
.friends-round-answer small.penalty { color: var(--danger); }

.friends-round-clues-detailed { display: grid; gap: var(--space-2); }
.friends-round-clue { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--mode-light); border-radius: var(--radius-sm); background: var(--mode-light); }
.friends-round-clue b { color: var(--mode-dark); font-size: var(--type-sm); }
.friends-round-clue small { color: var(--cream-sub); font-size: var(--type-label); }
.friends-round-clue em { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--danger); font-size: var(--type-label); font-style: normal; font-weight: 900; }
.friends-round-clue.rejected { border-color: var(--danger-bg); background: var(--danger-bg); }

.friends-round-message { grid-column: 1 / -1; }
.friends-round-message b,
.friends-round-message small { display: block; }
.friends-round-message b { color: var(--ink); font-family: var(--font-title); }
.friends-round-message small { margin-top: var(--space-1); color: var(--cream-sub); }
.friends-detail-back { width: min(360px, 100%); margin: var(--space-5) auto 0; }

@media (max-width: 900px) {
    .friends-history-grid,
    .friends-awards-grid { grid-template-columns: 1fr; }
    .friends-game-hero { grid-template-columns: minmax(0, 1fr) 180px 190px; }
    .friends-game-result-mascot { right: 0; width: 205px; }
}

@media (max-width: 640px) {
    .friends-history-hero .friends-data-hero-art { height: 185px; }
    .friends-history-hero .friends-data-hero-mascot { width: 145px; height: 180px; }
    .friends-history-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); margin-top: var(--space-3); }
    .friends-history-facts > span { min-height: 48px; display: grid; align-content: center; padding: var(--space-1); text-align: center; font-size: var(--type-label); }
    .friends-history-facts b { display: block; }

    .friends-history-hero-note { top: var(--space-1); right: calc(var(--space-2) * -1); min-width: 105px; padding: var(--space-2); border-width: 3px; }
    .friends-history-hero-note small { font-size: 7px; }
    .friends-history-hero-note b { font-size: var(--type-sm); }

    .friends-section-bar { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .friends-history-filters { width: 100%; }
    .friends-history-filters a { flex: 1; min-width: 0; padding-inline: var(--space-1); }
    .friends-history-grid { gap: var(--space-2); }
    .friends-history-card { grid-template-columns: 56px minmax(0, 1fr) 28px; gap: var(--space-2); min-height: 92px; padding: var(--space-3); }
    .friends-game-score { width: 54px; height: 54px; }
    .friends-game-score::before { inset: 5px; }
    .friends-game-score b { font-size: var(--type-body); }
    .friends-game-copy > span { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
    .friends-game-copy b { font-size: var(--type-sm); }
    .friends-game-copy em { padding: 3px var(--space-1); }
    .friends-game-copy small { margin-top: var(--space-1); white-space: normal; }
    .friends-game-players { display: none; }

    .friends-game-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; min-height: 0; }
    .friends-game-hero-copy { position: relative; z-index: 2; min-height: 270px; padding: var(--space-3) 0; }
    .friends-game-hero-copy .ui-title { max-width: 230px; }
    .friends-game-hero-copy > .ui-hint { max-width: 225px; }
    .friends-game-meta { flex-wrap: wrap; max-width: 225px; }
    .friends-game-participants { max-width: 225px; align-items: flex-start; }
    .friends-game-participants > span:last-child { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

    .friends-final-score { position: absolute; z-index: 2; top: var(--space-3); right: 0; width: 108px; padding: var(--space-3) var(--space-2); }
    .friends-final-score b { font-size: var(--type-display); }
    .friends-final-score b em { font-size: var(--type-body); }
    .friends-final-score span { font-size: var(--type-label); }

    .friends-game-hero-mascot { position: absolute; z-index: 1; top: 95px; right: 0; width: 150px; height: 185px; }
    .friends-game-hero-mascot .ui-mascot-halo { bottom: -8px; width: 168px; height: 158px; margin-left: -84px; }
    .friends-game-result-mascot { right: calc(var(--space-2) * -1); bottom: -9px; width: 145px; height: 180px; }
    .friends-result-strip { grid-row: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); padding: 0; }
    .friends-result-strip > span { min-height: 58px; flex-direction: column; gap: 0; }
    .friends-result-strip b { font-size: var(--type-body); }
    .friends-result-strip small { font-size: var(--type-label); }

    .friends-awards-note { font-size: var(--type-label); }
    .friends-award-card { grid-template-columns: 112px minmax(0, 1fr); min-height: 178px; }
    .friends-award-mascot img { left: calc(var(--space-2) * -1); width: 125px; height: 154px; }
    .friends-award-copy { padding: var(--space-4) var(--space-3) var(--space-4) 0; }
    .friends-award-copy p { min-height: 0; }
    .friends-award-copy strong { align-items: flex-start; flex-direction: column; gap: 0; border-radius: var(--radius-md); }

    .friends-rounds-heading { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-inline: var(--space-1); }
    .friends-rounds-heading > div:last-child { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .friends-rounds-heading > div:last-child span { padding-inline: var(--space-1); text-align: center; }
    .friends-round-summary { grid-template-columns: 42px minmax(0, 1fr) 30px; gap: var(--space-2); min-height: 74px; padding: var(--space-2) var(--space-3); }
    .friends-round-number { width: 38px; height: 38px; }
    .friends-round-status { grid-column: 2; justify-self: start; min-width: 0; margin-top: calc(var(--space-1) * -1); padding: var(--space-1) var(--space-2); }
    .friends-round-word { align-self: end; }
    .friends-round-summary .fold-indicator { grid-area: 1 / 3 / 3; }
    .friends-round-detail { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-3); }

    .friends-round-row.passed .friends-round-human {
        grid-template-columns: 1fr;
    }

    .friends-round-row.passed .friends-round-answer {
        display: none;
    }
}


/* ── Parcours « Entre amis » ───────────────────────────────────────────────
   Les écrans de jeu rejoignent la largeur et les surfaces de la refonte.
   La logique reste dans les gabarits : cette feuille ne porte que la lecture. */
.friends-gameplay[data-screen="round"],
.friends-gameplay[data-screen="round-result"],
.friends-gameplay[data-screen="final"] {
    width: 100%;
}

.round-steps {
    width: min(100%, 900px);
    margin: 0 auto 28px;
}

.round-steps ol {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 15px 22px;
    list-style: none;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    background: rgba(24, 63, 84, .42);
    box-shadow: 0 10px 28px rgba(12, 40, 57, .16);
}

.round-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--light-sub);
    font-family: 'Fredoka', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.round-step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 15px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    background: rgba(255,255,255,.22);
}

.round-step.done:not(:last-child)::after {
    background: #8cc7a2;
}

.round-step-marker {
    position: relative;
    z-index: 1;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 2px solid rgba(255,255,255,.34);
    border-radius: 50%;
    background: #3f738e;
    color: var(--on-accent);
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
}

.round-step.done {
    color: var(--light);
}

.round-step.done .round-step-marker {
    border-color: #70ad84;
    background: #dff2e6;
    color: var(--success);
}

.round-step.current {
    color: var(--on-accent);
}

.round-step.current .round-step-marker {
    border-color: #f1bf16;
    background: #ffd21f;
    color: var(--on-gold);
    box-shadow: 0 0 0 5px rgba(255, 210, 31, .18);
}

/* Le Blitz s’appuie sur le parcours classique fusionné. Seuls le chrono et
   les repères de rythme changent ; les composants, les espacements et les
   états restent partagés avec le mode classique. */
.game-mode-chip {
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--gold) 58%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--gold) 18%, transparent);
    color: var(--light);
    font-family: var(--font-code);
    font-size: var(--type-label);
    font-weight: 800;
    white-space: nowrap;
}

.friends-gameplay.is-blitz .round-steps ol {
    border-color: color-mix(in srgb, var(--gold) 36%, transparent);
}

.friends-gameplay.is-blitz > .blitz-phase {
    width: calc(67.5% - 18px);
    margin-left: 0;
    margin-right: auto;
    border-color: color-mix(in srgb, white 24%, transparent);
    background: color-mix(in srgb, var(--felt-2) 72%, transparent);
    box-shadow: var(--shadow-felt-md);
}

.friends-gameplay.is-blitz > .blitz-phase.layout-standard {
    width: calc(72.5% - 20px);
}

.friends-gameplay.is-blitz > .blitz-phase.urgent {
    border-color: color-mix(in srgb, var(--warning) 62%, transparent);
    box-shadow: var(--shadow-felt-md), 0 0 0 3px color-mix(in srgb, var(--warning) 10%, transparent);
}

.friends-gameplay.is-blitz > .blitz-phase.critical {
    border-color: color-mix(in srgb, var(--danger) 58%, transparent);
    background: color-mix(in srgb, var(--danger) 22%, var(--felt-2));
}

.friends-gameplay.is-blitz > .blitz-phase.review {
    border-color: var(--paper-border);
    background: linear-gradient(180deg, var(--cream), var(--cream-2));
    box-shadow: var(--shadow-felt-md);
}

.friends-gameplay.is-blitz > .blitz-phase.review .blitz-phase-label {
    color: var(--ink);
}

.friends-gameplay.is-blitz > .blitz-phase.review .blitz-clock {
    color: var(--mode-dark);
}

.friends-gameplay.is-blitz > .blitz-phase.review .blitz-phase-note {
    color: var(--cream-sub);
}

@media (max-width: 640px) {
    .game-mode-chip {
        padding-inline: 7px;
        font-size: 0;
    }

    .game-mode-chip::before {
        content: "⚡";
        font-size: var(--type-label);
    }
}

.friends-gameplay .game-guide,
.friends-gameplay .word-card,
.friends-gameplay > .glass,
.friends-gameplay > .paper,
.friends-gameplay > .result-card,
.friends-gameplay > form,
.friends-gameplay > .waiting-note,
.friends-gameplay > .hint,
.friends-gameplay > .btn,
.friends-gameplay > .round-mobile-actions,
.friends-gameplay > .final-summary {
    width: min(100%, 820px);
    margin-right: auto;
    margin-left: auto;
}

.friends-gameplay .game-guide {
    position: relative;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
}

.friends-gameplay .game-guide::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 150px;
    height: 150px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(255, 210, 31, .28) 0, rgba(255, 210, 31, .10) 42%, transparent 72%);
    pointer-events: none;
}

.friends-gameplay .game-guide .ui-mascot {
    position: relative;
    z-index: 1;
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(19, 49, 67, .18));
}

.friends-gameplay .result-guide .ui-mascot,
.friends-gameplay .final-guide .ui-mascot {
    width: 140px;
    height: 140px;
}

.friends-gameplay .game-guide .bubble {
    z-index: 2;
    margin: 0;
    border: 1px solid rgba(84, 68, 43, .10);
    box-shadow: 0 12px 28px rgba(18, 48, 65, .16);
}

.friends-gameplay .word-card {
    min-height: 148px;
    display: grid;
    place-items: center;
    transform: rotate(-1.35deg);
    box-shadow: 0 9px 0 #e7d9bc, 0 22px 38px rgba(20, 51, 69, .20);
}

.friends-gameplay .review-panel,
.friends-gameplay .round-clues-panel {
    padding: 26px;
}

.friends-gameplay .review-panel .clue-card {
    padding: 15px 17px;
}

.friends-gameplay .round-outcome-card {
    padding: 30px 28px;
    border-width: 2px;
    box-shadow: 0 16px 34px rgba(19, 49, 67, .16);
}

.friends-gameplay .round-outcome-card.win {
    border-color: #5a9e73;
    background: linear-gradient(145deg, #b8e1c8, #95cfac);
    color: var(--success);
}

.friends-gameplay .round-outcome-card.lose {
    border-color: #c56b58;
    background: linear-gradient(145deg, #f2c1b5, #e9a997);
    color: var(--danger);
}

.friends-gameplay .round-outcome-card.skip {
    border-color: #648ba0;
    background: linear-gradient(145deg, #c8dae3, #a9c4d2);
    color: var(--ink);
}

.friends-gameplay .round-outcome-card.penalty {
    border-color: #9b6a78;
    background: linear-gradient(145deg, #e6cbd2, #d5aeb9);
    color: var(--ink-soft);
}

.friends-gameplay .round-outcome-card .r-sub {
    color: currentColor;
    opacity: .84;
}

.friends-gameplay .round-outcome-card .word-sm {
    color: var(--ink);
}

.friends-gameplay .round-clues-panel .clue-card:not(.dup) {
    border-color: #70ad84;
    border-left: 5px solid #3b9462;
    background: #dff2e6;
}

.friends-gameplay .round-clues-panel .clue-card.dup {
    border-color: #cf7a67;
    border-left: 5px solid #c65743;
    background: #f8dcd5;
    opacity: 1;
}

.friends-gameplay .round-clues-panel .clue-card.dup .cw {
    color: var(--danger);
}

.friends-gameplay .round-clues-panel .mark-off {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 2px solid #c65743;
    border-radius: 50%;
    background: #fff6f3;
    color: var(--danger);
}

.friends-gameplay .round-clues-panel .mark-off.ok {
    border-color: #3b9462;
    background: #f5fff8;
    color: var(--success);
}

.friends-gameplay .final-summary {
    padding: 28px 0 0;
}

.friends-gameplay .final-summary .final-rounds {
    max-width: none;
}

/* Le mot validé quitte brièvement le formulaire sous forme de carte.
   Sans JS, en Blitz ou en réduction des animations, l'envoi reste immédiat. */
.round-submit-preview {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(16, 43, 58, .58);
    backdrop-filter: blur(3px);
}

.round-answer-form.is-submitting .round-submit-preview {
    display: grid;
    animation: round-submit-veil .18s ease-out both;
}

.round-mobile-actions .round-pass-form {
    margin-top: 12px;
}


.round-submit-card {
    position: relative;
    min-width: min(360px, 86vw);
    padding: 28px 34px 34px;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 20px;
    background: #fffdf8;
    color: var(--ink);
    text-align: center;
    box-shadow: 0 12px 0 #e7d9bc, 0 32px 70px rgba(0,0,0,.28);
    transform: rotate(-2deg);
    animation: round-submit-card .58s cubic-bezier(.2,.85,.25,1.15) both;
}

.round-submit-label {
    display: block;
    margin-bottom: 8px;
    color: var(--cream-sub);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.round-submit-card strong {
    display: block;
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(30px, 6vw, 48px);
    text-transform: uppercase;
}

.round-submit-stamp {
    position: absolute;
    right: 16px;
    bottom: 10px;
    padding: 4px 11px;
    border: 3px solid #3b9462;
    border-radius: 8px;
    color: var(--success);
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    transform: rotate(-8deg) scale(0);
    animation: round-submit-stamp .2s .34s ease-out forwards;
}

@keyframes round-submit-veil {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes round-submit-card {
    from { opacity: 0; transform: translateY(48px) rotate(4deg) scale(.9); }
    to { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); }
}

@keyframes round-submit-stamp {
    to { transform: rotate(-8deg) scale(1); }
}

@media (max-width: 640px) {
    .round-steps {
        margin-bottom: 20px;
    }

    .round-steps ol {
        padding: 12px 8px;
    }

    .round-step {
        font-size: 10px;
    }

    .round-step:not(:last-child)::after {
        left: calc(50% + 16px);
        width: calc(100% - 32px);
    }

    .round-step-marker {
        width: 27px;
        height: 27px;
    }

    .friends-gameplay .game-guide {
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: end;
        gap: 0;
    }

    .friends-gameplay .game-guide::before {
        left: -18px;
        width: 112px;
        height: 112px;
    }

    .friends-gameplay .game-guide .ui-mascot,
    .friends-gameplay .result-guide .ui-mascot,
    .friends-gameplay .final-guide .ui-mascot {
        width: 88px;
        height: 88px;
    }

    .friends-gameplay .game-guide .bubble {
        padding: 12px 14px;
        font-size: 14px;
    }

    .friends-gameplay .word-card {
        min-height: 128px;
    }

    .friends-gameplay .review-panel,
    .friends-gameplay .round-clues-panel,
    .friends-gameplay .round-outcome-card {
        padding: 20px 16px;
    }

    .friends-gameplay .review-rules-grid {
        grid-template-columns: 1fr;
    }

    .friends-gameplay .review-rule-item,
    .friends-gameplay .review-rule-item:nth-child(n+4) {
        grid-column: auto;
        min-height: 68px;
    }

    .friends-gameplay .review-rules-summary small {
        display: none;
    }

    /* Le dock fixe a sa propre réserve. On retire la respiration générale
       de la scène pour éviter de cumuler deux espaces vides sous la mascotte. */
    body:has(.friends-gameplay[data-screen="round"]) .stage,
    body:has(.friends-gameplay[data-screen="round-result"]) .stage {
        padding-bottom: 0;
    }

    .friends-gameplay[data-screen="round"],
    .friends-gameplay[data-screen="round-result"] {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .friends-gameplay[data-screen="round-result"]:not(:has(.round-mobile-actions)) {
        padding-bottom: var(--space-6);
    }

    .round-mobile-actions {
        position: fixed;
        z-index: 70;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto !important;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 0 !important;
        padding: 11px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
        border-top: 1px solid rgba(255,255,255,.16);
        background: color-mix(in srgb, var(--felt-2) 94%, transparent);
        box-shadow: 0 -10px 25px rgba(18, 44, 61, .24);
        backdrop-filter: blur(12px);
    }

    .round-mobile-actions.dual {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
    }

    .round-mobile-actions > .btn,
    .round-mobile-actions > form .btn,
    .round-mobile-actions .btn-outline {
        min-height: 52px;
        margin: 0;
        padding: 12px 14px;
        border-radius: 15px;
        font-size: 16px;
    }

    .round-mobile-actions .round-pass-form {
        margin: 0;
    }

    .round-mobile-actions .round-pass-form .btn-outline {
        width: auto;
        min-width: 132px;
        border-color: var(--mode-light);
        background: var(--cream);
        color: var(--mode-dark);
    }
}

@media (prefers-reduced-motion: reduce) {
    .round-submit-preview,
    .round-submit-card,
    .round-submit-stamp {
        animation: none !important;
    }
}


/* ── Fidélité du parcours classique au prototype validé ─────────────────── */
.friends-gameplay .round-steps {
    width: 100%;
    margin-bottom: 30px;
}

.friends-gameplay .round-steps ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.friends-gameplay .round-step {
    position: relative;
    min-width: 0;
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-items: initial;
    gap: 9px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background: rgba(29,57,76,.32);
    color: var(--light-sub);
    font-size: 12px;
    font-weight: 900;
    text-align: left;
}

.friends-gameplay .round-step:not(:last-child)::after {
    z-index: 2;
    top: 50%;
    right: -8px;
    left: auto;
    width: 9px;
    height: 2px;
    background: rgba(255,255,255,.28);
}

.friends-gameplay .round-step-marker {
    position: static;
    z-index: auto;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border: 0;
    border-radius: 9px;
    background: rgba(255,255,255,.1);
    color: inherit;
    font-size: 9px;
    box-shadow: none;
}

.friends-gameplay .round-step-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.friends-gameplay .round-step.current {
    border-color: #ffe061;
    background: #facc15;
    color: var(--on-gold);
    box-shadow: 0 5px 0 #d9ac06;
}

.friends-gameplay .round-step.current .round-step-marker {
    border: 0;
    background: rgba(74,58,0,.1);
    color: inherit;
    box-shadow: none;
}

.friends-gameplay .round-step.done {
    border-color: rgba(211,240,223,.48);
    color: var(--on-accent);
}

.friends-gameplay .round-step.done .round-step-marker {
    border: 0;
    background: #d9f4e4;
    color: var(--success);
}

.friends-gameplay .friends-play-heading {
    max-width: 680px;
    margin-bottom: 23px;
}

.friends-gameplay .friends-play-heading .label {
    margin-bottom: 8px;
    color: var(--light-sub);
}

.friends-gameplay .friends-play-heading .ui-title {
    color: var(--on-accent);
    letter-spacing: -.5px;
}

.friends-gameplay .friends-play-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
    align-items: stretch;
    gap: 27px;
}

.friends-gameplay .friends-play-layout > .paper {
    position: relative;
    width: auto;
    margin: 0;
    padding: 28px;
    overflow: hidden;
}

.friends-gameplay .friends-play-mascot {
    position: relative;
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    isolation: isolate;
}

.friends-gameplay .friends-play-mascot::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 7px;
    bottom: 0;
    width: 280px;
    height: 5px;
    border-radius: 99px;
    background: rgba(24,52,71,.5);
    box-shadow: 0 7px 18px rgba(13,35,52,.2);
}

.friends-gameplay .friends-play-mascot > .ui-mascot {
    position: relative;
    z-index: 2;
    width: 270px !important;
    height: 300px !important;
    max-width: 100%;
    margin-top: auto;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 13px 11px rgba(12,32,48,.26));
}

.friends-gameplay .friends-play-halo {
    position: absolute;
    z-index: -1;
    right: 6px;
    bottom: 68px;
    width: 270px;
    height: 205px;
    background: radial-gradient(ellipse at center, rgba(255,225,97,.24) 0%, rgba(255,225,97,.10) 42%, rgba(255,225,97,0) 72%);
    filter: blur(2px);
    pointer-events: none;
}

.friends-gameplay .friends-play-tip {
    width: 100%;
    position: relative;
    z-index: 3;
    margin-bottom: 16px;
    padding: 16px 17px;
    border: 1px solid var(--paper-border);
    border-radius: 17px 17px 17px 5px;
    background: linear-gradient(180deg, var(--cream), var(--cream-2));
    color: var(--ink-soft);
    box-shadow: 0 10px 24px rgba(15,35,51,.2);
}

.friends-gameplay .friends-play-tip b,
.friends-gameplay .friends-play-tip span {
    display: block;
}

.friends-gameplay .friends-play-tip b {
    color: var(--ink);
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.friends-gameplay .friends-play-tip span {
    margin-top: 5px;
    color: var(--cream-sub);
    font-size: 13px;
    line-height: 1.45;
}

.friends-gameplay .friends-panel-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.friends-gameplay .friends-panel-bar .label {
    margin-bottom: 5px;
}

.friends-gameplay .friends-panel-bar h2 {
    color: var(--ink);
}

.friends-gameplay .friends-validation-count {
    padding: 8px 11px;
    border-radius: 99px;
    background: #facc15;
    color: var(--on-gold);
    font-family: var(--font-code);
    font-size: var(--type-sm);
    font-weight: 900;
    white-space: nowrap;
}

.friends-gameplay .friends-review-panel > p {
    max-width: 620px;
    margin-bottom: 17px;
    color: var(--cream-sub);
    font-size: var(--type-body);
    line-height: 1.5;
}

.friends-gameplay .friends-review-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 14px;
}

.friends-gameplay .friends-review-list form {
    min-width: 0;
    margin: 0;
}

.friends-gameplay .friends-review-list button,
.friends-gameplay .friends-review-choice {
    width: 100%;
    min-height: 78px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 34px;
    align-items: center;
    gap: 8px;
    border: 1px solid #dfd3b8;
    border-radius: 14px;
    padding: 10px 12px;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-text);
    text-align: left;
}

.friends-gameplay .friends-review-list button {
    cursor: pointer;
    transition: background .16s, border-color .16s, transform .16s;
}

.friends-gameplay .friends-review-list button:hover {
    transform: translateY(-1px);
    border-color: #a7c2cf;
}

.friends-gameplay .friends-review-list b,
.friends-gameplay .friends-review-list small {
    display: block;
}

.friends-gameplay .friends-review-list b {
    font-family: var(--font-title);
    font-size: var(--type-card);
    font-weight: 700;
}

.friends-gameplay .friends-review-list small {
    margin-top: 2px;
    color: var(--cream-sub);
    font-size: var(--type-sm);
}

.friends-gameplay .friends-review-list em {
    color: var(--mode-dark);
    font-size: var(--type-sm);
    font-style: normal;
    font-weight: 900;
}

.friends-gameplay .friends-review-list i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #edf2f3;
    color: var(--mode-dark);
    font-style: normal;
}

.friends-gameplay .friends-review-list .voted {
    border-color: #de9b88;
    background: #fff0eb;
}

.friends-gameplay .friends-review-list .voted em,
.friends-gameplay .friends-review-list .voted i {
    color: var(--danger);
}

.friends-gameplay .friends-review-list .voted i {
    background: #f7d9d0;
}

.friends-gameplay details.friends-review-help {
    display: block;
    min-height: 57px;
    margin-bottom: 15px;
    border: 1px dashed #ddcfad;
    border-radius: 14px;
}

.friends-gameplay .friends-review-help > summary {
    min-height: 57px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}

.friends-gameplay .friends-review-help > summary::-webkit-details-marker {
    display: none;
}

.friends-gameplay .friends-review-help b,
.friends-gameplay .friends-review-help small {
    display: block;
}

.friends-gameplay .friends-review-help b {
    color: var(--ink);
    font-family: var(--font-title);
    font-size: var(--type-body);
    font-weight: 600;
}

.friends-gameplay .friends-review-help small {
    margin-top: 2px;
    color: var(--cream-sub);
    font-size: var(--type-sm);
}

.friends-gameplay .friends-review-help .fold-indicator {
    background: #e8e4d9;
    color: var(--cream-sub);
}

.friends-gameplay .friends-review-help > p {
    margin: -2px 44px 12px;
    color: var(--cream-sub);
    font-size: 11px;
    line-height: 1.45;
}

.friends-gameplay .friends-review-panel .round-mobile-actions {
    margin-top: 0;
}

.friends-gameplay .friends-review-panel .round-mobile-actions .btn,
.friends-gameplay .friends-result-action .btn {
    width: 100%;
}

.friends-gameplay .result-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
}

.friends-gameplay .friends-round-result-panel {
    display: grid;
    gap: 19px;
}

.friends-gameplay .friends-round-celebration {
    position: relative;
    min-height: 225px;
    display: grid;
    place-items: center;
    align-content: center;
    overflow: hidden;
    border: 2px solid #5a9e73;
    border-radius: 19px;
    background: linear-gradient(145deg, #b8e1c8, #95cfac);
    color: var(--success-strong);
    text-align: center;
    box-shadow: inset 0 1px rgba(255,255,255,.48);
}

.friends-gameplay .friends-round-celebration small {
    padding: 6px 10px;
    border-radius: 99px;
    background: #facc15;
    color: var(--on-gold);
    font-size: var(--type-sm);
    font-weight: 900;
}

.friends-gameplay .friends-round-celebration h2 {
    margin: 8px 0 2px;
    color: var(--success-strong);
    font-family: 'Fredoka', sans-serif;
    font-size: 38px;
    font-weight: 700;
}

.friends-gameplay .friends-round-celebration p {
    color: var(--success-strong);
    font-size: var(--type-body);
}

.friends-gameplay .friends-round-celebration > b {
    margin-top: 3px;
    color: var(--success-strong);
    font-family: 'Fredoka', sans-serif;
    font-size: 31px;
    font-weight: 700;
}

.friends-gameplay .outcome-lost .friends-round-celebration {
    border-color: #c56b58;
    background: linear-gradient(145deg, #f2c1b5, #e9a997);
    color: var(--danger-strong);
}

.friends-gameplay .outcome-lost .friends-round-celebration h2,
.friends-gameplay .outcome-lost .friends-round-celebration > b {
    color: var(--danger-strong);
}

.friends-gameplay .outcome-lost .friends-round-celebration p {
    color: var(--danger-strong);
}

.friends-gameplay .outcome-passed .friends-round-celebration {
    border-color: #648ba0;
    background: linear-gradient(145deg, #c8dae3, #a9c4d2);
    color: var(--ink);
}

.friends-gameplay .outcome-passed .friends-round-celebration h2,
.friends-gameplay .outcome-passed .friends-round-celebration > b {
    color: var(--ink);
}

.friends-gameplay .outcome-passed .friends-round-celebration p {
    color: var(--ink-soft);
}

.friends-gameplay .outcome-penalty .friends-round-celebration {
    border-color: #9b6a78;
    background: linear-gradient(145deg, #e6cbd2, #d5aeb9);
    color: var(--ink-soft);
}

.friends-gameplay .outcome-penalty .friends-round-celebration h2,
.friends-gameplay .outcome-penalty .friends-round-celebration > b {
    color: var(--ink-soft);
}

.friends-gameplay .outcome-penalty .friends-round-celebration p {
    color: var(--ink-soft);
}

.friends-gameplay .friends-wrong-answer,
.friends-gameplay .friends-result-penalty {
    margin-top: 12px;
    padding: 8px 11px;
    border: 1px solid currentColor;
    border-radius: 10px;
    background: rgba(255,255,255,.68);
    color: inherit;
    font-size: var(--type-sm);
    font-weight: 900;
    line-height: 1.35;
}

.friends-gameplay .friends-result-penalty span {
    display: block;
    margin-top: 2px;
}

.friends-gameplay .friends-result-spark {
    position: absolute;
    color: var(--gold-dark);
    animation: round-result-spark 1.8s ease-in-out infinite;
}

.friends-gameplay .friends-result-spark.spark-a { top: 24px; left: 18%; }
.friends-gameplay .friends-result-spark.spark-b { top: 36px; right: 17%; animation-delay: .35s; }
.friends-gameplay .friends-result-spark.spark-c { right: 25%; bottom: 30px; color: var(--success); animation-delay: .7s; }

@keyframes round-result-spark {
    50% { transform: translateY(-7px) rotate(25deg) scale(1.2); opacity: .6; }
}

.friends-gameplay .friends-result-clues > .label {
    margin-bottom: 8px;
}

.friends-gameplay .friends-result-clues > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.friends-gameplay .friends-result-clues > div > span {
    min-height: 68px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    padding: 11px 12px;
    border: 1px solid #70ad84;
    border-left: 4px solid #3b9462;
    border-radius: 12px;
    background: #dff2e6;
}

.friends-gameplay .friends-result-clues b,
.friends-gameplay .friends-result-clues small {
    display: block;
}

.friends-gameplay .friends-result-clues b {
    color: var(--ink);
    font-family: var(--font-title);
    font-size: var(--type-card);
    font-weight: 700;
}

.friends-gameplay .friends-result-clues small {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: var(--type-sm);
    line-height: 1.35;
}

.friends-gameplay .friends-result-clues em {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #c4e8d1;
    color: var(--success);
    font-style: normal;
    font-weight: 900;
}

.friends-gameplay .friends-result-clues > div > span.rejected {
    border-color: #cf7a67;
    border-left-color: #c65743;
    background: #f8dcd5;
}

.friends-gameplay .friends-result-clues .rejected small {
    color: var(--cream-sub);
}

.friends-gameplay .friends-result-clues .rejected em {
    background: #f0beb3;
    color: var(--danger);
}

.friends-gameplay .friends-result-action form {
    margin: 0;
}

@media (max-width: 900px) {
    .friends-gameplay.is-blitz > .blitz-phase,
    .friends-gameplay.is-blitz > .blitz-phase.layout-standard {
        width: calc(100% - 244px);
    }

    .friends-gameplay .friends-play-layout,
    .friends-gameplay .result-layout {
        grid-template-columns: minmax(0, 1fr) 230px;
        gap: 14px;
    }

    .friends-gameplay .friends-play-mascot > .ui-mascot {
        width: 220px !important;
        height: 260px !important;
    }

    .friends-gameplay .friends-play-mascot::after {
        width: 225px;
    }
}

@media (max-width: 640px) {
    .friends-gameplay.is-blitz > .blitz-phase,
    .friends-gameplay.is-blitz > .blitz-phase.layout-standard {
        width: 100%;
    }

    .friends-gameplay .round-steps {
        position: sticky;
        z-index: 20;
        top: 72px;
        margin-bottom: 22px;
        padding: 6px;
        border-radius: 14px;
        background: rgba(36,66,87,.92);
        backdrop-filter: blur(9px);
    }

    .friends-gameplay .round-step {
        min-height: 42px;
        justify-content: center;
        padding: 5px;
        border-radius: 10px;
    }

    .friends-gameplay .round-step-label {
        display: none;
    }

    .friends-gameplay .round-step-marker {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

    .friends-gameplay .round-step.current {
        box-shadow: 0 3px 0 #d9ac06;
    }

    .friends-gameplay .friends-play-heading {
        margin-bottom: 16px;
    }

    .friends-gameplay .friends-play-heading .ui-title {
        font-size: 31px;
    }

    .friends-gameplay .friends-play-layout,
    .friends-gameplay .result-layout {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .friends-gameplay .friends-play-layout > .paper {
        padding: 20px 16px;
    }

    .friends-gameplay .friends-play-mascot {
        min-height: 245px;
        margin-top: 8px;
    }

    .friends-gameplay .friends-play-mascot > .ui-mascot {
        width: 185px !important;
        height: 195px !important;
    }

    .friends-gameplay .friends-play-mascot::after {
        right: 50%;
        width: 210px;
        transform: translateX(50%);
    }

    .friends-gameplay .friends-play-halo {
        right: 50%;
        bottom: 48px;
        width: 210px;
        height: 160px;
        transform: translateX(50%);
    }

    .friends-gameplay .friends-play-tip {
        order: -1;
        margin-bottom: -30px;
    }

    .friends-gameplay .friends-panel-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .friends-gameplay .friends-validation-count {
        align-self: flex-start;
    }

    .friends-gameplay .friends-review-list,
    .friends-gameplay .friends-result-clues > div {
        grid-template-columns: 1fr;
    }

    .friends-gameplay .friends-review-panel .round-mobile-actions {
        position: fixed;
        z-index: 70;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto !important;
        margin: 0 !important;
    }
}


/* Tous les états intermédiaires d'une manche partagent désormais le langage
   du prototype : surface papier fonctionnelle à gauche, Motchi à droite. */
.friends-gameplay .friends-word-card {
    position: relative;
    min-height: 130px;
    display: grid;
    place-items: center;
    align-content: center;
    margin: 3px 5px 27px;
    border: 1px solid #e1d5b9;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 0 #eee5d2, 0 15px 25px rgba(62,48,20,.08);
    transform: rotate(-1.05deg);
}

.friends-gameplay .friends-word-card > span {
    position: absolute;
    top: -14px;
    left: 50%;
    padding: 6px 13px;
    border-radius: 99px;
    background: var(--gold);
    color: var(--on-gold);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 3px 0 var(--gold-dark);
    transform: translateX(-50%);
}

.friends-gameplay .friends-word-card > b {
    color: var(--ink);
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(36px, 5vw, 50px);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.friends-gameplay .friends-clue-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.friends-gameplay .friends-clue-fields.single {
    grid-template-columns: 1fr;
}

.friends-gameplay .friends-clue-fields label,
.friends-gameplay .friends-guesser-panel label {
    display: block;
    color: var(--cream-sub);
    font-size: 12px;
    font-weight: 900;
}

.friends-gameplay .friends-clue-fields input,
.friends-gameplay .friends-guesser-panel input {
    width: 100%;
    min-height: 55px;
    margin-top: 7px;
    border: 2px solid #ddcfad;
    border-radius: 14px;
    padding: 0 15px;
    background: #fff;
    color: var(--ink);
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 600;
    outline: none;
}

.friends-gameplay .friends-clue-fields input:focus,
.friends-gameplay .friends-guesser-panel input:focus {
    border-color: var(--mode);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mode) 14%, transparent);
}

.friends-gameplay .friends-play-rule {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 15px 0;
    color: var(--cream-sub);
    font-size: 13px;
}

.friends-gameplay .friends-clue-entry > .round-mobile-actions,
.friends-gameplay .friends-guesser-panel > .round-mobile-actions {
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.friends-gameplay .friends-clue-entry .btn,
.friends-gameplay .friends-guesser-panel .btn {
    width: 100%;
}

.friends-gameplay .waiting-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
}

.friends-gameplay .friends-waiting-panel {
    align-self: start;
    display: grid;
    gap: 20px;
}

.friends-gameplay .friends-waiting-copy {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #c9dce4;
    border-radius: 14px;
    padding: 15px;
    background: #edf5f7;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.friends-gameplay .friends-score-reminder {
    padding-top: 4px;
    border-top: 1px solid var(--paper-border);
}

.friends-gameplay .friends-score-reminder > .label {
    margin-bottom: 11px;
}

.friends-gameplay .friends-waiting-panel .pt-tiles {
    margin: 0;
}

.friends-gameplay .friends-submitted-clues {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    padding: 18px;
    border: 1px solid #c9dce4;
    border-radius: 15px;
    background: #edf5f7;
}

.friends-gameplay .friends-submitted-clues span {
    padding: 10px 15px;
    border: 1px solid #ddcfad;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 3px 0 #e8dfca;
}

.friends-gameplay .friends-play-mascot.compact {
    min-height: 390px;
}

.friends-gameplay .friends-play-mascot.compact > .ui-mascot {
    height: 250px !important;
}

.friends-gameplay .guesser-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
}

.friends-gameplay .friends-guesser-panel {
    align-self: start;
}

.friends-gameplay .friends-guesser-panel > .label {
    margin-bottom: 12px;
}

.friends-gameplay .friends-revealed-clues {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 24px;
}

.friends-gameplay .friends-revealed-clues > span {
    padding: 11px 15px;
    border: 1px solid #c9dce4;
    border-radius: 12px;
    background: #e8f2f5;
    color: var(--mode-dark);
    font-family: 'Fredoka', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.friends-gameplay .friends-revealed-clues > em {
    align-self: center;
    padding: 7px 10px;
    border-radius: 99px;
    background: #ece8de;
    color: var(--cream-sub);
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.friends-gameplay .friends-empty-clues {
    display: grid;
    gap: 4px;
    margin-bottom: 22px;
    border: 1px dashed #ddcfad;
    border-radius: 14px;
    padding: 17px;
    background: #fbf7ee;
    text-align: center;
}

.friends-gameplay .friends-empty-clues b {
    color: var(--ink);
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
}

.friends-gameplay .friends-empty-clues span {
    color: var(--cream-sub);
    font-size: 12px;
}

.friends-gameplay .friends-guesser-panel input {
    min-height: 64px;
    font-size: 23px;
    text-transform: uppercase;
}

.friends-gameplay .friends-answer-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0;
    border-left: 4px solid #c65a42;
    border-radius: 0 12px 12px 0;
    padding: 12px 14px;
    background: #fff0eb;
}

.friends-gameplay .friends-answer-warning b {
    color: var(--danger);
    font-family: var(--font-title);
    font-size: var(--type-body);
    font-weight: 600;
}

.friends-gameplay .friends-answer-warning span {
    color: var(--danger);
    font-size: var(--type-sm);
    text-align: right;
}

.friends-gameplay .friends-guesser-panel .round-mobile-actions.dual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 10px;
}

.friends-gameplay .friends-guesser-panel .round-pass-form {
    margin: 0;
}

.friends-gameplay .friends-guesser-panel .round-pass-form .btn-outline {
    width: auto;
    min-width: 180px;
    min-height: 100%;
    margin: 0;
    border: 2px solid var(--mode);
    border-radius: var(--radius-lg);
    background: var(--tile);
    color: var(--mode-dark);
    font-size: var(--type-body);
    font-weight: 900;
    box-shadow: 0 4px 0 var(--paper-border);
}

.friends-gameplay .friends-pass-note {
    margin-top: 9px;
    color: var(--cream-sub);
    font-size: var(--type-sm);
    text-align: center;
}

.friends-gameplay .review-rules-body {
    padding: 2px 12px 13px;
}

.friends-gameplay .review-rules-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.friends-gameplay .review-rule-item {
    grid-column: span 2;
    min-width: 0;
    min-height: 108px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid #dacdad;
    border-radius: 13px;
    padding: 10px;
    background: #fff;
}

.friends-gameplay .review-rule-item:nth-child(n+4) {
    grid-column: span 3;
}

.friends-gameplay .review-rule-item > .ui-mascot {
    width: 72px !important;
    height: 78px !important;
    object-fit: contain;
    object-position: center bottom;
}

.friends-gameplay .review-rule-item b,
.friends-gameplay .review-rule-item small {
    display: block;
}

.friends-gameplay .review-rule-item b {
    color: var(--ink);
    font-family: var(--font-title);
    font-size: var(--type-body);
    line-height: 1.2;
}

.friends-gameplay .review-rule-item small {
    margin-top: 4px;
    color: var(--cream-sub);
    font-size: var(--type-sm);
    line-height: 1.3;
}

.friends-gameplay .review-rule-item i {
    color: var(--danger);
}

.friends-gameplay .review-rules-body > p {
    margin: 10px 2px 0;
    color: var(--cream-sub);
    font-size: var(--type-sm);
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .friends-gameplay .waiting-layout,
    .friends-gameplay .guesser-layout {
        grid-template-columns: minmax(0, 1fr) 230px;
        gap: 14px;
    }

    .friends-gameplay .friends-waiting-panel .pt-tiles {
        grid-template-columns: 1fr;
    }

    .friends-gameplay .friends-waiting-panel .pt-tile {
        min-height: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 2px 10px;
        text-align: left;
    }

    .friends-gameplay .friends-waiting-panel .pt-badge {
        grid-row: 1 / 3;
        margin: 0;
    }
}

@media (max-width: 640px) {
    .friends-gameplay .waiting-layout,
    .friends-gameplay .guesser-layout {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .friends-gameplay .friends-word-card {
        min-height: 112px;
    }

    .friends-gameplay .friends-clue-fields,
    .friends-gameplay .review-rules-grid {
        grid-template-columns: 1fr;
    }

    .friends-gameplay .review-rule-item,
    .friends-gameplay .review-rule-item:nth-child(n+4) {
        grid-column: auto;
        min-height: 76px;
    }

    .friends-gameplay .friends-answer-warning {
        align-items: flex-start;
        flex-direction: column;
    }

    .friends-gameplay .friends-answer-warning span {
        text-align: left;
    }

    .friends-gameplay .friends-play-mascot.compact {
        min-height: 245px;
    }

    .friends-gameplay .outcome-lost .friends-round-celebration {
        min-height: 282px;
        padding: 18px 14px 20px;
    }

    .friends-gameplay .outcome-lost .friends-wrong-answer,
    .friends-gameplay .outcome-lost .friends-result-penalty {
        width: min(100%, 230px);
    }

    .friends-gameplay .friends-clue-entry > .round-mobile-actions,
    .friends-gameplay .friends-guesser-panel > .round-mobile-actions {
        position: fixed;
        z-index: 70;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto !important;
        display: grid;
        margin: 0 !important;
        padding: 11px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
        border-top: 1px solid rgba(255,255,255,.16);
        background: color-mix(in srgb, var(--felt-2) 94%, transparent);
        box-shadow: 0 -10px 25px rgba(18,44,61,.24);
        backdrop-filter: blur(12px);
    }

    .friends-gameplay .friends-guesser-panel .round-mobile-actions.dual {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .friends-gameplay .friends-guesser-panel .round-pass-form .btn-outline {
        min-width: 132px;
        min-height: 52px;
        border-color: var(--mode-light);
        background: var(--cream);
        color: var(--mode-dark);
    }

    .friends-gameplay .friends-pass-note {
        margin-bottom: 0;
    }
}

/* Fin de partie : le détail lui-même est celui de l'historique. Seuls le
   message de dernière manche et les actions de revanche lui sont propres. */
.friends-gameplay .friends-final-notice {
    display: grid;
    gap: 3px;
    margin-top: var(--space-4);
    border-left: 5px solid var(--gold);
    padding: var(--space-3) var(--space-4);
}

.friends-gameplay .friends-final-notice b {
    color: var(--ink);
    font-family: var(--font-title);
    font-size: var(--type-body);
}

.friends-gameplay .friends-final-notice span {
    color: var(--cream-sub);
    font-size: var(--type-sm);
}

.friends-gameplay .friends-final-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.friends-gameplay .friends-final-actions > div:last-child {
    display: grid;
    gap: var(--space-2);
}

.friends-gameplay .friends-final-actions form {
    margin: 0;
}

.friends-gameplay .friends-final-actions .ui-btn {
    width: 100%;
}

.friends-gameplay .friends-host-left {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--danger-bg);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    background: var(--danger-bg);
}

.friends-gameplay .friends-host-left > .ui-mascot {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain;
}

.friends-gameplay .friends-host-left b,
.friends-gameplay .friends-host-left small {
    display: block;
}

.friends-gameplay .friends-host-left b {
    color: var(--danger);
    font-family: var(--font-title);
}

.friends-gameplay .friends-host-left small {
    margin-top: var(--space-1);
    color: var(--cream-sub);
    font-size: var(--type-label);
}

@media (max-width: 760px) {
    .friends-gameplay .friends-final-actions {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

/* Sur petit écran, Motchi devient un conseil compact plutôt qu'une seconde
   colonne empilée sous le contenu. La même composition sert tous les états. */
@media (max-width: 640px) {
    .friends-gameplay .friends-play-mascot,
    .friends-gameplay .friends-play-mascot.compact {
        min-height: 132px;
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        margin-top: 12px;
    }

    .friends-gameplay .friends-play-mascot > .ui-mascot,
    .friends-gameplay .friends-play-mascot.compact > .ui-mascot {
        grid-column: 1;
        grid-row: 1;
        width: 112px !important;
        height: 124px !important;
        max-width: none;
        margin: 0;
        object-position: center bottom;
    }

    .friends-gameplay .friends-play-mascot::after {
        right: auto;
        bottom: 2px;
        left: 56px;
        width: 98px;
        transform: translateX(-50%);
    }

    .friends-gameplay .friends-play-halo {
        right: auto;
        bottom: 8px;
        left: 56px;
        width: 132px;
        height: 116px;
        transform: translateX(-50%);
    }

    .friends-gameplay .friends-play-tip {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        order: initial;
        margin: 0;
        padding: 13px 14px;
    }
}

/* ── Le salon ──────────────────────────────────────────────────────────────
   #128 avait refait la manche, le résultat et la fin de partie, mais laissé cet
   écran de côté : il dessinait encore ses mascottes avec `panda.js` et posait
   ses blocs sur 460 px.

   Trois emprunts, aucun dessin nouveau. L'ouverture est celle des pages de
   données (titre coupé en deux dont la seconde moitié est dorée, illustration à
   côté). Le panneau des joueurs reprend la recette du bloc Élite du classement,
   donc l'accent du mode assombri et son liseré doré : posé sur le feutre de son
   propre mode, un bloc de la couleur du mode serait invisible, et le papier
   crème est déjà pris par l'aide-mémoire. Les places, enfin, sont des cartes
   blanches à tranche pleine, l'épaisseur que portent les boutons. */

.lobby-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: center;
    gap: var(--space-5);
}

.lobby-hero-copy .ui-eyebrow { color: var(--light-sub); }
.lobby-hero-copy .ui-title { max-width: 19ch; margin: var(--space-3) 0 var(--space-2); color: var(--light); }
.lobby-hero-copy .ui-hint { max-width: 56ch; color: var(--light-sub); }
.lobby-hero-art .ui-scene { width: 100%; }

/* Le mode Blitz n'a pas de place dans la barre du haut tant que la partie n'a
   pas démarré (le compteur y attend une manche) : le salon l'annonce donc
   lui-même, avec le rythme qu'il impose. */
.lobby-blitz {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: var(--space-4) 0 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    color: var(--light);
    font-size: var(--type-sm);
    font-weight: 700;
}

.lobby-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.lobby-actions form { display: contents; }
/* Le porteur de l'action principale ne pèse rien tant qu'il ne devient pas la
   barre du bas : au large, son bouton reste un élément de la rangée. */
.lobby-cta { display: contents; }

/* La pastille du code : il se lit et se dicte, donc il est posé sur du blanc et
   non sur le feutre, et son bouton copie le code seul quand celui d'à côté
   copie le lien. */
.lobby-code {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-md);
    background: var(--tile);
    box-shadow: 0 3px 0 var(--paper-edge);
}

.lobby-code .ui-eyebrow { color: var(--cream-sub); }
.lobby-code-value { font-family: var(--font-code); font-weight: 700; font-size: var(--type-section); letter-spacing: 5px; color: var(--ink); }

.lobby-code-copy {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-sm);
    background: var(--cream);
    color: var(--mode-dark);
    font-size: 15px;
    cursor: pointer;
}

.lobby-code-copy:hover, .lobby-code-copy:focus-visible { background: var(--cream-2); }
.lobby-code-copy:focus-visible { outline: none; box-shadow: var(--ring); }

/* ── Le panneau des joueurs ── */
.lobby-board {
    margin-top: var(--space-6);
    padding: var(--space-5) var(--space-4) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(rgba(255, 255, 255, .16) .7px, transparent .7px) 0 0 / 8px 8px,
        linear-gradient(130deg,
            color-mix(in srgb, var(--mode) 75%, #000) 0%,
            color-mix(in srgb, var(--mode) 58%, #000) 55%,
            color-mix(in srgb, var(--mode) 41%, #000) 100%);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
    color: var(--light);
}

.lobby-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 1px dashed rgba(255, 255, 255, .2);
}

.lobby-board-head .ui-eyebrow { color: var(--gold); }

.lobby-seats { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.lobby-seats-rest { display: none; }
.lobby-seat { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }

/* Le numéro reste sur le panneau plutôt que dans la carte : il appartient à la
   place et non à la personne, donc il survit à son départ, et de l'or sur du
   blanc ne se lirait pas (1,7:1). */
.lobby-seat-num {
    flex: 0 0 16px;
    font-family: var(--font-code);
    font-size: var(--type-sm);
    font-weight: 700;
    color: var(--gold);
    text-align: center;
}

.lobby-seat-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--tile-border);
    border-radius: var(--radius-md);
    background: var(--tile);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .22);
}

.lobby-seat.is-mine .lobby-seat-card {
    border-color: var(--gold-dark);
    box-shadow: 0 4px 0 var(--gold-dark);
}

/* Une place libre n'est pas une carte : c'est un contour, et le blanc reste
   réservé à ce qui est occupé. */
.lobby-seat-card.is-free {
    border: 1px dashed rgba(255, 255, 255, .24);
    background: transparent;
    box-shadow: none;
    padding-block: var(--space-3);
    color: var(--light-sub);
}

.lobby-seat-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: var(--type-body);
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lobby-seat-card.is-free .lobby-seat-name { color: var(--light-sub); font-weight: 500; }
.lobby-seat-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }

.lobby-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--on-accent);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--type-sm);
    text-transform: uppercase;
}

/* Croix discrète, mais 44 px de zone tactile : les marges négatives absorbent
   la différence pour que la ligne ne grandisse pas. */
.lobby-seat-remove {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -6px -8px -6px 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--cream-sub);
    font-size: 14px;
    cursor: pointer;
}

.lobby-seat-remove:hover, .lobby-seat-remove:focus-visible { background: var(--danger-bg); color: var(--danger); }

/* ── L'ajout d'un bot ── */
.lobby-bots { margin-top: var(--space-4); }
.lobby-bots-trigger { display: flex; align-items: center; justify-content: center; gap: var(--space-3); list-style: none; cursor: pointer; }
.lobby-bots-trigger::-webkit-details-marker { display: none; }
.lobby-bots-trigger small { font-family: var(--font-text); font-weight: 700; opacity: .8; }
.lobby-bots-form { margin-top: var(--space-3); }
.lobby-bots-styles { margin: 0 0 var(--space-3); padding: 0; border: 0; }
.lobby-bots-styles legend { padding: 0 0 var(--space-2); font-size: var(--type-sm); font-weight: 800; color: var(--light-sub); }
.lobby-bots-options { display: grid; gap: var(--space-2); }

/* La case à cocher sort du flux visuel : c'est la carte qui se coche, et le
   bouton radio natif posé devant le visage du style dédoublait la cible. Il
   reste focalisable, et son halo passe sur la carte. */
.lobby-bots-option { position: relative; display: block; cursor: pointer; }
.lobby-bots-option input { position: absolute; opacity: 0; pointer-events: none; }

.lobby-bots-copy {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-height: 96px;
    height: 100%;
    padding: var(--space-3);
    border: 2px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .07);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.lobby-bots-copy .ui-mascot { width: 48px; height: 48px; }
.lobby-bots-text { display: grid; gap: 2px; min-width: 0; }
.lobby-bots-option:hover .lobby-bots-copy { background: rgba(255, 255, 255, .11); }
.lobby-bots-option input:checked + .lobby-bots-copy { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.lobby-bots-option input:focus-visible + .lobby-bots-copy { box-shadow: var(--ring); }
.lobby-bots-copy strong { font-family: var(--font-title); font-weight: 600; font-size: var(--type-body); color: var(--light); }
.lobby-bots-copy small { font-size: var(--type-sm); line-height: 1.35; color: var(--light-sub); }

.lobby-note { margin: var(--space-3) 0 0; font-size: var(--type-sm); color: var(--light-sub); }

/* Le lancement ferme le panneau des joueurs : il se place après la composition
   du salon, avec une largeur de vraie action plutôt qu'une barre de 920 px. */
.lobby-start {
    display: flex;
    justify-content: center;
    margin-top: var(--space-5);
}
.lobby-start form { width: min(360px, 100%); }
.lobby-start .ui-btn { width: 100%; }

/* ── Le pied ── */
.lobby-foot { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.lobby-wait { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--light-sub); font-size: var(--type-sm); font-weight: 700; }

.lobby-leave {
    border: none;
    background: none;
    color: var(--light);
    font-family: var(--font-text);
    font-size: var(--type-sm);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.lobby-leave:hover { color: var(--gold); }
.lobby-leave:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }

@media (min-width: 700px) {
    /* Sept lignes pleine largeur à 920 px, c'est beaucoup de vide à droite d'un
       pseudo : les places passent en deux colonnes dès qu'il y a la place. */
    .lobby-seats { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
    .lobby-bots-options { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 699px) {
    /* Une seule place libre reste visible, la prochaine, et les autres se
       comptent sur une ligne. */
    .lobby-seat.is-free ~ .lobby-seat.is-free { display: none; }

    .lobby-seats-rest {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-2);
        border: 1px dashed rgba(255, 255, 255, .18);
        border-radius: var(--radius-md);
        color: var(--light-sub);
        font-size: var(--type-sm);
        font-weight: 700;
    }
}

@media (max-width: 899px) {
    .lobby-hero { grid-template-columns: minmax(0, 1fr) 250px; }
}

@media (max-width: 640px) {
    /* L'action principale se pose en bas de l'écran, comme celles des manches
       depuis #128 : on lance la partie après avoir lu qui est là et ajouté un
       bot, donc laisser le bouton en haut demandait de remonter pour agir. Même
       recette que `.round-mobile-actions`, retraits d'écran compris, et la
       hauteur rendue au bas de page pour que la barre ne couvre rien. */
    .lobby-cta {
        position: fixed;
        z-index: 70;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        padding: 11px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
        border-top: 1px solid rgba(255, 255, 255, .16);
        background: color-mix(in srgb, var(--felt-2) 94%, transparent);
        box-shadow: 0 -10px 25px rgba(18, 44, 61, .24);
        backdrop-filter: blur(12px);
    }

    .lobby-cta .ui-btn { width: 100%; }
    .friends-gameplay[data-screen="lobby"] { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    body:has(.friends-gameplay[data-screen="lobby"]) .stage { padding-bottom: 0; }

    /* La mascotte quitte la grille sur téléphone : le texte garde une colonne
       lisible, tandis que l'invitation peut employer toute la largeur sous le
       hero. La remonter exploite le coin libre sans pousser le code vers le bas. */
    .lobby-hero { position: relative; display: block; }
    .lobby-hero-copy .ui-title { max-width: 215px; }
    .lobby-hero-copy .ui-hint { max-width: 215px; font-size: var(--type-sm); }
    .lobby-hero-art {
        position: absolute;
        top: 62px;
        right: -8px;
        width: 112px;
        pointer-events: none;
    }

    /* La lueur appartient déjà à ClueScene. Quand la scène cède la place à une
       mascotte, on la recentre derrière elle et on arrête son animation : elle
       l'ancre au feutre sans devenir un second effet d'appel. */
    .lobby-hero-art .ui-scene-glow {
        top: 56%;
        width: 118%;
        opacity: .72;
        animation: none;
    }

    /* L'action principale reste dans la barre fixe. Le code et le partage
       forment une seule ligne d'invitation sur toute la largeur disponible. */
    .lobby-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
        margin-top: var(--space-4);
    }
    .lobby-actions form .ui-btn { width: 100%; }
    .lobby-code {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
        gap: var(--space-2);
        padding-left: var(--space-3);
    }
    .lobby-actions > .ui-btn {
        width: auto;
        min-width: 0;
    }

    /* L'état du salon tient à côté du compteur : les empiler consommait une
       ligne entière alors qu'ils restent courts, même avec sept joueurs. */
    .lobby-board-head { flex-direction: row; align-items: center; gap: var(--space-2); }
    .lobby-board-head .ui-chip { flex: 0 0 auto; padding-inline: var(--space-2); }
}