/* ===== La Course aux points : quatre pupitres, crans de 1 à 9, valeur de la question, buzzers =====
   Fichier dédié, chargé après style.css. Préfixe cp-*. Réutilise .question, .ff-buzzers et .btn-buzz. */

/* Configuration : nombre de joueurs, pseudos et plateau de génies */
.cp-nombre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp-nombre label > span { display: flex; flex-direction: column; gap: 2px; }
.cp-nombre small { color: var(--texte-doux); font-size: 0.75rem; }
.cp-pseudos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cp-pseudos .champ { margin: 0 0 20px; font-size: 0.85rem; }
.cp-plateaux-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-plateaux-choix label > .cp-plateau-carte { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cp-plateau-carte small { color: var(--texte-doux); font-size: 0.78rem; }
.cp-plateau-genies { display: flex; justify-content: center; gap: 4px; }
.cp-plateau-genies .genie-choix { background: none; min-height: 0; padding: 0; }
.cp-plateau-genies .genie-portrait { font-size: 7px; margin: 0; }

/* Partie */
.cp-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-manche { margin: 0; color: var(--texte-doux); font-size: 0.9rem; text-align: center; }
.cp-pupitres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.cp-pupitre { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 12px 8px 10px; border: 2px solid var(--bord); border-radius: var(--rayon); background: linear-gradient(180deg, var(--fond-2), var(--fond)); transition: border-color 0.25s, box-shadow 0.25s, opacity 0.25s; }
.cp-pupitre::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -2px; height: 3px; border-radius: 2px; background: var(--bord); }
.cp-pupitre .genie-choix { background: none; min-height: 0; padding: 0; }
.cp-pupitre .genie-portrait { font-size: 7.5px; margin: 0; }
.cp-avatar { display: grid; place-items: center; width: 46px; height: 46px; margin: 2px 0; border-radius: 50%; background: linear-gradient(135deg, #ff7a7a, #c62828); color: #fff; font-size: 1.4rem; font-weight: 900; }
.cp-avatar.joueur-2 { background: linear-gradient(135deg, #8ab8ff, #2f6fe0); }
.cp-avatar.joueur-3 { background: linear-gradient(135deg, #7ee2a8, #1f9e5a); }
.cp-avatar.joueur-4 { background: linear-gradient(135deg, #d6b8ff, #7c4dff); }
.cp-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.cp-score { color: var(--or); font-family: "Cinzel", Georgia, serif; font-size: 1.9rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.cp-crans { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; width: 100%; }
.cp-cran { height: 7px; border-radius: 2px; background: #ffffff14; }
.cp-cran.allume { background: linear-gradient(90deg, var(--or), #ffe27a); box-shadow: 0 0 6px #f5c54266; }
.cp-statut { min-height: 1.2em; color: var(--texte-doux); font-size: 0.75rem; font-weight: 700; }
.cp-pupitre.actif { border-color: var(--or); box-shadow: 0 0 20px #f5c54255; }
.cp-pupitre.actif::after { background: var(--or); }
.cp-pupitre.actif .cp-statut { color: var(--or); }
.cp-pupitre.bloque { opacity: 0.55; }
.cp-pupitre.bloque .cp-statut { color: var(--rouge); }
.cp-pupitre.vainqueur { border-color: var(--or); box-shadow: 0 0 24px #f5c54266; }
.cp-pupitre.vainqueur::after { background: var(--or); }
.cp-pupitre.vainqueur .cp-statut { color: var(--or); }

/* Valeur de la question : 1 bleu, 2 orange, 3 or */
.cp-go { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 20px 0 8px; }
.cp-go-valeur, .cp-valeur { --teinte: var(--bleu); font-family: "Cinzel", Georgia, serif; font-weight: 900; color: var(--teinte); }
.cp-go-valeur { margin: 0; font-size: 1.6rem; letter-spacing: 0.04em; text-shadow: 0 0 18px color-mix(in srgb, var(--teinte) 45%, transparent); }
.cp-valeur { padding: 3px 10px; border: 1px solid var(--teinte); border-radius: 999px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
[data-valeur="2"].cp-go-valeur, [data-valeur="2"].cp-valeur { --teinte: var(--orange); }
[data-valeur="3"].cp-go-valeur, [data-valeur="3"].cp-valeur { --teinte: var(--or); }
.cp-texte { min-height: 2.8em; }
.cp-texte .curseur { display: inline-block; width: 0.5em; height: 1.1em; margin-left: 4px; vertical-align: -0.15em; background: var(--or); animation: clignote 0.7s steps(1) infinite; }
.cp-texte .coupe { color: var(--or); }
.cp-texte .reste { color: var(--texte-doux); }
.cp-reponse-bot { min-height: 1.2em; margin: 0 0 8px; color: var(--texte); font-style: italic; }

/* Buzzers : couleurs des joueurs 3 et 4 ; plus compacts à trois ou quatre joueurs */
.btn-buzz.joueur-3 { border-color: #1d6b40; background: radial-gradient(circle at 35% 30%, #9ff0bf, #27b765 60%, #187a43); box-shadow: 0 8px 0 #10502c, 0 12px 24px rgba(0, 0, 0, 0.4); }
.btn-buzz.joueur-4 { border-color: #4b2a9e; background: radial-gradient(circle at 35% 30%, #dcc7ff, #8a5cf0 60%, #5a33b8); box-shadow: 0 8px 0 #3a1f7a, 0 12px 24px rgba(0, 0, 0, 0.4); }
.btn-buzz.joueur-2 { border-color: #1d3f8f; background: radial-gradient(circle at 35% 30%, #8ab8ff, #2f6fe0 60%, #1b3fa5); box-shadow: 0 8px 0 #142f6b, 0 12px 24px rgba(0, 0, 0, 0.4); }
.cp-buzzers.nombreux { gap: 14px; }
.cp-buzzers.nombreux .btn-buzz { width: 112px; height: 112px; font-size: 1.35rem; border-width: 5px; }
.cp-buzzers.nombreux .btn-buzz small { max-width: 90px; }
.cp-question form input { width: 100%; }

@media (max-width: 560px) {
  /* En-tête de la course sur deux lignes : Pause et Abandonner, puis la consigne. */
  .cp-entete { flex-wrap: wrap; }
  .cp-manche { order: 3; flex-basis: 100%; }
}
@media (max-width: 700px) {
  .cp-pupitres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-nombre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-pseudos { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cp-plateaux-choix { grid-template-columns: 1fr; }
  .cp-buzzers.nombreux .btn-buzz { width: 92px; height: 92px; font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-texte .curseur, .cp-pupitre .genie-choix *, .cp-plateau-genies .genie-choix * { animation: none !important; }
  .cp-pupitre { transition: none; }
}