/* ==========================================================================
   JEU-OUINON.CSS — Styles du jeu "Oui ou Non Cash"
   --------------------------------------------------------------------------
   Comme pour les autres jeux : rien ici ne doit servir ailleurs. Ce qui
   pourrait resservir (grille de distribution, recapitulatif) vit dans ui.css.
   ========================================================================== */

#ouinon-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 question ------------------------
   Centre verticalement dans la place laissee par le pied (margin:auto 0).
   -------------------------------------------------------------------------- */
.on-tour {
  margin: auto 0;
  min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}

.on-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 DE LA QUESTION ----------------------------------------------
   Meme hauteur plancher que "C'est un 10 mais…" : sans elle, une question
   courte ("Tu ronfles ?") laisse un trou de 250px entre la carte et les
   boutons. Verifie a l'ecran avec le pied complet (oui, non, je passe) et
   la question la plus longue de la banque : ca tient sur un iPhone.
   -------------------------------------------------------------------------- */
.on-carte {
  min-height: 34vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e-4) 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;
}
/* Version reduite : pendant le jugement et la distribution, la question
   n'est plus qu'un rappel. */
.on-carte--petite {
  min-height: 0; margin: 0;
  padding: var(--e-3) var(--e-4);
}

/* Sans align-self, le tag de difficulte s'etire sur toute la largeur. */
.on-carte > .tag { align-self: center; margin-bottom: 14px; }

.on-question {
  font-size: clamp(22px, 6.4vw, 30px);
  font-weight: 800; line-height: 1.22; letter-spacing: -.025em;
}
.on-question--petite { font-size: clamp(15px, 4.2vw, 19px); font-weight: 700; }

/* L'enjeu, ecrit sous la question : le joueur sait ce qu'il gagne ou perd
   AVANT de repondre. C'est ce qui le pousse a repondre aux cartes a 3. */
.on-enjeu {
  margin-top: 14px;
  font-size: 12px; font-weight: 600; line-height: 1.6;
  color: var(--texte-faible);
}

/* --- LES DEUX BOUTONS OUI / NON -------------------------------------------
   Enormes et sans emoji : un seul mot, c'est toute l'idee du jeu.
   Oui = violet, non = rose. On reste dans la palette : pas de vert ni de
   rouge, qui casseraient l'identite visuelle de l'appli.
   -------------------------------------------------------------------------- */
.on-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.on-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 78px;
  padding: var(--e-3) 10px;
  border-radius: var(--r-l);
  border: 1px solid;
  font-size: 26px; font-weight: 900; letter-spacing: -.02em;
  text-transform: uppercase;
  transition: transform .16s var(--ease), box-shadow .25s;
}
.on-btn:active { transform: scale(.955); }
.on-btn--oui {
  background: rgba(155,63,255,.13); border-color: rgba(155,63,255,.45);
  color: var(--violet-clair); box-shadow: 0 0 26px rgba(155,63,255,.16);
}
.on-btn--non {
  background: rgba(255,46,136,.13); border-color: rgba(255,46,136,.45);
  color: var(--rose-clair); box-shadow: 0 0 26px rgba(255,46,136,.16);
}

/* --- LE JUGEMENT ET LA DISTRIBUTION ---------------------------------------
   Le bloc est centre dans la place laissee sous le rappel de la carte.
   -------------------------------------------------------------------------- */
.on-zone-jugement {
  margin: auto 0;
  min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}

/* La reponse en enorme : c'est elle qu'on juge. */
.on-reponse {
  text-align: center;
  font-size: clamp(64px, 24vw, 110px);
  font-weight: 900; letter-spacing: -.05em; line-height: 1;
  margin: 4px 0 8px;
}
.on-reponse--oui { background-image: linear-gradient(135deg, var(--violet-clair), var(--violet)); }
.on-reponse--non { background-image: linear-gradient(135deg, var(--rose-clair), var(--rose)); }

.on-distrib {
  text-align: center;
  font-size: clamp(20px, 5.6vw, 26px);
  font-weight: 700; line-height: 1.28; letter-spacing: -.02em;
  margin-bottom: var(--e-2);
}