/* PLOUF ! Style des comptes Dojo Party (comptes/CONCEPTION.md §7.2.2, §7.2.4, §7.2.5, §7.2.7).
   Tout le style des comptes vit ici : css/style.css ne change pas (comptes/phase-b/GREFFES.md, G-index-1).
   Style repris du jeu : fond ciel et voile, panneau crème à bordure encre et ombre dure (.online-panel), titres en
   Titan One blancs à contour encre (.tt), texte en Fredoka 600, bouton principal rose, entrée choisie jaune
   (.online-item.sel), erreur en pastille rouge (.online-error).

   Unités. L'écran Compte et le formulaire d'une place mesurent tout en em, à partir d'une unité posée sur leur
   racine : 1rem (1 % de la largeur d'un écran 16:9, comme le reste du jeu), et, sur un écran de téléphone en
   portrait, une unité plus grande pour que le texte reste lisible (dernier bloc). Le panneau porte la taille du
   texte courant (1,5 unité) : dans un panneau, 1em vaut donc 1,5 unité. Les éléments posés dans les écrans du jeu
   (badge du titre, carte Compte, ligne des places, bloc de fin, mention « À débloquer ») restent en rem, comme eux.
   Contraintes de place : l'écran du mode tient ses quatre cartes et la salle tient dans 80 × 45 rem (640 × 360). */

/* ---------- Écran Compte ---------- */
#ui[data-screen="compte"] .veil { opacity: 1; }

#ui .s-compte {
  font-size: 1rem; pointer-events: auto; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: rgba(38, 17, 90, .5) transparent;
}
#ui .s-compte .off, #ui .compte-place .off { display: none !important; }

/* Formulaires : les touches y restent au navigateur (troisième mode de saisie, §7.2.4), la souris et la sélection
   de texte aussi. */
#ui .compte-form, #ui .compte-form * { pointer-events: auto; user-select: text; -webkit-user-select: text; }
#ui .compte-form input[type="text"], #ui .compte-form input[type="email"], #ui .compte-form input[type="password"] { cursor: text; }
.compte-form { display: flex; flex-direction: column; gap: .7em; }

.compte-vue { display: none; min-height: 100%; }
.compte-vue.on { display: flex; flex-direction: column; }
/* Centré quand il tient, calé en haut et défilant quand il dépasse. */
.compte-defile {
  margin: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.1em;
  padding: 1.4em 1.6em 1.6em;
}
/* Vues à liste (classement, historique, détail, amis) : l'écran garde sa hauteur, la liste défile dans le panneau. */
.compte-vue.plein .compte-defile { max-height: 100vh; }
.compte-vue.plein .compte-panel { min-height: 0; }

/* Un titre qui porte un pseudo (« AVEC OU CONTRE <pseudo> ») peut avoir un mot plus large que l'écran d'un téléphone :
   le mot se coupe alors, au lieu de sortir de l'écran. Les autres titres tiennent et ne changent pas. */
.compte-titre {
  flex: none; max-width: 100%; font-size: 3.4em; --tilt: -1.5deg; transform: rotate(var(--tilt)); animation: popIn .6s both;
  white-space: normal; text-align: center; text-wrap: balance; overflow-wrap: anywhere;
}
.compte-sous {
  flex: none; max-width: 70em; padding: .25em 1em .35em; border-radius: .8em; background: rgba(23, 10, 58, .72);
  font-size: 1.4em; line-height: 1.25; text-align: center; text-wrap: balance;
}
.compte-sous:empty { display: none; }
.compte-aide {
  flex: none; max-width: 74em; padding: .5em 1.6em .55em; border-radius: 1.3em; background: rgba(23, 10, 58, .8);
  border: .2em solid var(--ink); font-size: 1.3em; line-height: 1.25; text-align: center; text-wrap: balance;
  animation: popIn .6s .3s both;
}

/* Panneau : le .online-panel du jeu. */
.compte-panel {
  position: relative; flex: 0 1 auto; width: min(40em, 100%); display: flex; flex-direction: column; gap: .8em;
  padding: 1em 1.2em 1.1em; border: .27em solid var(--ink); border-radius: 1.6em; color: var(--ink);
  background: linear-gradient(180deg, #fffdf6, var(--cream) 62%, #ffeccd);
  box-shadow: 0 .47em 0 var(--ink), 0 1.2em 1.7em rgba(23, 10, 58, .38); animation: popIn .55s .1s both;
  font-size: 1.5em; line-height: 1.25;
}
.compte-panel-menu { width: min(30em, 100%); }
.compte-panel-large { width: min(50em, 100%); }
.compte-panel.compte-texte {
  width: min(32em, 100%); font-size: 1.8em; line-height: 1.3; text-align: center; text-wrap: balance;
  overflow-wrap: anywhere; padding: 1em 1.4em 1.1em;
}
.compte-texte-court { text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.compte-texte-detail { font-size: .88em; text-align: center; text-wrap: balance; opacity: .85; overflow-wrap: anywhere; }
.compte-texte-detail:empty, .compte-texte-court:empty { display: none; }

/* ---------- Boutons ---------- */
.compte-menu { display: flex; flex-direction: column; gap: .5em; }
.compte-menu-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5em .6em; }
.compte-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em .6em; }
/* Boutons posés hors d'un panneau (vues d'erreur et d'attente) : la même taille que dans un panneau. */
.compte-defile > .compte-actions { font-size: 1.5em; }
.compte-actions-secondes .compte-bouton { font-size: .9em; }

