/* ==========================================================================
   JEU-DIXMAIS.CSS — Styles du jeu "C'est un 10 mais…"
   --------------------------------------------------------------------------
   Comme pour la bouteille : rien ici ne doit servir a un autre jeu. Tout ce
   qui pourrait resservir vit dans ui.css.
   ========================================================================== */

#dixmais-corps {
  flex: 1;
  display: flex; flex-direction: column;
  gap: var(--e-3);
  min-height: 0;   /* autorise les enfants a retrecir dans un flex vertical */
}

/* --- LE TOUR : le joueur designe, puis sa carte ---------------------------
   Le bloc entier est centre verticalement dans la place laissee par le pied
   (margin:auto 0). L'ordre compte : le PSEUDO est au-dessus de la carte,
   parce que les 200 defauts commencent tous par "il/elle" — c'est le nom
   affiche juste au-dessus qui sert de sujet a la phrase.
   -------------------------------------------------------------------------- */
.dix-tour {
  margin: auto 0;
  min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}

.dix-joueur {
  text-align: center;
  font-size: clamp(30px, 9.5vw, 44px);
  font-weight: 900; letter-spacing: -.03em; line-height: 1;
  margin-bottom: 4px;
  /* Un pseudo long ne doit pas deborder de l'ecran. */
  max-width: 100%; overflow-wrap: anywhere;
}

/* --- LA CARTE DU DEFAUT ---------------------------------------------------
   Elle doit se lire d'un coup d'oeil, de l'autre bout de la table.
   -------------------------------------------------------------------------- */
.dix-carte {
  /* La min-height n'est pas cosmetique : sans elle, un defaut court ("il/elle
     ronfle") produit une carte de 3 lignes perdue au milieu d'un ecran vide,
     et la hauteur de la carte saute a chaque tour selon la longueur du texte.
     Une hauteur plancher donne une carte stable et pleine. */
  min-height: 34vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e-5) var(--e-4);
  border-radius: var(--r-l);
  background: var(--grad-carte), rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--halo-doux);
  text-align: center;
}

.dix-amorce {
  font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-faible);
  margin-bottom: 14px;
}
.dix-defaut {
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 800; line-height: 1.2; letter-spacing: -.025em;
}

/* --- L'ECHO DU TOUR PRECEDENT ---------------------------------------------
   Qui vient de boire et combien, affiche au-dessus des boutons du tour
   suivant. Il prend la place du texte d'instruction, qui n'a d'utilite qu'au
   tout premier tour.

   POURQUOI PAS LE TOAST flash() : il est fixe a 26px du bas de l'ecran et
   recouvrait 44 des 93px de hauteur des boutons de verdict, a chaque tour.
   Ici, l'info ne cache rien et reste lisible pendant tout le tour.

   NI FOND NI BORDURE, volontairement : avec un cadre, cette ligne se posait
   juste au-dessus des deux boutons avec le meme style et se lisait comme un
   TROISIEME bouton. Du texte nu ne peut pas etre confondu avec une action.
   -------------------------------------------------------------------------- */
.dix-echo {
  text-align: center;
  font-size: 13px; font-weight: 700; line-height: 1.4;
  /* Un pseudo long ne doit pas faire deborder la ligne. */
  overflow-wrap: anywhere;
}
/* Memes teintes que les boutons : on retrouve d'un coup d'oeil quel verdict a
   ete rendu au tour precedent. */
.dix-echo--assume { color: #7DEBC6; }
.dix-echo--defile { color: #FF9B92; }

/* --- LES DEUX BOUTONS DE VERDICT ------------------------------------------
   Volontairement enormes : on tranche vite, dans le noir, souvent bourre.
   -------------------------------------------------------------------------- */
.dix-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.dix-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: var(--e-4) 8px;
  border-radius: var(--r-l);
  border: 1px solid;
  transition: transform .16s var(--ease), box-shadow .25s;
}
.dix-btn:active { transform: scale(.955); }
.dix-btn__mot  { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
/* Le prix rappelle qui boit et combien, sans qu'on ait a le retenir. */
.dix-btn__prix {
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  opacity: .68;
}

/* --- VERT ET ROUGE : l'exception, assumee ---------------------------------
   REGLE GENERALE DE L'APPLI : pas de vert ni de rouge, tout vit dans le
   rose/violet. On y deroge ICI, et seulement ici, sur demande explicite.

   POURQUOI : ces deux boutons sont un verdict binaire tape a la volee par
   quelqu'un qui ne lit pas l'ecran. Le rose et le violet de la palette se
   ressemblent trop de loin pour ca — on se trompe de bouton. Le vert/rouge,
   lui, se reconnait sans lire, meme de travers et dans le noir.

   COMMENT ON RESTE DANS LA PALETTE : les deux teintes sont DESATUREES et
   tirees vers l'identite du jeu. Le vert penche vers le cyan pour dialoguer
   avec le violet ; le rouge penche vers le corail pour ne pas se confondre
   avec le rose #FF2E88, qui est un magenta. Ni #00FF00 ni #FF0000 systeme,
   qui trancheraient le fond noir en deux.

   ET AUCUN EMOJI sur ces boutons : le mot et la couleur suffisent, et un
   emoji vert ou rouge (✅ / ❌) ferait tout de suite "formulaire", pas jeu.
   -------------------------------------------------------------------------- */
.dix-btn--assume {
  background: rgba(46,217,160,.12); border-color: rgba(46,217,160,.42);
  color: #7DEBC6; box-shadow: 0 0 26px rgba(46,217,160,.14);
}
.dix-btn--defile {
  background: rgba(255,82,71,.12); border-color: rgba(255,82,71,.42);
  color: #FF9B92; box-shadow: 0 0 26px rgba(255,82,71,.14);
}

/* --- LE RECAPITULATIF DE FIN DE MANCHE ------------------------------------ */
.dix-recap {
  margin: auto 0;
  min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.dix-recap__titre { text-align: center; margin-bottom: 10px; }

/* A 12 joueurs la liste depasse la hauteur de l'ecran : elle scrolle toute
   seule au lieu de pousser les boutons du pied hors de vue. */
.dix-recap__liste {
  min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}

.dix-recap__note {
  text-align: center; margin-top: 4px;
  font-size: 12px; color: var(--texte-faible);
}