/* =====================================================================
   GRAND-PLACE — Feuille de style de la belote
   ---------------------------------------------------------------------
   Chargée UNIQUEMENT par les pages de la belote.

   PARTI PRIS : UN TAPIS, PAS UNE PAGE WEB
   Le plateau occupe tout l'écran et se comporte comme une table de jeu.
   Fond sombre profond, tapis vert-nuit éclairé par en dessous, cartes
   d'un blanc franc. Le contraste entre le tapis et les cartes est
   volontairement maximal : sur un téléphone tenu dehors, une carte doit
   se lire au dixième de seconde.

   Les cartes sont dessinées en CSS — aucune image à télécharger. Sur un
   réseau mobile facturé au mégaoctet, trente-deux images de cartes
   seraient une faute.
   ===================================================================== */

:root {
  --be-tapis:     #0B2E24;   /* vert nuit, le feutre */
  --be-tapis-2:   #08211A;
  --be-or:        #E8C14A;   /* le liseré, l'atout, les annonces */
  --be-carte:     #FCFBF7;   /* blanc cassé, comme du carton */
  --be-rouge:     #D62839;   /* cœur et carreau */
  --be-noir:      #1C1A22;   /* pique et trèfle */
  --be-vert:      #00F5A0;   /* la menthe de la charte, pour « à vous » */
  --be-alerte:    #FF2E63;
  --be-dos-1:     #6A0DAD;   /* le dos des cartes, aux couleurs du site */
  --be-dos-2:     #3B0668;
}

/* ---------------------------------------------------------------- */
/* La table                                                          */
/* ---------------------------------------------------------------- */
.be-table {
  position: relative;
  border-radius: 20px;
  padding: .7rem .6rem 1rem;
  background:
    radial-gradient(120% 78% at 50% 42%, rgba(0, 245, 160, .10), transparent 62%),
    radial-gradient(90% 60% at 50% 100%, rgba(106, 13, 173, .22), transparent 70%),
    linear-gradient(170deg, var(--be-tapis), var(--be-tapis-2));
  box-shadow:
    inset 0 0 0 1.5px rgba(232, 193, 74, .28),
    inset 0 0 60px rgba(0, 0, 0, .55),
    0 12px 34px rgba(0, 0, 0, .55);
  overflow: hidden;
}

/* Le liseré doré du tapis, comme sur une vraie table de club. */
.be-table::before {
  content: '';
  position: absolute; inset: 9px;
  border-radius: 14px;
  border: 1px solid rgba(232, 193, 74, .16);
  pointer-events: none;
}

/* ---------------------------------------------------------------- */
/* Bandeau du haut : l'adversaire                                    */
/* ---------------------------------------------------------------- */
.be-adv {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .55rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .07);
}
.be-avatar {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 1rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--be-dos-1), var(--be-dos-2));
  box-shadow: 0 2px 10px rgba(106, 13, 173, .5);
}
.be-adv .be-qui { flex: 1; min-width: 0; }
.be-adv .be-nom {
  display: block; font-size: .9rem; font-weight: 700; color: #EAF3EF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.be-adv .be-sub { display: block; font-size: .68rem; color: #7FA396; }

.be-compte {
  flex: 0 0 auto;
  padding: .22rem .55rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; color: #E4D2FA;
  background: rgba(106, 13, 173, .28);
  border: 1px solid rgba(185, 139, 242, .35);
}

/* ---------------------------------------------------------------- */
/* Le dos des cartes de l'adversaire                                 */
/* ---------------------------------------------------------------- */
/* On n'affiche QUE le nombre de cartes : le serveur n'envoie jamais
   leur identité. Il n'y a donc rien à trouver dans cette page. */
.be-dos-main {
  position: relative; z-index: 2;
  display: flex; justify-content: center; align-items: flex-start;
  margin: .7rem 0 .2rem; min-height: 66px;
}
.be-dos {
  width: 44px; height: 62px; flex: 0 0 44px;
  margin-left: -16px; border-radius: 8px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .14) 0 4px, rgba(255, 255, 255, 0) 4px 8px),
    linear-gradient(150deg, var(--be-dos-1), var(--be-dos-2));
  border: 1.5px solid rgba(255, 255, 255, .22);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
  transform-origin: 50% 100%;
}
.be-dos:first-child { margin-left: 0; }