.compte-bouton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 2.2em; padding: .3em 1em .4em; border-radius: .9em; border: .18em solid transparent;
  background: rgba(38, 17, 90, .08); color: var(--ink); font: inherit; font-weight: 600; font-size: 1.1em;
  line-height: 1.15; text-align: center; cursor: pointer; pointer-events: auto; outline: none;
  transition: transform .25s var(--boing);
}
.compte-bouton:hover { background: rgba(38, 17, 90, .15); }
.compte-bouton.principal {
  background: linear-gradient(180deg, #ff86bf 0%, var(--pink) 50%, var(--pink-deep) 100%); border-color: var(--ink);
  color: #fff; font-family: 'Titan One', 'Fredoka', sans-serif; font-weight: 400; letter-spacing: .02em;
  text-shadow: 0 .09em 0 var(--ink); box-shadow: 0 .2em 0 var(--ink);
}
.compte-bouton.second { background: rgba(38, 17, 90, .04); border-color: rgba(38, 17, 90, .28); }
.compte-bouton.danger {
  background: linear-gradient(180deg, #ef3a50, #cf1c34); border-color: var(--ink); color: #fff;
  text-shadow: 0 .09em 0 rgba(23, 10, 58, .7); box-shadow: 0 .2em 0 var(--ink);
}
/* Entrée choisie (manette, flèches) ou focus du clavier : le jaune du jeu (.online-item.sel). */
.compte-bouton.sel, .compte-bouton:focus-visible {
  background: linear-gradient(180deg, #fff3a0, var(--yellow) 55%, #ffb21e); border-color: var(--ink); color: var(--ink);
  text-shadow: none; box-shadow: 0 .26em 0 var(--ink); transform: scale(1.04);
}
.compte-bouton.principal.sel, .compte-bouton.principal:focus-visible,
.compte-bouton.danger.sel, .compte-bouton.danger:focus-visible {
  background: linear-gradient(180deg, #ff86bf 0%, var(--pink) 50%, var(--pink-deep) 100%); color: #fff;
  text-shadow: 0 .09em 0 var(--ink); box-shadow: 0 .2em 0 var(--ink), 0 0 0 .24em var(--yellow);
}
.compte-bouton.danger.sel, .compte-bouton.danger:focus-visible { background: linear-gradient(180deg, #ef3a50, #cf1c34); }
.compte-bouton[disabled] { opacity: .55; cursor: wait; transform: none; }
.compte-bouton.petit { font-size: .85em; min-height: 1.9em; padding: .2em .8em .3em; }
.compte-pastille {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em; padding: 0 .35em .05em;
  border-radius: .7em; background: var(--pink); color: #fff; border: .12em solid var(--ink); font-size: .8em;
  text-shadow: 0 .08em 0 var(--ink);
}

/* ---------- Champs ---------- */
.compte-formulaire { display: flex; flex-direction: column; gap: .7em; }
.compte-grille { display: grid; grid-template-columns: 1fr 1fr; gap: .6em 1em; align-items: start; }
.compte-grille-3 { grid-template-columns: 1fr 1fr 1fr; }
.compte-grille-connexion { grid-template-columns: 3fr 2fr; }   /* l'adresse est plus longue que le mot de passe */
.compte-champ { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.compte-libelle { font-size: .85em; opacity: .9; }
.compte-entree {
  width: 100%; min-width: 0; height: 2.2em; padding: .25em .65em .3em; font: inherit; font-weight: 600; color: var(--ink);
  background: #fff; border: .15em solid var(--ink); border-radius: .65em; outline: none;
}
.compte-entree:focus, .compte-entree.sel { box-shadow: 0 0 0 .2em var(--yellow); }
.compte-entree.faux { border-color: #d01c33; box-shadow: 0 0 0 .2em rgba(239, 58, 80, .35); }
.compte-entree.faux:focus { box-shadow: 0 0 0 .2em var(--yellow); }
.compte-champ-aide { font-size: .75em; line-height: 1.2; opacity: .85; overflow-wrap: anywhere; }
.compte-champ-aide:empty { display: none; }
.compte-champ-aide.bon { color: #0b7a40; opacity: 1; }
.compte-champ-aide.faux { color: #c0112a; opacity: 1; }

.compte-case {
  display: inline-flex; align-items: center; gap: .5em; align-self: flex-start; padding: .25em .6em .3em;
  border-radius: .7em; border: .15em solid transparent; cursor: pointer;
}
.compte-case input { width: 1.25em; height: 1.25em; margin: 0; flex: none; accent-color: var(--pink); cursor: pointer; }
.compte-case.sel, .compte-case:focus-within { border-color: var(--ink); background: rgba(255, 210, 62, .35); }

/* Les favoris par rangées de quatre : les huit personnages font deux rangées égales à toutes les tailles, au lieu de
   cinq et trois en paysage (dev/HUIT.md §5.3, mesuré à 1280 × 720, 640 × 360 et 390 × 844 par test_ecrans_compte.py). */
.compte-persos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3em; }
.compte-perso {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .15em; min-width: 4.2em;
  padding: .3em .35em .25em; border-radius: .8em; border: .15em solid transparent; cursor: pointer;
}
.compte-perso-radio { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.compte-perso:has(input:checked) { border-color: var(--ink); background: rgba(38, 17, 90, .08); }
.compte-perso:has(input:checked) .compte-perso-nom { font-weight: 700; }
.compte-perso.sel, .compte-perso:focus-within { box-shadow: 0 0 0 .2em var(--yellow); }
.compte-perso-nom { font-size: .75em; }
.compte-perso .compte-avatar { font-size: 1.1em; }

/* Pastille du personnage favori (P3) : la couleur de sa carte, son initiale. */
.compte-avatar {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2em; height: 2em; padding-bottom: .08em;
  border-radius: 50%; border: .13em solid var(--ink); color: #fff; line-height: 1;
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--cc, #8d5bff) 55%, #fff) 0%, var(--cc, #8d5bff) 62%, color-mix(in srgb, var(--cc, #8d5bff) 75%, #26115a) 100%);
  font-family: 'Titan One', 'Fredoka', sans-serif; font-weight: 400; -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill;
}

/* ---------- Messages ---------- */
.compte-msg { display: none; }
.compte-msg.info, .compte-msg.ok, .compte-msg.attention, .compte-msg.erreur {
  display: block; padding: .3em .9em .4em; border-radius: .8em; border: .14em solid transparent; font-size: .92em;
  line-height: 1.3; text-align: center; text-wrap: balance; overflow-wrap: anywhere;
}
.compte-msg.info { background: rgba(38, 17, 90, .07); }
.compte-msg.ok { border-color: var(--ink); background: linear-gradient(180deg, #a8f7c6, #35e07a); box-shadow: 0 .16em 0 var(--ink); }
.compte-msg.attention { border-color: var(--ink); background: linear-gradient(180deg, #fff3a0, var(--yellow)); box-shadow: 0 .16em 0 var(--ink); }
/* La pastille rouge du jeu, un peu plus sombre pour que le blanc se lise (contraste). */
.compte-msg.erreur {
  border-color: var(--ink); background: linear-gradient(180deg, #ef3a50, #cf1c34); color: #fff;
  text-shadow: 0 .08em 0 rgba(23, 10, 58, .6); box-shadow: 0 .16em 0 var(--ink);
}

.compte-etape { display: flex; flex-direction: column; gap: .6em; }
.compte-ou { text-align: center; font-size: .85em; opacity: .75; }
.compte-vide { padding: .8em 1em; text-align: center; font-size: .92em; opacity: .8; text-wrap: balance; }

.compte-points { display: flex; gap: 1em; padding-top: .6em; }
.compte-points span {
  width: 1.9em; height: 1.9em; border-radius: 50%; border: .3em solid var(--ink);
  background: radial-gradient(circle at 36% 30%, #fff, #7fe3ff 60%, #39c8ff); animation: dotHop .9s ease-in-out infinite;
}
.compte-points span:nth-child(2) { animation-delay: .15s; }
.compte-points span:nth-child(3) { animation-delay: .3s; }

/* ---------- Profil ---------- */
.compte-profil-tete { flex: none; display: flex; align-items: center; justify-content: center; gap: 1.2em; max-width: 100%; }
.compte-profil-tete .compte-avatar.grand { font-size: 2.6em; box-shadow: 0 .12em 0 var(--ink); }
.compte-profil-ident { display: flex; flex-direction: column; align-items: flex-start; gap: .4em; min-width: 0; }
.compte-profil-nom { font-size: 3.6em; --tilt: -1.5deg; transform: rotate(var(--tilt)); animation: popIn .6s both; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.compte-profil-adresse {
  padding: .2em .9em .3em; border-radius: .8em; background: rgba(23, 10, 58, .72); font-size: 1.3em; overflow-wrap: anywhere;
}
.compte-profil-adresse:empty { display: none; }
/* Une rangée d'autant de cartes que de classements (Duel, Mêlée, 2 contre 2) : à parts égales, sans passer à la ligne,
   pour que le profil tienne sans défiler à 640 × 360. */
.compte-cotes { display: flex; justify-content: center; gap: .5em; }
.compte-cote {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .45em .5em .55em;
  border-radius: 1em; background: rgba(38, 17, 90, .07); border: .14em solid rgba(38, 17, 90, .2);
}
.compte-cote-formule { font-size: .8em; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.compte-cote-valeur { font-size: 2.1em; }
.compte-cote.vide .compte-cote-valeur { opacity: .55; }
.compte-cote-detail { font-size: .78em; text-align: center; text-wrap: balance; opacity: .85; }
.compte-profil-parties { font-size: .85em; text-align: center; opacity: .85; }
.compte-profil-parties:empty { display: none; }

/* ---------- Listes : classement, historique, détail, amis ---------- */
.compte-onglets-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5em 1em; }
.compte-onglets { display: flex; flex-wrap: wrap; gap: .35em; }
.compte-bouton.compte-onglet { font-size: .95em; min-height: 1.9em; padding: .2em .9em .3em; }
.compte-bouton.compte-onglet.actif {
  background: linear-gradient(180deg, #a880ff, var(--violet) 50%, var(--violet-deep)); border-color: var(--ink); color: #fff;
  text-shadow: 0 .08em 0 rgba(23, 10, 58, .6);
}
.compte-bouton.compte-onglet.actif.sel {
  background: linear-gradient(180deg, #fff3a0, var(--yellow) 55%, #ffb21e); color: var(--ink); text-shadow: none;
  box-shadow: 0 .26em 0 var(--ink), inset 0 -.28em 0 var(--violet);
}

.compte-liste, .compte-historique, .compte-amis {
  flex: 1 1 auto; min-height: 5em; max-height: 20em; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: rgba(38, 17, 90, .45) transparent;
}
.compte-liste { padding: .25em; border-radius: .9em; background: rgba(38, 17, 90, .05); border: .15em solid transparent; }
.compte-liste.sel { border-color: var(--ink); box-shadow: 0 0 0 .18em var(--yellow); }
.compte-historique, .compte-amis { display: flex; flex-direction: column; gap: .35em; padding: .3em; }

.compte-rang-ligne {
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 3.6em 4em 4.6em; align-items: center; gap: .5em;
  padding: .22em .6em; border-radius: .6em; font-size: .95em; border: .12em solid transparent;
}
.compte-rang-ligne:nth-child(even) { background: rgba(38, 17, 90, .06); }
.compte-rang-ligne.entete { font-size: .72em; letter-spacing: .05em; text-transform: uppercase; opacity: .75; background: none; }
.compte-rang-ligne.moi { border-color: var(--ink); background: linear-gradient(180deg, #fff3a0, var(--yellow)); }
.c-rang { font-family: 'Titan One', 'Fredoka', sans-serif; font-weight: 400; }
.c-joueur { display: flex; align-items: center; gap: .45em; min-width: 0; }
.c-joueur .compte-avatar { font-size: .75em; }
.c-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-note { flex: none; font-size: .72em; opacity: .75; white-space: nowrap; }
.c-cote, .c-parties, .c-vict { text-align: right; font-variant-numeric: tabular-nums; }
.c-cote { font-family: 'Titan One', 'Fredoka', sans-serif; font-weight: 400; }
.compte-rang-ligne.entete .c-rang, .compte-rang-ligne.entete .c-cote { font-family: inherit; }
.compte-moi { font-size: .9em; text-align: center; text-wrap: balance; }
.compte-moi:empty { display: none; }

.compte-bouton.compte-partie {
  display: grid; grid-template-columns: 7.8em minmax(0, 1fr) auto auto 7.4em; align-items: center; gap: .7em;
  justify-content: stretch; min-height: 2.2em; padding: .3em .8em; text-align: left; font-size: .9em;
  background: rgba(38, 17, 90, .06);
}
.compte-bouton.compte-partie.sel { transform: scale(1.015); }
.h-res { padding: .08em .5em .16em; border-radius: .6em; border: .12em solid transparent; font-size: .88em; text-align: center; white-space: nowrap; background: rgba(38, 17, 90, .1); }
.h-res.gagne, .d-res.gagne { border-color: var(--ink); background: linear-gradient(180deg, #a8f7c6, #35e07a); }
.h-res.perdu, .d-res.perdu { border-color: var(--ink); background: linear-gradient(180deg, #ffd0d5, #ff9aa6); }
/* « Partenaire parti » (2 contre 2, abandon_partenaire) : ni victoire ni défaite, un cadre sans couleur de résultat. */
.h-res.neutre, .d-res.neutre { border-color: rgba(38, 17, 90, .45); border-style: dashed; background: rgba(255, 253, 246, .9); }
/* « 2 contre 2 avec X contre Y et Z », « Mêlée contre X, Y et Z » : la phrase entière, sur autant de lignes qu'il faut.
   Jamais coupée : quatre pseudos de 16 signes y tiennent, et chacun dit qui était avec qui ou contre qui. La liste
   défile dans le panneau. */
.h-quoi { min-width: 0; line-height: 1.15; overflow-wrap: anywhere; }
.h-formule, .h-score, .h-cote-val { font-family: 'Titan One', 'Fredoka', sans-serif; font-weight: 400; }
.h-score { white-space: nowrap; font-variant-numeric: tabular-nums; }
.h-cote { white-space: nowrap; text-align: right; }
.h-cote.non { font-size: .82em; opacity: .8; white-space: normal; text-align: right; }
.h-date { font-size: .8em; opacity: .8; white-space: nowrap; text-align: right; }

.compte-detail-sieges { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: .5em; }
.compte-detail-siege { display: flex; flex-direction: column; align-items: center; gap: .15em; min-width: 0; padding: .45em .5em; border-radius: 1em; background: rgba(38, 17, 90, .07); border: .12em solid transparent; }
.compte-detail-siege.moi { border-color: var(--ink); background: linear-gradient(180deg, #fff3a0, var(--yellow)); }
/* 2 contre 2 : deux groupes côte à côte, ton équipe puis l'autre, chacun avec ses deux sièges. */
.compte-detail-sieges.en-equipes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
.compte-detail-equipe {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35em; min-width: 0; padding: .3em .35em .4em;
  border-radius: 1.1em; border: .14em dashed rgba(38, 17, 90, .3);
}
.compte-detail-equipe-titre { grid-column: 1 / -1; text-align: center; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.d-nom { display: flex; align-items: center; gap: .4em; max-width: 100%; font-weight: 600; }
.d-nom .compte-avatar { font-size: .8em; }
.d-pseudo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-perso { font-size: .8em; opacity: .85; }
.d-score { font-size: 2em; }
.d-res { padding: .06em .6em .14em; border-radius: .6em; border: .12em solid transparent; font-size: .82em; white-space: nowrap; }
.compte-stat { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--n, 2), minmax(4.6em, 7em)); gap: .5em; padding: .18em .6em; font-size: .85em; border-radius: .5em; }
.compte-stat:nth-child(even) { background: rgba(38, 17, 90, .06); }
.compte-stat.entete { font-weight: 700; opacity: .8; }
.s-lbl { min-width: 0; }
.s-val { text-align: right; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-val.moi { font-weight: 700; color: var(--violet-deep); }
.compte-stat-partie { padding: .4em; text-align: center; font-size: .85em; opacity: .85; }

.compte-ajout { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6em .7em; }
.compte-ajout .compte-champ { flex: 1 1 14em; }
.compte-section { display: flex; flex-direction: column; gap: .3em; }
.compte-section-titre { padding: .15em .3em 0; font-family: 'Titan One', 'Fredoka', sans-serif; font-weight: 400; font-size: .95em; letter-spacing: .03em; opacity: .85; }
.compte-ami { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .6em; padding: .3em .5em; border-radius: .8em; background: rgba(38, 17, 90, .06); }
.compte-ami .compte-avatar { font-size: .85em; }
.a-nom { min-width: 4em; font-weight: 700; overflow-wrap: anywhere; }
.a-info { flex: 1 1 10em; display: flex; flex-direction: column; min-width: 0; font-size: .78em; opacity: .9; }
.a-info:empty { display: none; }
/* Une cote (« 2 contre 2 : 993 ») ne se coupe jamais : la ligne passe à la ligne entre deux cotes. */
.a-cote { white-space: nowrap; }
.a-actions { display: flex; flex-wrap: wrap; gap: .35em; margin-left: auto; }

/* ---------- Badge du titre ---------- */
/* En haut à droite de l'écran titre, cliquable à la souris (le clavier et la manette passent par la carte Compte). */
.compte-badge {
  position: absolute; top: 1.3rem; right: 1.6rem; z-index: 2; display: none; align-items: center; gap: .6rem; max-width: 27rem;
  padding: .3rem 1.2rem .4rem .4rem; border-radius: 2rem; border: .28rem solid var(--ink); background: var(--cream);
  color: var(--ink); box-shadow: 0 .38rem 0 var(--ink); font: inherit; font-size: 1.35rem; cursor: pointer;
  pointer-events: auto; animation: popIn .6s .5s both; transition: transform .2s var(--boing);
}
#ui[data-screen="title"] .compte-badge { display: flex; }
.compte-badge:hover { transform: translateY(-.15rem) rotate(-1deg); }
.compte-badge.connecte { background: linear-gradient(180deg, #fff3a0, var(--yellow) 55%, #ffb21e); }
.compte-badge .compte-avatar { font-size: 1.15rem; }
.compte-badge-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fenêtre de moins de 800 px de large : le rem plafonne à 8 px, l'écran ne fait plus que 80 rem et le logo du titre
   s'approche du coin. Le badge se serre dans le coin pour mordre le moins possible sur le logo. */
@media (max-width: 799px) {
  .compte-badge { top: .5rem; right: .5rem; max-width: 20rem; padding: .2rem .9rem .3rem .3rem; font-size: 1.2rem; }
}

/* ---------- Carte Compte de l'écran du mode ---------- */
/* Quatre cartes : 4 × 17,6 rem + 3 × 1,6 rem = 75,2 rem, qui tiennent dans les 80 rem d'une fenêtre de 640 × 360
   avec l'anneau de la carte choisie. Sans la carte Compte, rien ne change. */
.modes:has(> .mode-compte) { gap: 1.6rem; }
.modes:has(> .mode-compte) > .mode-card { width: 17.6rem; padding: 2rem 1rem 1.7rem; }
.modes:has(> .mode-compte) .mode-name { font-size: 2.8rem; }
.modes:has(> .mode-compte) .mode-tag { font-size: 1.3rem; }
.mode-compte .mode-count { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 1.5rem; }
.mode-compte .compte-avatar.mode { font-size: 1.95rem; box-shadow: 0 .16em 0 var(--ink); }
.mode-compte.connecte .compte-ico { display: none; }
.mode-compte:not(.connecte) .compte-avatar { display: none; }
.mode-compte.indisponible .mode-count { color: #d01c33; }

/* ---------- Formulaire d'une place de la salle (§7.2.5) ---------- */
#ui .compte-place {
  position: absolute; inset: 0; z-index: 6; display: none; overflow-y: auto; font-size: 1rem; pointer-events: auto;
  background: rgba(23, 10, 58, .55);
}
#ui .compte-place.on { display: block; }
.compte-place-defile { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 1.2em; }
.compte-place .compte-panel { width: min(34em, 100%); border-top-color: var(--pc, var(--ink)); border-top-width: .5em; }
.compte-place .compte-form { display: flex; flex-direction: column; gap: .6em; }
.compte-place .compte-titre { font-size: 1.7em; animation: none; }
.compte-note-pc { padding: .3em .8em .35em; border-radius: .7em; background: rgba(255, 210, 62, .4); font-size: .8em; text-align: center; text-wrap: balance; }

/* ---------- Salle : ligne des comptes dans chaque place (§7.2.5) ---------- */
/* Pastille accrochée au bas de la carte de la place : la carte ne grandit pas, et la salle tient toujours dans
   640 × 360 ; la rangée des places gagne seulement la moitié basse de la pastille. */
.salle-seats.avec-comptes { padding-bottom: 1.2rem; }
.seat-compte {
  position: absolute; left: 50%; bottom: -1.3rem; z-index: 1; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .2rem; max-width: 100%;
}
/* La pastille ne dépasse jamais la carte de sa place (18 rem depuis le mode à quatre) : le nom se coupe en « … ». */
.seat-compte.off { display: none; }
.sc-ligne {
  display: flex; align-items: center; gap: .45rem; max-width: 100%; box-sizing: border-box; padding: .12rem .3rem .16rem .8rem; border-radius: 1.2rem;
  border: .24rem solid var(--ink); background: var(--cream); color: var(--ink); box-shadow: 0 .25rem 0 var(--ink);
  font-size: 1.2rem; white-space: nowrap;
}
.seat-compte:not(.local) .sc-ligne { padding-right: .8rem; }
.seat-compte.connecte .sc-ligne { background: linear-gradient(180deg, #a8f7c6, #35e07a); }
.seat-compte.attente .sc-ligne { background: linear-gradient(180deg, #fff3a0, var(--yellow)); }
.sc-nom { min-width: 0; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.sc-action {
  display: inline-flex; align-items: center; gap: .35rem; padding: .08rem .7rem .16rem; border-radius: .9rem;
  border: .2rem solid var(--ink); background: linear-gradient(180deg, #ff86bf 0%, var(--pink) 50%, var(--pink-deep) 100%);
  color: #fff; font: inherit; font-size: 1.05rem; text-shadow: 0 .08em 0 var(--ink); cursor: pointer; pointer-events: auto;
}
.sc-action:hover { transform: translateY(-.1rem); }
.sc-action.off { display: none; }
.seat-compte.connecte .sc-action { background: rgba(38, 17, 90, .12); color: var(--ink); text-shadow: none; }
.sc-touche.kc { min-width: 1.5rem; height: 1.5rem; margin: 0 0 .15rem; padding: 0 .35rem; font-size: .95rem; border-radius: .45rem; border-width: .16rem; box-shadow: 0 .16rem 0 #b9a8ea, 0 .16rem 0 .16rem var(--ink); }
.sc-msg {
  max-width: 22rem; padding: .1rem .7rem .18rem; border-radius: .8rem; border: .2rem solid var(--ink);
  background: linear-gradient(180deg, #ef3a50, #cf1c34); color: #fff; font-size: 1rem; line-height: 1.2; text-align: center;
  text-wrap: balance; text-shadow: 0 .08rem 0 rgba(23, 10, 58, .6);
}
.sc-msg.off { display: none; }
.salle-classement, .salle-precedente, .salle-comptes-texte {
  padding: .2rem 1rem .3rem; border-radius: 1rem; background: rgba(23, 10, 58, .72); font-size: 1.3rem; text-align: center; text-wrap: balance;
}
.salle-classement.classee { background: linear-gradient(180deg, #7dffb8, #1fcf78); color: var(--ink); border: .24rem solid var(--ink); }
.salle-precedente { color: #ffe666; }
.salle-classement.off, .salle-precedente.off, .salle-comptes-texte.off { display: none; }

/* ---------- Écran de fin : bloc de résultat (§7.2.7) ---------- */
.compte-fin { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.compte-fin.off { display: none; }
.compte-fin-lignes { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .5rem; }
/* 2 contre 2 : les lignes des deux coéquipiers dans un même cadre, qui passe entier à la rangée suivante. Trop étroit
   pour les deux, il les met l'une sous l'autre, toujours ensemble. Le cadre ne prend aucune hauteur : sans marge
   intérieure, il se dessine par une ombre de .15rem, la moitié de l'écart entre deux rangées, si bien que deux cadres
   superposés se touchent sans se chevaucher. Des marges intérieures allongeaient l'écran de fin d'un 2 contre 2 de
   19 px en 1280 × 720. */
.compte-fin-equipe {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; max-width: 100%; margin: 0 .15rem;
  border-radius: 1.2rem; background: rgba(38, 17, 90, .1); box-shadow: 0 0 0 .15rem rgba(38, 17, 90, .1);
}
.compte-fin-ligne {
  padding: .06rem .8rem .12rem; border-radius: 1rem; border: .22rem solid var(--ink); box-shadow: 0 .22rem 0 var(--ink);
  background: var(--cream); color: var(--ink); font-size: 1.08rem; line-height: 1.1; text-align: center;
}
.compte-fin-ligne.ok { background: linear-gradient(180deg, #a8f7c6, #35e07a); }
.compte-fin-ligne.attente { background: linear-gradient(180deg, #fff3a0, var(--yellow)); }
.compte-fin-ligne.erreur { background: linear-gradient(180deg, #ef3a50, #cf1c34); color: #fff; text-shadow: 0 .08rem 0 rgba(23, 10, 58, .6); }
.compte-fin-ligne.deblocage {
  background: linear-gradient(180deg, var(--pink), var(--pink-deep)); color: #fff; font-family: 'Titan One', 'Fredoka', sans-serif;
  -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; text-shadow: 0 .08rem 0 var(--ink);
}
.compte-fin-prec { font-size: 1rem; line-height: 1.1; color: var(--violet-deep); text-align: center; text-wrap: balance; }
.compte-fin-prec.off { display: none; }
/* Place de l'écran de fin quand le bloc est affiché. L'écran de fin d'une vraie partie est plein : js/stats.js décerne
   jusqu'à huit titres et ajoute au tableau une ligne par statistique de coup spécial, jusqu'à 20 lignes à deux joueurs,
   22 à trois et 23 à quatre. Le bloc, sous le menu, le rendait trop haut à toute taille en paysage. En 2 contre 2 classé
   et en 1280 × 720, avec le seul titre et les seize lignes de la partie factice, le titre sortait de 21 px par le haut
   (v15) ; avec une vraie partie pleine, le bloc le plus haut et la ligne des votes, et après un premier resserrement
   calé sur la partie factice, le titre sortait encore de 21 px par le haut et le contenu de 92 px par le bas
   (dev/test-ui.html, screen=matchEnd&online=1&reel=1&n=4&equipes=1&votes=1&comptes=pire et debord=1). Ces règles ne
   valent que tant que le bloc est affiché : l'écran de fin sans comptes ne bouge pas d'un pixel. Le bloc prend la place
   de l'aide des touches, que chaque entrée du menu porte déjà. Le panneau resserre ses écarts et sa marge du bas, les
   portraits des têtes passent de 4,6 à 3,4 rem, les lignes du tableau s'affinent (texte plus petit, hauteur de ligne
   serrée), les badges des titres aussi, et en paysage ils tiennent sur une ou deux rangées à droite de leur libellé. La
   citation, la ligne du match et celle des votes rapetissent, les lignes du bloc passent de 1,2 à 1,08 rem, et le titre,
   en paysage, de 4,4 à 3,5 rem. L'écart entre le titre et le panneau, et la marge du
   haut du panneau, ne bougent pas : la couronne du gagnant, qui touche déjà le bas du titre sans comptes, passerait
   sous son bord. En paysage, la mise en page est la même à toute taille (css/style.css, en tête) : ce qui tient en
   1280 × 720 tient en 1920 × 1080, 800 × 450 et 640 × 360. L'identifiant fait passer ces règles devant celle du 2 contre
   2 en ligne avec la ligne des votes, qui resserre le panneau un peu moins (css/style.css). */
#ui .st-panel:has(> .compte-fin:not(.off)) { gap: .4rem; padding-bottom: .7rem; }
#ui .st-panel:has(> .compte-fin:not(.off)) > .end-help { display: none; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-head { --ps: 3.4rem; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-head .portrait { width: 3.4rem; height: 3.4rem; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-table { row-gap: .1rem; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-row { padding-top: .02rem; padding-bottom: .06rem; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-lbl { font-size: 1.04rem; line-height: 1.05; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-val { font-size: 1.12rem; line-height: 1.05; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-row.w0 .st-val.v0, #ui .st-panel:has(> .compte-fin:not(.off)) .st-row.w1 .st-val.v1,
#ui .st-panel:has(> .compte-fin:not(.off)) .st-row.w2 .st-val.v2, #ui .st-panel:has(> .compte-fin:not(.off)) .st-row.w3 .st-val.v3 { font-size: 1.26rem; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-titles-lbl { font-size: 1.2rem; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-titles-grid { gap: .35rem .5rem; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-badge { gap: 0; padding: .1rem .7rem .18rem; border-width: .2rem; box-shadow: 0 .2rem 0 var(--ink); }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-badge-name { font-size: 1.1rem; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-badge-detail { font-size: .92rem; line-height: 1.1; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-quote { font-size: 1.3rem; line-height: 1.1; }
#ui .st-panel:has(> .compte-fin:not(.off)) .st-footer { font-size: 1.1rem; line-height: 1.1; }
#ui .st-panel:has(> .compte-fin:not(.off)) .end-votes { font-size: 1.1rem; line-height: 1.1; }
/* En paysage seulement. Le titre rapetisse : en portrait, css/style.css le passe déjà à 3 rem, sur deux lignes au
   besoin. Les titres de la partie : le libellé à gauche, les badges à sa droite, qui passent à la ligne entre eux s'ils
   sont nombreux. En portrait, la colonne reste : à côté du libellé, les badges n'y auraient plus que deux places par
   rangée. */
@media not all and (max-aspect-ratio: 1/1) and (max-width: 799px) {
  #ui .st-wrap:has(> .st-panel > .compte-fin:not(.off)) > .st-title { font-size: 3.5rem; }
  #ui .st-panel:has(> .compte-fin:not(.off)) .st-titles { flex-direction: row; justify-content: center; gap: 1rem; }
  #ui .st-panel:has(> .compte-fin:not(.off)) .st-titles-lbl { flex: none; }
  #ui .st-panel:has(> .compte-fin:not(.off)) .st-titles-grid { flex: 0 1 auto; min-width: 0; }
}

/* ---------- Écran de choix : « À débloquer » (§7.2.6, classes posées par P.CompteSalle.marquerVerrous) ---------- */
/* Une classe par siège, de J1 à J4 (verrou-3 pour J4, SPEC-LOT-C §7.6) : sans elle, le personnage verrouillé pour J4
   n'afficherait ni la mention ni le portrait grisé, et la partie passerait « non comptée » sans que rien ne le dise. */
.card.verrou-0::after, .card.verrou-1::after, .card.verrou-2::after, .card.verrou-3::after {
  content: 'À débloquer'; position: absolute; left: 50%; top: 5.4rem; z-index: 4; transform: translateX(-50%) rotate(-6deg);
  padding: .1rem 1.1rem .3rem; border-radius: 1rem; border: .3rem solid var(--ink); box-shadow: 0 .35rem 0 var(--ink);
  background: linear-gradient(180deg, #ef3a50, #cf1c34); color: #fff; white-space: nowrap;
  font-family: 'Titan One', 'Fredoka', sans-serif; font-size: 1.7rem; -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill;
}
.card.verrou-0 .card-portrait, .card.verrou-1 .card-portrait, .card.verrou-2 .card-portrait,
.card.verrou-3 .card-portrait { filter: grayscale(.75) brightness(.85); }

/* ---------- Petites fenêtres ---------- */
/* Fenêtre basse (640 × 360 et moins haut) : marges resserrées pour que les vues tiennent sans défiler. */
@media (max-height: 420px) and (orientation: landscape) {
  .compte-defile { gap: .7em; padding-top: .9em; padding-bottom: .9em; }
  .compte-titre { font-size: 3em; }
  .compte-panel { gap: .6em; padding-top: .8em; padding-bottom: .9em; }
  .compte-aide { padding-top: .35em; padding-bottom: .4em; }
}

/* Téléphone en portrait : le rem du jeu plafonne à 8 px (1 % de la largeur). Les écrans des comptes prennent une
   unité plus grande, une seule colonne, et la page défile ; l'aide des touches, sans clavier, s'efface. */
@media (max-width: 639px) and (orientation: portrait) {
  #ui .s-compte, #ui .compte-place { font-size: clamp(9px, 2.6vw, 12px); }
  .compte-defile { gap: 1em; padding: 1.4em 16px 2.4em; }
  .compte-vue.plein .compte-defile { max-height: none; }
  .compte-titre { font-size: 2.7em; }
  .compte-sous { font-size: 1.3em; }
  .compte-aide { display: none; }
  .compte-panel { padding: .9em .85em 1em; border-width: .22em; border-radius: 1.3em; }
  .compte-grille, .compte-grille-3, .compte-menu-2 { grid-template-columns: 1fr; }
  .compte-liste, .compte-historique, .compte-amis { max-height: none; overflow: visible; }
  .compte-profil-tete .compte-avatar.grand { font-size: 2em; }
  .compte-profil-nom { font-size: 2.8em; }
  .compte-rang-ligne { grid-template-columns: 2.6em minmax(0, 1fr) 3.4em 3.6em; }
  .compte-rang-ligne .c-vict { display: none; }
  .c-note { display: none; }
  .compte-bouton.compte-partie { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: .15em; }
  .compte-bouton.compte-partie .h-quoi { grid-column: 2 / 4; grid-row: 1; }
  .compte-bouton.compte-partie .h-res { grid-column: 1; grid-row: 1; }
  .compte-bouton.compte-partie .h-score { grid-column: 1; grid-row: 2; text-align: center; }
  .compte-bouton.compte-partie .h-cote { grid-column: 2; grid-row: 2; text-align: left; }
  .compte-bouton.compte-partie .h-date { grid-column: 3; grid-row: 2; }
  /* La colonne des libellés garde au moins la largeur de son plus long mot : à quatre sièges, les colonnes de valeurs
     la réduisaient à 3 em, et « Distance » débordait sur la valeur voisine. */
  .compte-stat { grid-template-columns: minmax(min-content, 1fr) repeat(var(--n, 2), minmax(3.8em, 5em)); }
  /* Sièges du détail : deux par rangée au plus (mêlée à trois : 2 puis 1 ; mêlée à quatre : 2 puis 2), et en 2 contre 2
     les deux équipes l'une sous l'autre, chacune avec ses deux sièges côte à côte. Quatre sièges sur une seule rangée
     de téléphone réduisaient chaque pseudo à sa première lettre. */
  .compte-detail-sieges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compte-detail-sieges.en-equipes { grid-template-columns: minmax(0, 1fr); }
}