/* Zone de jeu ChiFouMi : consigne, cartes cachees de l ordinateur, tableau
   des manches, symboles du joueur, verdict, panneau des regles, bouton
   logo et confettis. Tout est DOM : retourner une carte est une
   transition CSS, pas de canvas. */
.cf-jeu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 96px 12px max(10px, env(safe-area-inset-bottom)); box-sizing: border-box; z-index: 1; background-color: var(--fond, #111111); background-size: cover; background-position: center; }
.cf-jeu[hidden] { display: none; }
.cf-consigne { margin: 0; color: #ffffff; font-weight: 900; font-size: clamp(15px, 4.2vw, 22px); text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); min-height: 1.3em; }
.cf-etat { margin: 0; color: var(--jeu-hud-texte); font-weight: 900; font-size: clamp(18px, 5vw, 28px); letter-spacing: .06em; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.cf-consigne[hidden], .cf-etat[hidden] { display: none; }
.cf-hote { position: relative; width: min(94vw, 440px); }
.cf-logo { max-height: 44px; max-width: 50vw; object-fit: contain; }
.cf-logo[hidden] { display: none; }
.cf-fete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

.cf-scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 4vh, 34px); width: 100%; }
.cf-rang { display: flex; justify-content: center; gap: 3%; width: 100%; }
.cf-carte { position: relative; width: 29%; max-width: 120px; aspect-ratio: 150 / 195; border: none; padding: 0; margin: 0; background: transparent; transition: transform .16s ease, opacity .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cf-carte img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); }
.cf-symbole:disabled { cursor: default; }
.cf-symbole:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; border-radius: 8px; }
.cf-scene.cf-choix .cf-symbole { cursor: pointer; animation: cf-appel 1.4s ease-in-out infinite; }
.cf-scene.cf-choix .cf-symbole:nth-child(2) { animation-delay: .2s; }
.cf-scene.cf-choix .cf-symbole:nth-child(3) { animation-delay: .4s; }
.cf-rang-joueur .cf-carte.cf-jouee { transform: translateY(-10%) scale(1.06); }
.cf-rang-joueur .cf-carte.cf-ecartee { opacity: .4; }
.cf-rang-ordi .cf-carte.cf-jouee { transform: translateY(10%) scale(1.06); }
/* Une carte qui se retourne se ferme en largeur, change d image, se rouvre. */
.cf-carte.cf-ferme { transform: scaleX(0); }
.cf-rang-ordi .cf-carte.cf-jouee.cf-ferme { transform: translateY(10%) scaleX(0); }

/* Tableau des manches : un picto par camp et une pastille par manche,
   remplie a la couleur du jeu quand le camp la remporte. */
.cf-score { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.cf-ligne { display: flex; align-items: center; gap: 8px; padding: 0 4%; }
.cf-ligne-ordi { padding-bottom: 8px; border-bottom: 2px solid rgba(255, 255, 255, .7); }
.cf-camp { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #ffffff; flex: none; }
.cf-picto { width: 20px; height: 20px; fill: none; stroke: #555555; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cf-pastille { width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background-color .25s ease, transform .25s ease; }
.cf-pastille.cf-pleine { background: var(--cf-couleur, #ff842b); box-shadow: 0 0 0 2px #ffffff; transform: scale(1.1); }

/* Panneau des regles, pose sur la scene comme sur la maquette. */
.cf-regles { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100%, 460px); box-sizing: border-box; padding: 22px 20px 20px; background: rgba(0, 0, 0, .92); color: #ffffff; text-align: center; z-index: 5; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.cf-regles[hidden] { display: none; }
.cf-regles-titre { margin: 0 0 14px; font-size: clamp(19px, 5vw, 26px); font-weight: 400; }
.cf-regles-texte { margin: 0 0 16px; font-size: clamp(15px, 4vw, 18px); line-height: 1.45; }
.cf-regles-ok { border: none; background: transparent; color: #ffffff; font: inherit; font-size: 16px; text-decoration: underline; cursor: pointer; padding: 6px 10px; }
.cf-regles-ok:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

@keyframes cf-appel { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }

@media (prefers-reduced-motion: reduce) {
  .cf-scene.cf-choix .cf-symbole { animation: none; }
}