/* ---------------------------------------------------------------- */
/* Le centre : pioche, pli, atout                                    */
/* ---------------------------------------------------------------- */
.be-centre {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .4rem;
  margin: .5rem 0; min-height: 92px;
}
.be-pli { display: flex; justify-content: center; align-items: center; gap: .4rem; }

/* L'emplacement vide : un contour pointillé, pour que le tapis ne
   paraisse pas cassé quand aucune carte n'est posée. */
.be-vide {
  width: 62px; height: 88px; border-radius: 10px;
  border: 1.5px dashed rgba(255, 255, 255, .16);
}

.be-pioche { position: relative; width: 54px; height: 76px; justify-self: start; }
.be-pioche.vide i { display: none; }
.be-pioche.vide {
  border: 1.5px dashed rgba(255, 255, 255, .16); border-radius: 10px;
}
.be-pioche.vide b { background: rgba(255,255,255,.14); color: #BEDACF; }
.be-pioche i {
  position: absolute; inset: 0; border-radius: 9px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .14) 0 4px, rgba(255, 255, 255, 0) 4px 8px),
    linear-gradient(150deg, var(--be-dos-1), var(--be-dos-2));
  border: 1.5px solid rgba(255, 255, 255, .22);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.be-pioche i:nth-child(2) { transform: translate(2px, -2px); }
.be-pioche i:nth-child(3) { transform: translate(4px, -4px); }
.be-pioche b {
  position: absolute; left: -6px; bottom: -8px;
  padding: .12rem .45rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800; color: #2A1F00;
  background: linear-gradient(140deg, #FFE9A8, var(--be-or));
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.be-atout { justify-self: end; text-align: center; }
.be-atout .be-lbl {
  display: block; font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: #9FBFB2; margin-bottom: .2rem;
}
.be-atout .be-sym {
  display: grid; place-items: center;
  width: 54px; height: 62px; margin-left: auto;
  border-radius: 10px; font-size: 1.5rem; font-weight: 700;
  background: var(--be-carte); color: var(--be-noir);
  box-shadow: 0 0 0 2px var(--be-or), 0 4px 14px rgba(0, 0, 0, .5);
}
.be-atout .be-sym.rouge { color: var(--be-rouge); }
.be-atout .be-sym.noir  { color: var(--be-noir); }

/* ---------------------------------------------------------------- */
/* Une carte                                                         */
/* ---------------------------------------------------------------- */
.be-carte {
  position: relative;
  width: 62px; height: 88px; flex: 0 0 62px;
  border-radius: 10px;
  background: var(--be-carte);
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
  display: block; user-select: none;
}
.be-carte.rouge { color: var(--be-rouge); }
.be-carte.noir  { color: var(--be-noir); }

/* Le coin haut-gauche : le rang, puis la couleur dessous. */
.be-carte .be-coin {
  position: absolute; top: 4px; left: 5px; line-height: 1; text-align: center;
}
.be-carte .be-coin .be-r { display: block; font-size: .82rem; font-weight: 800; letter-spacing: -.02em; }
.be-carte .be-coin .be-s { display: block; font-size: .66rem; margin-top: 1px; }

.be-carte .be-gros {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 1.9rem; line-height: 1;
}

/* Le coin bas-droit, retourné : c'est ce qui fait qu'une carte
   ressemble à une carte plutôt qu'à une vignette. */
.be-carte .be-coin-bas {
  position: absolute; bottom: 4px; right: 5px;
  line-height: 1; text-align: center; transform: rotate(180deg);
}
.be-carte .be-coin-bas .be-r { display: block; font-size: .82rem; font-weight: 800; }
.be-carte .be-coin-bas .be-s { display: block; font-size: .66rem; margin-top: 1px; }

.be-carte.atout { box-shadow: 0 0 0 2px var(--be-or), 0 3px 12px rgba(0, 0, 0, .5); }

/* Dans le pli, chaque carte penche vers son camp : celle de
   l'adversaire remonte, la vôtre descend. Sans ce décalage, deux cartes
   posées côte à côte ne disent pas qui a joué quoi. */
.be-pli .be-carte.sienne { transform: translateY(-9px) rotate(-3deg); }
.be-pli .be-carte.mienne { transform: translateY(9px)  rotate(3deg); }

/* ---------------------------------------------------------------- */
/* Votre main, en éventail                                           */
/* ---------------------------------------------------------------- */
.be-main {
  position: relative; z-index: 3;
  display: flex; justify-content: center; align-items: flex-end;
  margin: .6rem 0 .55rem; min-height: 96px;
  /* Les cartes des bords sont descendues par --lift : sans cette marge
     basse, elles passeraient sous le bandeau « à vous de jouer » et on
     ne verrait plus leur tranche. */
  padding-bottom: 14px;
}
.be-main .be-carte {
  margin-left: -20px;
  transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0px));
  transform-origin: 50% 100%;
  /* Assez lent pour qu'on VOIE l'éventail se refermer quand une carte
     part, assez ressort pour que ça ne fasse pas ascenseur. */
  transition: transform .28s cubic-bezier(.22, .9, .28, 1.06), filter .2s ease;
}
.be-main .be-carte:first-child { margin-left: 0; }

