/* ==========================================================================
   UI.CSS — Composants reutilisables, communs a TOUS les jeux
   --------------------------------------------------------------------------
   Regle du projet : si un style peut servir a plus d'un jeu, il vit ICI.
   S'il ne sert qu'a un seul jeu, il vit dans css/jeu-<nom>.css.
   Quand tu ajoutes un jeu, tu reutilises ces classes : tu n'as presque plus
   de CSS a ecrire, et l'appli reste visuellement coherente.
   ========================================================================== */

/* ==========================================================================
   1. ECRANS — le systeme de navigation
   --------------------------------------------------------------------------
   L'appli est une "SPA" : une seule page HTML qui contient tous les ecrans
   empiles. Un seul porte la classe .actif a la fois ; les autres sont caches.
   C'est js/core/router.js qui deplace cette classe.
   ========================================================================== */
.ecran {
  position: fixed; inset: 0; z-index: 2;
  /* dvh = "dynamic viewport height" : la hauteur reellement visible, barre
     d'adresse du navigateur mobile deduite. Avec un simple 100vh, le bas de
     l'ecran passe sous la barre de Safari et le bouton principal devient
     inatteignable. */
  height: 100dvh;
  display: flex; flex-direction: column;
  padding: max(env(safe-area-inset-top), 22px) 22px max(env(safe-area-inset-bottom), 22px);
  /* env(safe-area-inset-*) = les encoches et la barre iPhone. Sans ca, le
     contenu passe sous la barre de gestes en bas. */
  opacity: 0; visibility: hidden;
  transform: scale(.97);
  transition: opacity .38s var(--ease), transform .38s var(--ease), visibility .38s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ecran.actif { opacity: 1; visibility: visible; transform: scale(1); }

/* ==========================================================================
   2. TYPOGRAPHIE
   ========================================================================== */

/* Le titre en degrade. L'astuce : on peint le texte avec le degrade en le
   "decoupant" (background-clip: text) et en rendant le texte transparent. */
.titre-grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

h1.titre { font-size: clamp(30px, 9vw, 46px); font-weight: 900; letter-spacing: -.03em; line-height: .95; }
h2.titre { font-size: clamp(22px, 6.5vw, 30px); font-weight: 800; letter-spacing: -.02em; }

/* Le "kicker" : petit label en majuscules tres espacees au-dessus d'un titre.
   Detail typographique qui fait beaucoup pour le cote premium. */
.kicker {
  font-size: 11px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--texte-faible);
}

.sous-titre { color: var(--texte-doux); font-size: 15px; line-height: 1.55; font-weight: 300; }

/* ==========================================================================
   3. BOUTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 17px 26px;
  border-radius: var(--r-m);
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
  transition: transform .18s var(--ease), box-shadow .28s var(--ease), opacity .2s;
}
/* Retour tactile : le bouton s'enfonce au doigt. Indispensable sur mobile,
   sinon l'utilisateur ne sait pas si son tap a ete pris en compte. */
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .3; pointer-events: none; }

/* Variante pleine : le bouton d'action principal de l'ecran. Il ne doit y en
   avoir QU'UN SEUL par ecran, sinon l'oeil ne sait plus ou aller. */
.btn--plein {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--halo-rose), 0 10px 30px rgba(0,0,0,.5);
}
.btn--plein:active { box-shadow: 0 0 18px rgba(255,46,136,.35); }

/* Variante fantome : actions secondaires. Juste un contour. */
.btn--ghost {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.13);
  color: var(--texte);
  backdrop-filter: blur(12px);
}

/* Variante danger/gorgee : quand l'action fait boire. */
.btn--boire {
  background: rgba(255,46,136,.10);
  border: 1px solid rgba(255,46,136,.42);
  color: var(--rose-clair);
}

/* Petit bouton rond (retour, fermer, supprimer).
   44px et pas 42 : c'est la cible tactile minimale, et surtout le
   min-height:44px applique a TOUS les boutons (base.css) ecraserait une
   hauteur inferieure et transformerait le cercle en ovale. */
.btn-rond {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  font-size: 17px; color: var(--texte-doux);
  transition: transform .18s var(--ease), background .2s;
}
.btn-rond:active { transform: scale(.9); background: rgba(255,255,255,.13); }

