/* ======================================================================
   LE DÉ MENTEUR — le comptoir de la table (public/extra/menteur.js).
   Tout vit dans la rangée du comptoir (BBX.panneau) : rien ne flotte, rien
   au milieu de l'écran. Pendant une manche, la mise ne se règle plus : on
   range la saisie et les jetons pour laisser la place aux annonces.
   ====================================================================== */
body.menteurJeu[data-jeu="menteur"] .mises > .lbl,
body.menteurJeu[data-jeu="menteur"] .mises > .saisie,
body.menteurJeu[data-jeu="menteur"] .mises > .jetons{display:none}

#actX-menteur{row-gap:6px}
.mtBloc{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.mtQuantite{display:flex;align-items:center;background:var(--feutre);border:1px solid rgba(241,233,214,.16);border-radius:999px;overflow:hidden;flex:none}
.mtQuantite button{font:inherit;font-size:18px;line-height:1;width:32px;height:36px;color:var(--creme);background:transparent;border:0;cursor:pointer;opacity:.8}
.mtQuantite button:hover:not(:disabled){opacity:1;background:rgba(255,255,255,.07)}
.mtQuantite button:disabled{opacity:.25;cursor:default}
.mtQuantite b{min-width:30px;text-align:center;font-family:"Fraunces",serif;font-weight:900;font-size:20px;color:var(--laiton-clair);font-variant-numeric:tabular-nums}
.mtFois{font-family:"Fraunces",serif;font-weight:900;font-size:16px;opacity:.6;flex:none}
.mtFaces{flex-wrap:nowrap;gap:4px;max-width:none}
.mtFaces button{padding:3px;border-radius:9px;line-height:0;flex:none}
.mtFaces button svg{width:28px;height:28px;display:block}
.mtFaces button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--laiton-clair)}
.mtFaces button:disabled svg{filter:grayscale(1)}
.actionsX .mtInfo{flex-basis:100%;text-align:center;font-size:12px;line-height:1.35}
.actionsX .mtInfo b{font-size:15px}

@media (max-width:900px){
  /* téléphone : le réglage de l'annonce sur une rangée, les deux boutons dessous, l'aide en petit */
  #actX-menteur{gap:6px}
  .mtBloc{display:contents}
  .mtQuantite{order:1}
  .mtFois{order:2}
  .mtFaces{order:3}
  .mtMenteur{order:4;flex:1 1 40%}
  .mtBloc .agir{order:5;flex:1 1 40%}
  .actionsX .mtInfo{order:6;font-size:11px}
  .mtQuantite button{width:30px;height:34px}
  .mtFaces button svg{width:26px;height:26px}
}
@media (max-width:380px){
  .mtFaces{gap:3px}
  .mtFaces button{padding:2px}
  .mtFaces button svg{width:24px;height:24px}
  .mtQuantite button{width:27px}
  .mtQuantite b{min-width:24px;font-size:18px}
}