/* Une carte interdite est estompée — jamais masquée : le joueur doit
   continuer à lire son jeu pour préparer le coup suivant. */
.be-main .be-carte.morte { filter: brightness(.52) saturate(.5); }

.be-main .be-carte.jouable { cursor: pointer; }
.be-main .be-carte.jouable:hover,
.be-main .be-carte.jouable:focus-visible {
  transform: rotate(var(--tilt, 0deg)) translateY(calc(var(--lift, 0px) - 14px));
  box-shadow: 0 0 0 2px var(--be-vert), 0 8px 20px rgba(0, 0, 0, .6);
}
.be-main .be-carte.choisie {
  transform: rotate(0deg) translateY(-22px) scale(1.04);
  box-shadow: 0 0 0 2px var(--be-vert), 0 10px 24px rgba(0, 0, 0, .65);
}

/* ---------------------------------------------------------------- */
/* Les cartes qui voyagent                                           */
/* ---------------------------------------------------------------- */
/* Le serveur envoie des états, pas des mouvements. Sans cette couche,
   une carte piochée apparaîtrait dans la main sans être passée par le
   talon, et un pli disparaîtrait au lieu d'être ramassé : c'est ce qui
   donnait au jeu son allure de distributeur automatique. */
.be-vol {
  position: absolute; inset: 0; z-index: 8;
  pointer-events: none; overflow: visible;
}
.be-volant {
  position: absolute; top: 0; left: 0;
  will-change: transform, opacity;
}
.be-volant .be-carte,
.be-volant .be-dos { margin: 0; }
.be-dos-vol { display: block; }

/* Une carte qui arrive dans la main : elle se pose, elle n'apparaît pas.
   Le point de départ est décalé vers le haut — d'où vient le talon. */
@keyframes be-entre {
  from {
    opacity: 0;
    transform: rotate(var(--tilt, 0deg)) translateY(calc(var(--lift, 0px) - 34px)) scale(.86);
  }
  60%  { opacity: 1; }
  to {
    opacity: 1;
    transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0px)) scale(1);
  }
}
.be-main .be-carte.be-entre {
  animation: be-entre .34s cubic-bezier(.22, .9, .28, 1.06) both;
  /* Le retard est posé par le JavaScript : la carte reste invisible tant
     que son fantôme survole encore le tapis. Deux images de la même
     carte au même instant, c'est ce qui trahit la machine. */
  animation-delay: var(--entre-retard, 0ms);
}