/* ==========================================================================
   4. CARTES (surfaces)
   --------------------------------------------------------------------------
   Le "verre depoli" (glassmorphism) : fond translucide + flou de ce qu'il y a
   derriere. C'est ce qui laisse voir les blobs colores a travers l'interface
   et cree la profondeur.
   ========================================================================== */
.carte {
  background: var(--grad-carte), rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-l);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--halo-doux);
  padding: var(--e-4);
}

/* Carte de jeu, sur l'ecran d'accueil. */
.carte-jeu {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 18px;
  border-radius: var(--r-l);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  text-align: left;
  transition: transform .2s var(--ease), border-color .25s, background .25s;
}
.carte-jeu:active { transform: scale(.975); }
/* Un jeu pas encore code : grise et non cliquable. Le registre des jeux
   (js/core/jeux.js) pilote cet etat via la propriete "dispo". */
.carte-jeu--bientot { opacity: .38; pointer-events: none; padding-right: 108px; }
/* Le badge "Bientot" est sorti du flux (position absolue) : sinon il ecrase
   la description sur 3 lignes et toutes les cartes ont une hauteur
   differente, ce qui donne une liste bancale. */
.carte-jeu--bientot .tag {
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  font-size: 9.5px; letter-spacing: .1em; padding: 5px 10px;
}