/* Une carte qu'on pose sur le tapis : elle tombe et rebondit à peine. */
@keyframes be-pose-mienne {
  from { opacity: .4; transform: translateY(34px) rotate(9deg) scale(1.08); }
  to   { opacity: 1;  transform: translateY(9px)  rotate(3deg) scale(1); }
}
@keyframes be-pose-sienne {
  from { opacity: .4; transform: translateY(-34px) rotate(-9deg) scale(1.08); }
  to   { opacity: 1;  transform: translateY(-9px)  rotate(-3deg) scale(1); }
}
.be-pli .be-carte.mienne.be-pose { animation: be-pose-mienne .3s cubic-bezier(.22, .9, .28, 1.06) both; }
.be-pli .be-carte.sienne.be-pose { animation: be-pose-sienne .3s cubic-bezier(.22, .9, .28, 1.06) both; }

/* Le talon tressaille quand on y prend une carte. */
@keyframes be-tire {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(1.5px, -3px) rotate(-1.2deg); }
  100% { transform: translate(0, 0); }
}
.be-pioche.be-tire { animation: be-tire .3s ease-out; }

/* ---------------------------------------------------------------- */
/* À qui de jouer                                                    */
/* ---------------------------------------------------------------- */
.be-tour {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: 16px;
  background: rgba(0, 0, 0, .34);
  border: 1.5px solid rgba(255, 255, 255, .09);
}
.be-tour .be-txt { flex: 1; min-width: 0; font-size: .9rem; color: #EAF3EF; line-height: 1.2; }
.be-tour .be-txt small {
  display: block; font-size: .7rem; color: #9FBFB2; margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.be-tour .be-txt b { display: block; font-weight: 800; letter-spacing: .01em; }

/* C'est à vous : le bandeau s'allume en menthe et respire doucement.
   C'est le signal que le joueur cherche du regard en revenant sur
   l'écran après un détour par WhatsApp. */
.be-tour.mien {
  border-color: var(--be-vert);
  background: rgba(0, 245, 160, .10);
  animation: be-pouls 2.2s ease-in-out infinite;
}
.be-tour.mien .be-txt { color: #fff; text-shadow: 0 0 10px rgba(0, 245, 160, .6); }
@keyframes be-pouls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 245, 160, .35); }
  50%      { box-shadow: 0 0 22px 2px rgba(0, 245, 160, .45); }
}

/* Les dernières secondes : on passe au rouge, et plus vite. */
.be-tour.mien.urgent {
  border-color: var(--be-alerte);
  background: rgba(255, 46, 99, .12);
  animation: be-pouls-urgent .9s ease-in-out infinite;
}
@keyframes be-pouls-urgent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 46, 99, .45); }
  50%      { box-shadow: 0 0 24px 3px rgba(255, 46, 99, .6); }
}

/* Le chronomètre : un anneau qui se vide. La proportion restante est
   passée par le JavaScript dans --p (de 1 à 0). */
.be-chrono {
  position: relative; flex: 0 0 46px;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .95rem; font-weight: 800; color: #EAF3EF;
  --be-anneau: var(--be-vert);
  background: conic-gradient(var(--be-anneau) calc(var(--p, 1) * 360deg),
                             rgba(255, 255, 255, .10) 0);
}
.be-chrono::before {
  content: ''; position: absolute; inset: 4px;
  border-radius: 50%; background: #0A2620;
}
.be-chrono b { position: relative; }
.be-tour.urgent .be-chrono { --be-anneau: var(--be-alerte); }

/* Les dépassements : trois pastilles. La troisième fait perdre. */
.be-strikes { display: flex; gap: 3px; }
.be-strikes i {
  width: 8px; height: 8px; border-radius: 50%; display: block;
  background: rgba(255, 255, 255, .16);
}
.be-strikes i.on { background: var(--be-alerte); box-shadow: 0 0 6px var(--be-alerte); }

/* ---------------------------------------------------------------- */
/* Le score, au-dessus du tapis                                      */
/* ---------------------------------------------------------------- */
.be-score {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .5rem;
  padding: .6rem .7rem; margin-bottom: .5rem;
  border-radius: 16px;
  background: var(--surface, #16161C);
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
}
.be-score .be-camp { text-align: center; }
.be-score .be-camp span {
  display: block; font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint, #8A8F9C);
}
.be-score .be-camp b { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.be-score .be-camp.moi b { color: var(--be-vert); }
.be-score .be-camp.lui b { color: #DCC4F5; }

/* Les points ramassés dans la donne en cours. Discrets : le grand nombre
   reste le score du match, celui qui décide de la victoire. Mais ils
   bougent à chaque pli, et c'est ce qui prouve au joueur que le tableau
   est vivant. */
.be-score .be-encours {
  display: block; margin-top: .1rem;
  font-size: .6rem; line-height: 1.2; white-space: nowrap;
  color: var(--be-or); opacity: .85; min-height: .72rem;
}
.be-score .be-encours:empty { min-height: .72rem; }
.be-score .be-cible {
  text-align: center; font-size: .62rem; line-height: 1.25; color: var(--text-faint, #8A8F9C);
}
.be-score .be-cible b { display: block; font-size: .8rem; color: var(--be-or); }

/* ---------------------------------------------------------------- */
/* Les puces d'information                                           */
/* ---------------------------------------------------------------- */
.be-infos {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center;
  margin-top: .5rem;
}
.be-puce {
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .68rem; color: #9FBFB2;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
}
.be-puce.or { color: #F2DFA8; border-color: rgba(232, 193, 74, .4); background: rgba(232, 193, 74, .1); }
.be-puce.vert { color: #A9FFDB; border-color: rgba(0, 245, 160, .4); background: rgba(0, 245, 160, .1); }

/* L'annonce de belote : elle doit se voir, c'est 20 points. */
.be-annonce {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.9);
  z-index: 6; pointer-events: none;
  padding: .55rem 1.2rem; border-radius: 999px;
  font-size: 1.05rem; font-weight: 900; letter-spacing: .04em; color: #2A1F00;
  background: linear-gradient(140deg, #FFE9A8, var(--be-or));
  box-shadow: 0 0 26px rgba(232, 193, 74, .7), 0 8px 22px rgba(0, 0, 0, .5);
  opacity: 0;
  animation: be-annonce 2.2s ease-in-out;
}
@keyframes be-annonce {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  25%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

/* ---------------------------------------------------------------- */
/* Les enchères                                                      */
/* ---------------------------------------------------------------- */
.be-encheres {
  position: relative; z-index: 3;
  display: grid; gap: .45rem;
  padding: .7rem; margin: .5rem 0;
  border-radius: 16px;
  background: rgba(0, 0, 0, .34);
  border: 1.5px solid rgba(232, 193, 74, .3);
}
.be-encheres h3 {
  margin: 0; font-size: .88rem; text-align: center; color: #F2DFA8;
}
.be-encheres p { margin: 0; font-size: .74rem; text-align: center; color: #9FBFB2; }
.be-choix { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.be-btn {
  border: none; border-radius: 999px; cursor: pointer;
  padding: .6rem 1.1rem; font-size: clamp(.78rem, 3.4vw, .85rem); font-weight: 800;
  white-space: nowrap;
  color: #fff; background: linear-gradient(135deg, #7F2BD1, #6A0DAD);
  box-shadow: 0 4px 14px rgba(106, 13, 173, .5);
}
.be-btn.prendre { background: linear-gradient(135deg, #00C98A, #059B6C); box-shadow: 0 4px 14px rgba(0, 201, 138, .45); }
.be-btn.passer  { background: rgba(255, 255, 255, .1); box-shadow: none; border: 1px solid rgba(255,255,255,.2); }
.be-btn:active { transform: scale(.97); }

/* Le choix de couleur, au second tour. */
.be-couleurs { display: flex; gap: .4rem; justify-content: center; }
.be-couleur {
  width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; font-size: 1.4rem;
  background: var(--be-carte); border: 1.5px solid rgba(0, 0, 0, .2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}
.be-couleur.rouge { color: var(--be-rouge); }
.be-couleur.noir  { color: var(--be-noir); }
.be-couleur[disabled] { opacity: .3; cursor: not-allowed; }

/* ---------------------------------------------------------------- */
/* Le bandeau du haut : variante et cagnotte                         */
/* ---------------------------------------------------------------- */
.be-top {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: 0 0 .5rem; font-size: .74rem;
}
.be-code { color: var(--text-faint, #8A8F9C); letter-spacing: .02em; }
.be-pot {
  font-weight: 800; color: #F2DFA8;
  padding: .18rem .55rem; border-radius: 999px;
  background: rgba(232, 193, 74, .12); border: 1px solid rgba(232, 193, 74, .32);
}

/* ---------------------------------------------------------------- */
/* Salle d'attente                                                   */
/* ---------------------------------------------------------------- */
.be-seats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .7rem 0; }
.be-seat {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .6rem; border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .16);
  font-size: .78rem; min-width: 0;
}
.be-seat.pris { border-style: solid; border-color: rgba(0, 245, 160, .38); background: rgba(0, 245, 160, .08); }
.be-seat .be-avatar { width: 28px; height: 28px; flex: 0 0 28px; font-size: .76rem; }
.be-seat span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- */
/* Commandes sous le tapis                                           */
/* ---------------------------------------------------------------- */
.be-controls {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin: .7rem 0 .2rem;
}
.be-controls .be-sound.off { opacity: .45; }
.be-hint { text-align: center; font-size: .74rem; color: #9FBFB2; margin: .2rem 0 0; min-height: 1em; }
.be-fair {
  text-align: center; font-size: .68rem; color: var(--text-faint, #8A8F9C);
  margin: .8rem 0 0; word-break: break-all;
}

/* La bulle de message, au-dessus de la main concernée. */
.be-bulle {
  display: block; margin: .3rem auto; width: fit-content; max-width: 90%;
  padding: .3rem .7rem; border-radius: 999px;
  font-size: .78rem; color: #0B2E24; background: #FFE9A8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  animation: be-bulle .3s ease-out;
}
@keyframes be-bulle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

/* ---------------------------------------------------------------- */
/* Listes de tables (salon, historique, vérification)                */
/* ---------------------------------------------------------------- */
/* Ces règles ressemblent à celles du Ludo, et c'est volontaire : les
   recopier ici plutôt que de charger ludo.css sur les pages de la belote
   évite de faire télécharger au joueur une feuille de style de 500
   lignes dont il n'utilise rien — et évite surtout qu'une retouche du
   Ludo casse un jour l'affichage de la belote. */
.be-liste { display: grid; gap: .5rem; }
.be-ligne {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .7rem; border-radius: var(--radius-sm, 12px);
  background: var(--surface, #16161C); border: 1px solid var(--line, rgba(255,255,255,.1));
}
.be-ligne .fill { display: flex; gap: 3px; flex: 0 0 auto; }
.be-ligne .fill i {
  width: 9px; height: 9px; border-radius: 50%; display: block;
  background: var(--surface-2, #1E1E26); border: 1px solid var(--line, rgba(255,255,255,.1));
}
.be-ligne .fill i.on {
  background: var(--be-vert); border-color: var(--be-vert);
  box-shadow: 0 0 7px var(--be-vert);
}
.be-ligne .meta { flex: 1; min-width: 0; }
.be-ligne .meta b { display: block; font-size: .85rem; }
.be-ligne .meta span {
  display: block; font-size: .72rem; color: var(--text-faint, #8A8F9C);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- */
/* Messagerie de table                                               */
/* ---------------------------------------------------------------- */
.be-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface, #16161C); border-top: 1px solid var(--line, rgba(255,255,255,.1));
  border-radius: 18px 18px 0 0;
  padding: .8rem .8rem calc(.9rem + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .55);
  transform: translateY(102%); transition: transform .26s ease;
}
.be-sheet.open { transform: translateY(0); }
.be-sheet h3 { margin: 0 0 .5rem; font-size: .92rem; }
.be-sheet .close {
  position: absolute; right: .6rem; top: .4rem;
  background: none; border: none; color: var(--text-faint, #8A8F9C); font-size: 1.5rem; line-height: 1;
}
.be-msgs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.be-msg {
  display: flex; align-items: center; gap: .35rem;
  padding: .5rem .55rem; border-radius: var(--radius-sm, 12px);
  background: var(--surface-2, #1E1E26); border: 1px solid var(--line, rgba(255,255,255,.1));
  color: var(--text, #EDEDF2); font-size: .78rem; text-align: left;
}
.be-msg:active { background: var(--be-dos-1); }
.be-emojis { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.be-emoji {
  width: 44px; height: 44px; font-size: 1.35rem;
  background: var(--surface-2, #1E1E26); border: 1px solid var(--line, rgba(255,255,255,.1));
  border-radius: 12px; color: var(--text, #EDEDF2);
}
.be-emoji:active { background: var(--be-dos-1); }
.be-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 55;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.be-backdrop.open { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- */
/* Classement de fin de match                                        */
/* ---------------------------------------------------------------- */
.be-rank { list-style: none; margin: .6rem 0 0; padding: 0; text-align: left; }
.be-rank li {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .3rem; font-size: .84rem;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.1));
}
.be-rank li:last-child { border-bottom: none; }
.be-rank li b { color: var(--be-vert); white-space: nowrap; }

/* ---------------------------------------------------------------- */
/* Compte rendu de fin de donne                                      */
/* ---------------------------------------------------------------- */
.be-compte-rendu { list-style: none; margin: .8rem 0 0; padding: 0; }
.be-compte-rendu li {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .38rem 0; font-size: .82rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.be-compte-rendu li.tot { border-bottom: none; font-weight: 800; color: #F2DFA8; }

/* ---------------------------------------------------------------- */
/* Le barème, dans les règles                                        */
/* ---------------------------------------------------------------- */
.be-bareme { overflow-x: auto; margin: .5rem 0; }
.be-bareme table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.be-bareme th, .be-bareme td { padding: .35rem .5rem; text-align: left; }
.be-bareme thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint, #8A8F9C); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.be-bareme tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .035); }
.be-bareme td b { color: #F2DFA8; }

.rules-list { margin: .4rem 0 .6rem; padding-left: 1.1rem; }
.rules-list li { margin: .22rem 0; }

/* ---------------------------------------------------------------- */
/* Page de vérification                                              */
/* ---------------------------------------------------------------- */
.be-verif { display: grid; gap: .5rem; }
.be-vrow {
  padding: .55rem .65rem; border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
}
.be-vhead {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .78rem; font-weight: 700;
}
.be-vhead .n { color: var(--text-faint, #8A8F9C); }
.be-vhead .ok { color: var(--green, #00C98A); }
.be-vhead .ko { color: var(--red, #FF2E63); }
.be-vmains { display: grid; gap: .18rem; margin-top: .35rem; }
.be-vmains span {
  font-size: .78rem; letter-spacing: .04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}
.be-vmains b {
  display: inline-block; min-width: 5.2em;
  font-family: inherit; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-faint, #8A8F9C);
}

/* ---------------------------------------------------------------- */
/* Confort                                                           */
/* ---------------------------------------------------------------- */
@media (max-width: 360px) {
  .be-carte { width: 54px; height: 77px; flex-basis: 54px; }
  .be-main .be-carte { margin-left: -24px; }
  .be-carte .be-gros { font-size: 1.6rem; }
  .be-vide { width: 54px; height: 77px; }
}

@media (prefers-reduced-motion: reduce) {
  .be-tour, .be-tour.mien, .be-tour.mien.urgent, .be-annonce { animation: none; }
  .be-main .be-carte { transition: none; }
  .be-annonce { opacity: 1; }
  /* Le joueur qui a demandé moins de mouvement n'a pas à subir les
     cartes qui volent : le JavaScript ne les lance déjà pas, on coupe
     aussi les animations de pose et d'arrivée. */
  .be-main .be-carte.be-entre,
  .be-pli .be-carte.be-pose,
  .be-pioche.be-tire { animation: none; }
  .be-vol { display: none; }
}