/* La pastille emoji du jeu, avec son halo. */
.carte-jeu__icone {
  width: 56px; height: 56px; flex: 0 0 56px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: var(--grad);
  font-size: 27px;
  box-shadow: var(--halo-violet);
}
.carte-jeu__titre { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.carte-jeu__desc  { font-size: 13px; color: var(--texte-doux); margin-top: 3px; font-weight: 300; }

/* ==========================================================================
   5. FORMULAIRES
   ========================================================================== */
.champ {
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--r-m);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 16px;  /* 16px MINIMUM : en dessous, iOS zoome tout seul au focus */
  color: var(--texte);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.champ::placeholder { color: var(--texte-faible); }
.champ:focus {
  outline: none;
  border-color: rgba(255,46,136,.55);
  background: rgba(255,255,255,.075);
  box-shadow: 0 0 0 4px rgba(255,46,136,.12);
}

/* ==========================================================================
   6. TAGS / PASTILLES
   ========================================================================== */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.tag--verite { background: rgba(155,63,255,.16); color: var(--violet-clair); border: 1px solid rgba(155,63,255,.38); }
.tag--action { background: rgba(255,46,136,.16); color: var(--rose-clair);   border: 1px solid rgba(255,46,136,.38); }

/* Les 3 niveaux de difficulte, qui determinent le nombre de gorgees. */
.tag--d1 { background: rgba(255,255,255,.07); color: var(--texte-doux); border: 1px solid rgba(255,255,255,.14); }
.tag--d2 { background: rgba(255,140,60,.14);  color: #FFB27A; border: 1px solid rgba(255,140,60,.36); }
.tag--d3 { background: rgba(255,46,88,.16);   color: #FF7A94; border: 1px solid rgba(255,46,88,.42); }

/* ==========================================================================
   7. ANIMATIONS D'ENTREE partagees
   --------------------------------------------------------------------------
   .anim-monte fait apparaitre un element en montant. Pour faire arriver une
   liste en cascade, on decale chaque element avec un animation-delay inline :
       <div class="anim-monte" style="animation-delay:.06s">
   ========================================================================== */
@keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.anim-monte { animation: monte .5s var(--ease-out) both; }

@keyframes pop { 0% { opacity:0; transform: scale(.86); } 60% { transform: scale(1.03); } 100% { opacity:1; transform: scale(1); } }
.anim-pop { animation: pop .45s var(--ease-out) both; }

/* Pulsation lente : sert a signaler un element en attente d'action. */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.anim-pulse { animation: pulse 2.2s ease-in-out infinite; }

/* ==========================================================================
   8. ECRANS COMMUNS — joueurs, modes, classement, intro
   --------------------------------------------------------------------------
   Ces ecrans servent a TOUS les jeux, leur style vit donc ici et pas dans un
   fichier de jeu.
   ========================================================================== */

/* --- En-tete d'ecran : bouton retour + titre ----------------------------- */
.entete { display: flex; align-items: center; gap: 14px; margin-bottom: var(--e-4); }
.entete__txt { flex: 1; min-width: 0; }   /* min-width:0 = autorise l'ellipse */

/* --- Zone centrale qui pousse le bouton principal en bas de l'ecran ------ */
.corps { flex: 1; display: flex; flex-direction: column; gap: var(--e-2); }
.pied  { padding-top: var(--e-3); display: flex; flex-direction: column; gap: 10px; }

/* --- ECRAN JOUEURS ------------------------------------------------------- */
.saisie { display: flex; gap: 10px; margin-bottom: var(--e-3); }
.saisie .champ { flex: 1; }
.saisie .btn-ajout {
  width: 54px; flex: 0 0 54px;
  border-radius: var(--r-m);
  background: var(--grad); color: #fff;
  font-size: 24px; font-weight: 300;
  box-shadow: var(--halo-rose);
  transition: transform .18s var(--ease);
}
.saisie .btn-ajout:active { transform: scale(.92); }

.ligne-joueur {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-m);
}
/* La pastille avec l'initiale : evite une liste de texte plat et monotone. */
.ligne-joueur__pastille {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad);
  font-weight: 800; font-size: 14px;
}
.ligne-joueur__nom {
  flex: 1; font-weight: 600; font-size: 15px;
  /* Un pseudo trop long est coupe proprement plutot que de casser la ligne. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- ECRAN MODES --------------------------------------------------------- */
.mode {
  display: flex; align-items: flex-start; gap: 15px;
  width: 100%; padding: 18px;
  text-align: left;
  border-radius: var(--r-l);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  transition: border-color .25s, background .25s, transform .18s var(--ease);
}
.mode:active { transform: scale(.98); }
/* L'etat coche : bordure rose + halo. Il faut que ce soit lisible d'un coup
   d'oeil dans une piece sombre, d'ou le halo plutot qu'un simple contour. */
.mode--actif {
  background: rgba(255,46,136,.09);
  border-color: rgba(255,46,136,.5);
  box-shadow: 0 0 26px rgba(255,46,136,.2);
}
.mode__emoji  { font-size: 28px; line-height: 1; margin-top: 2px; }
.mode__corps  { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mode__nom    { display: flex; align-items: baseline; gap: 9px; font-size: 17px; font-weight: 800; }
.mode__nb     { font-size: 11px; font-weight: 600; color: var(--texte-faible); letter-spacing: .04em; }
.mode__desc   { font-size: 13px; color: var(--texte-doux); font-weight: 300; line-height: 1.45; }
.mode__conseil{ font-size: 11.5px; color: var(--texte-faible); font-style: italic; }
.mode__coche {
  width: 26px; height: 26px; flex: 0 0 26px; margin-top: 3px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.2);
  font-size: 13px; font-weight: 900;
}
.mode--actif .mode__coche { background: var(--grad); border-color: transparent; }

/* --- ECRAN CLASSEMENT ---------------------------------------------------- */
.ligne-classement {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-m);
}
.ligne-classement__rang  { font-size: 18px; width: 26px; text-align: center; font-weight: 800; color: var(--texte-doux); }
.ligne-classement__score {
  font-size: 20px; font-weight: 900;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- LE TOAST (message flash) -------------------------------------------- */
#flash {
  position: fixed; z-index: 60;
  left: 50%; bottom: calc(env(safe-area-inset-bottom) + 26px);
  transform: translate(-50%, 22px);
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(18,11,31,.94);
  border: 1px solid rgba(255,46,136,.4);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  font-size: 14px; font-weight: 600;
  box-shadow: var(--halo-doux);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
#flash.visible { opacity: 1; transform: translate(-50%, 0); }

/* --- LOGO / ECRAN D'INTRO ------------------------------------------------ */
.intro { justify-content: center; align-items: center; text-align: center; gap: var(--e-3); }
.logo {
  font-size: clamp(44px, 15vw, 76px);
  font-weight: 900; letter-spacing: -.05em; line-height: .88;
}
.avertissement {
  margin-top: var(--e-3);
  padding: 14px 18px;
  border-radius: var(--r-m);
  background: rgba(255,46,136,.07);
  border: 1px solid rgba(255,46,136,.22);
  font-size: 12.5px; line-height: 1.55; color: var(--texte-doux);
  max-width: 340px;
}