/* Composants du jeu. S'ajoute à tokens.css et app.css (en-tête, onglets, puces, lignes,
   champ sont ceux de l'arbre) : le jeu et l'arbre sont la même famille visuelle.
   Seules valeurs brutes tolérées : white et black DANS un color-mix(), pour éclaircir ou
   foncer une couleur de branche — ce sont des opérations, pas des couleurs du système. */

/* ——— La carte de collection ———
   Une VRAIE carte (Eugène : « pas un look html/div ») : un cadre doré biseauté, un fond de
   la couleur de la lignée avec son grain, une fenêtre de portrait guillochée, un cartouche
   pour le nom, un texte sur papier, et un reflet holographique qui suit le doigt.
   Tout en cqw (largeur de la carte) : la même carte sert en grand et en vignette. */
.tcg {
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 63 / 88;
  border-radius: 4.8cqw; padding: 2.6%;
  /* Le cadre : une dorure qui prend la lumière en biais. */
  background:
    linear-gradient(135deg, var(--or-clair) 0%, var(--or) 22%, var(--or-sombre) 48%, var(--or) 70%, var(--or-clair) 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 -1px 0 rgb(0 0 0 / .25) inset, 0 10px 24px -8px rgb(4 24 16 / .45), 0 2px 5px rgb(4 24 16 / .25);
  /* La carte ne suit pas le thème : ses textes restent sombres sur son papier clair. */
  color: var(--texte-carte); text-align: left;
  user-select: none; -webkit-user-select: none;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 350ms var(--courbe);
  will-change: transform;
}
.tcg-cadre {
  position: relative; height: 100%; display: flex; flex-direction: column;
  padding: 3.2cqw; border-radius: 3.2cqw; overflow: hidden;
  background:
    var(--grain),
    radial-gradient(130% 80% at 50% 0%, color-mix(in srgb, var(--branche) 55%, white) 0%, transparent 60%),
    linear-gradient(170deg, color-mix(in srgb, var(--branche) 88%, white) 0%, var(--branche) 45%, color-mix(in srgb, var(--branche) 60%, black) 100%);
  box-shadow: inset 0 0 0 0.5cqw rgb(0 0 0 / .18), inset 0 0.8cqw 1.6cqw rgb(255 255 255 / .25);
}
.tcg-tete {
  display: flex; justify-content: space-between; align-items: center; gap: 2cqw;
  font: 600 3.6cqw/1 var(--f-texte); letter-spacing: 0.08em; text-transform: uppercase;
  color: rgb(255 255 255 / .92); text-shadow: 0 1px 1px rgb(0 0 0 / .35);
}
.tcg-num { color: var(--or-clair); }
.tcg-tete .branche { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcg-illu {
  position: relative; flex: 1 1 auto; margin-top: 2.4cqw; min-height: 0;
  display: grid; place-items: center; border-radius: 1.6cqw; overflow: hidden;
  /* Portrait en attendant les photos : un fond guilloché, comme un billet ou un diplôme. */
  background:
    repeating-radial-gradient(circle at 50% 120%, transparent 0 2.2cqw, color-mix(in srgb, var(--branche) 16%, transparent) 2.2cqw 2.6cqw),
    radial-gradient(circle at 30% 25%, white 0%, color-mix(in srgb, var(--branche) 12%, white) 70%);
  border: 0.9cqw solid var(--or);
  box-shadow: inset 0 0 0 0.4cqw rgb(255 255 255 / .6), inset 0 1.5cqw 3cqw rgb(0 0 0 / .18), 0 0.6cqw 1.2cqw rgb(0 0 0 / .25);
}
.tcg-initiales {
  font: 600 30cqw/1 var(--f-titre); letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--branche) 85%, black);
  /* gravées dans le papier : ombre claire dessous, sombre dessus */
  text-shadow: 0 0.5cqw 0 rgb(255 255 255 / .9), 0 -0.3cqw 0 rgb(0 0 0 / .15);
}
.tcg-gen {
  position: absolute; top: 2cqw; left: 2cqw; padding: 0.9cqw 2.4cqw; border-radius: 99px;
  background: var(--branche); color: white; font: 600 3.8cqw/1.1 var(--f-texte);
  box-shadow: 0 0 0 0.5cqw var(--or), 0 0.5cqw 1cqw rgb(0 0 0 / .3);
}
/* Le cartouche du nom : une plaque claire posée à cheval sur le portrait. */
.tcg-cartouche {
  position: relative; margin: -5cqw 3cqw 0; padding: 1.8cqw 3cqw 2cqw; text-align: center;
  border-radius: 1.6cqw; background: linear-gradient(180deg, white, var(--plaque));
  box-shadow: 0 0 0 0.6cqw var(--or), 0 0.8cqw 1.6cqw rgb(0 0 0 / .3);
}
.tcg-nom { font: 600 8.4cqw/1.05 var(--f-titre); letter-spacing: -0.01em; color: var(--texte-carte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcg-patro { margin-top: 0.4cqw; font: 600 4.2cqw/1.1 var(--f-texte); letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--branche) 75%, black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcg-texte {
  margin-top: 2.6cqw; padding: 2cqw 3cqw; border-radius: 1.6cqw; text-align: center;
  background: rgb(255 255 255 / .9); box-shadow: inset 0 0 0 0.3cqw rgb(0 0 0 / .08);
}
.tcg-prenoms { font: italic 400 3.8cqw/1.3 var(--f-titre); color: var(--texte-carte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcg-lien { font: 400 4cqw/1.3 var(--f-texte); color: var(--texte-carte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcg-pied {
  display: flex; justify-content: space-between; align-items: center; gap: 2cqw;
  margin-top: auto; padding-top: 2cqw;
  font: 600 3.4cqw/1.2 var(--f-texte); color: rgb(255 255 255 / .9); text-shadow: 0 1px 1px rgb(0 0 0 / .35); white-space: nowrap;
}
/* Le reflet holographique : une bande irisée qui suit le doigt (--mx, --my). */
.tcg-reflet {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgb(255 255 255 / .55) 0%, transparent 38%),
    linear-gradient(115deg, transparent 35%, rgb(255 240 200 / .25) 45%, rgb(180 255 230 / .18) 52%, transparent 62%);
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, var(--mx, 30%) var(--my, 20%);
  mix-blend-mode: soft-light; opacity: .8;
}
.grille .tcg-reflet { opacity: .5; }

/* ——— Le dos et le retournement ——— */
.tcg-dos {
  position: absolute; inset: 0; border-radius: 4.8cqw; padding: 2.6%;
  background: linear-gradient(135deg, var(--or-clair), var(--or) 30%, var(--or-sombre) 55%, var(--or) 80%);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 10px 24px -8px rgb(4 24 16 / .5);
}
.dos-motif {
  height: 100%; border-radius: 3.2cqw; display: grid; place-items: center; align-content: center; gap: 2cqw;
  background:
    var(--grain),
    repeating-conic-gradient(from 45deg at 50% 50%, rgb(255 255 255 / .05) 0 15deg, transparent 15deg 30deg),
    radial-gradient(circle at 50% 45%, var(--booster-haut), var(--booster-bas) 75%);
  box-shadow: inset 0 0 0 1.2cqw var(--booster-bas), inset 0 0 0 1.6cqw var(--or);
}
.dos-r {
  width: 34cqw; height: 34cqw; display: grid; place-items: center; border-radius: 50%;
  font: 600 20cqw/1 var(--f-titre); color: var(--or-clair);
  border: 1cqw solid var(--or); box-shadow: 0 0 0 1.5cqw var(--booster-bas), 0 0 0 2cqw var(--or-sombre);
}
.dos-nom { font: 600 4cqw var(--f-texte); letter-spacing: 0.3em; text-transform: uppercase; color: var(--or); }
.retourne { position: relative; container-type: inline-size; transform-style: preserve-3d; transition: transform 700ms cubic-bezier(.3,1.4,.5,1); }
.retourne .face { transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.retourne .tcg-dos { transform: rotateY(0deg); }
/* Au départ on voit le DOS (conteneur à 0°, la face tournée à 180° est cachée) ; au toucher,
   le conteneur fait un demi-tour et la face arrive devant. (Premier jet inversé : la carte
   finissait de dos — vu par Eugène sur roquette-dev.) */
.retourne { transform: rotateY(0deg); }
.montree .retourne { transform: rotateY(180deg); }

/* Carte pas encore possédée (album). */
.tcg-manquante {
  aspect-ratio: 63 / 88; border-radius: 12px; border: 1.5px dashed var(--trait);
  display: grid; place-items: center; text-align: center; padding: 8px;
  color: var(--encre-3); font-size: var(--t-xs); background: color-mix(in srgb, var(--papier-2) 50%, transparent);
}
.tcg-manquante b { display: block; font: 600 var(--t-m) var(--f-titre); color: var(--encre-3); }

/* ——— Grilles de cartes (album, booster, choix d'échange) ——— */
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3) var(--e-2); }
.grille .case { position: relative; }
.grille .case[aria-pressed="true"] .tcg { box-shadow: 0 0 0 3px var(--accent), var(--ombre-2); }
.badge {
  /* Au milieu du bord bas : en haut il cacherait le numéro ou la branche. */
  position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); z-index: 2;
  min-width: 24px; height: 22px; padding: 0 7px; border-radius: 99px;
  display: grid; place-items: center; white-space: nowrap;
  background: var(--encre); color: var(--papier); font: 600 11px var(--f-texte);
}
.badge.neuve { background: var(--accent); color: var(--sur-branche); }

.intro { margin-bottom: var(--e-3); font-size: var(--t-s); color: var(--encre-2); }
.bloc-jeu {
  padding: var(--e-4); border-radius: var(--r-l); background: var(--carte);
  border: 1px solid var(--trait); box-shadow: var(--ombre-1);
}
.bloc-jeu + .bloc-jeu { margin-top: var(--e-3); }
.bloc-jeu h2 { font: 600 var(--t-l)/1.2 var(--f-titre); }
.bloc-jeu p { color: var(--encre-2); font-size: var(--t-s); margin-top: var(--e-1); }
.progression { height: 8px; border-radius: 99px; background: var(--papier-2); overflow: hidden; margin-top: var(--e-3); }
.progression i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--cible); padding: 0 var(--e-5); border-radius: var(--r-rond);
  background: var(--encre); color: var(--papier); font-weight: 600;
  transition: transform var(--duree) var(--courbe), opacity var(--duree);
}
.bouton:active { transform: scale(0.97); }
.bouton[disabled] { opacity: 0.35; pointer-events: none; }
.bouton.dore { background: var(--accent); color: var(--sur-branche); }
.bouton.discret { background: var(--papier-2); color: var(--encre); }
.bouton.large { width: 100%; }
.rangee { display: flex; gap: var(--e-2); margin-top: var(--e-3); flex-wrap: wrap; }
.erreur { margin-top: var(--e-2); color: var(--alerte); font-size: var(--t-s); }

/* ——— Booster ——— */
.booster {
  width: 200px; aspect-ratio: 5 / 8; margin: var(--e-5) auto; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2);
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, white 8%, transparent) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, var(--booster-haut), var(--booster-bas) 70%);
  color: var(--booster-texte); box-shadow: 0 0 0 3px var(--accent), var(--ombre-2);
  font: 600 var(--t-xl)/1.1 var(--f-titre); text-align: center;
}
.booster small { font: 400 var(--t-xs) var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.booster:active { transform: scale(0.98); }
.booster[disabled] { opacity: 0.45; }
.booster { transition: transform 200ms var(--courbe); animation: flotte 3.2s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-6px) rotate(-1deg); } }
.booster.dechire { animation: dechire 900ms cubic-bezier(.5,0,.5,1) forwards; }
@keyframes dechire {
  0%, 60% { transform: none; }
  10%, 30%, 50% { transform: rotate(-4deg) scale(1.03); }
  20%, 40% { transform: rotate(4deg) scale(1.03); }
  100% { transform: scale(1.35) translateY(-30px); opacity: 0; filter: brightness(2); }
}
.grille .case { animation: arrive 420ms var(--courbe) both; }
.grille .case:nth-child(2) { animation-delay: 40ms; } .grille .case:nth-child(3) { animation-delay: 80ms; }
.grille .case:nth-child(4) { animation-delay: 120ms; } .grille .case:nth-child(5) { animation-delay: 160ms; }
.grille .case:nth-child(n+6) { animation-delay: 200ms; }
@keyframes arrive { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.grille .case:active .tcg { transform: scale(.97); }
.revele { width: min(78vw, 300px); margin: var(--e-4) auto 0; perspective: 1200px; animation: surgit 450ms var(--courbe); }
@keyframes surgit { from { transform: translateY(40px) scale(.85); opacity: 0; } }
.incline { perspective: 1000px; }

/* ——— Connexion ——— */
.formulaire { display: flex; flex-direction: column; gap: var(--e-3); }
.formulaire label { font-size: var(--t-s); color: var(--encre-2); }
/* Le champ de l'arbre porte une loupe ; ici on la retire pour les champs de texte. */
.champ.simple { background-image: none; padding-left: var(--e-4); }
.bascule { text-align: center; font-size: var(--t-s); color: var(--encre-2); }
.bascule button { text-decoration: underline; color: var(--encre); font-weight: 600; }

/* ——— Échanges ——— */
.echange {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-2);
  padding: var(--e-3); border-radius: var(--r-l); background: var(--carte);
  border: 1px solid var(--trait); box-shadow: var(--ombre-1);
}
.echange + .echange { margin-top: var(--e-3); }
.echange-tete { grid-column: 1 / -1; font-size: var(--t-s); color: var(--encre-2); }
.echange-tete b { color: var(--encre); font-family: var(--f-titre); }
.echange .fleche { font: 600 var(--t-xl) var(--f-titre); color: var(--accent); }
.echange .cadeau { aspect-ratio: 63 / 88; display: grid; place-items: center; text-align: center; border-radius: 12px; border: 1.5px dashed var(--trait); color: var(--encre-3); font-size: var(--t-xs); padding: 6px; }
.echange .rangee { grid-column: 1 / -1; margin-top: var(--e-1); }
.echange .rangee .bouton { flex: 1; }
.etape { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }
.etape .bouton-icone { margin-left: calc(-1 * var(--e-3)); }
.etape h2 { font: 600 var(--t-l)/1.2 var(--f-titre); }

/* Feuille d'action, qui monte du bas : la carte en grand, et ce qu'on peut en faire. */
.voile { position: fixed; inset: 0; z-index: 20; background: var(--voile); display: flex; align-items: flex-end; animation: fondu var(--duree); }
.feuille {
  width: 100%; max-height: 92dvh; overflow-y: auto;
  padding: var(--e-4) var(--e-4) calc(env(safe-area-inset-bottom) + var(--e-4));
  border-radius: var(--r-l) var(--r-l) 0 0; background: var(--papier);
  animation: monte 240ms var(--courbe);
}
.feuille > .tcg { width: min(64vw, 250px); margin: 0 auto var(--e-4); }
.feuille .actions { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-3); }
.feuille .actions .bouton { justify-content: space-between; }
.feuille h2 { text-align: center; font: 600 var(--t-xl) var(--f-titre); margin-bottom: var(--e-2); }
.feuille .explication { text-align: center; color: var(--encre-2); font-size: var(--t-s); margin-bottom: var(--e-2); }
@keyframes monte { from { transform: translateY(40px); opacity: 0; } }
@keyframes fondu { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .revele, .feuille, .voile, .booster, .grille .case { animation: none !important; }
  .retourne, .tcg { transition: none !important; }
}

/* Nombre de propositions reçues, posé sur l'onglet Échanges. */
.onglets a { position: relative; }
.pastille.alerte { position: absolute; top: 6px; left: calc(50% + 6px); background: var(--alerte); color: var(--sur-branche); }
/* Avant la connexion, pas d'onglets : la barre est en display: grid, qui l'emporterait sur
   l'attribut hidden sans cette règle. */
.onglets[hidden] { display: none; }

/* Favori : une étoile dorée qui déborde du coin haut droit de la carte, hors du texte. */
.etoile {
  position: absolute; top: -7px; right: -5px; z-index: 2; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--sur-branche); font-size: 13px; box-shadow: var(--ombre-1);
}
/* Favori pas encore possédé : la carte qu'on cherche, estompée. */
.case.manquante .tcg { opacity: 0.45; filter: saturate(0.4); }

/* Notifications */
.ligne.non-lue { border-left: 4px solid var(--accent); }
.cloche-compte { top: 4px; left: auto; right: 2px; }
#cloche[hidden] { display: none; }

/* Sortie des scripts de déploiement (roquette-dev, admins). */
.sortie {
  margin-top: var(--e-3); padding: var(--e-3); max-height: 50dvh; overflow: auto;
  border-radius: var(--r-m); background: var(--papier-2); color: var(--encre-2);
  font: 12px/1.45 ui-monospace, Menlo, monospace; white-space: pre-wrap;
}

/* ——— Album : vues, recherche, tri ——— */
.segments {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
  border-radius: var(--r-rond); background: var(--papier-2);
}
.segments button {
  min-height: 40px; border-radius: var(--r-rond); font-size: var(--t-s); font-weight: 600; color: var(--encre-2);
  transition: background var(--duree) var(--courbe), color var(--duree);
}
.segments button[aria-selected="true"] { background: var(--accent); color: var(--sur-branche); box-shadow: var(--ombre-1); }
.outils-album { display: grid; grid-template-columns: 1fr auto; gap: var(--e-2); margin-top: var(--e-3); }
.tri { position: relative; display: flex; align-items: center; }
.tri span { position: absolute; left: 14px; top: 6px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); pointer-events: none; }
.tri select {
  height: 52px; max-width: 150px; padding: 14px 30px 0 14px; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--trait); border-radius: var(--r-m); background: var(--carte);
  color: var(--encre); font: 600 var(--t-s) var(--f-texte);
  background-image: linear-gradient(45deg, transparent 50%, var(--encre-3) 50%), linear-gradient(135deg, var(--encre-3) 50%, transparent 50%);
  background-position: right 16px center, right 11px center; background-size: 5px 5px; background-repeat: no-repeat;
}

/* ——— Comptes : formulaire, avatars, profil ——— */
.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.deux-champs label { min-width: 0; }
.formulaire label { display: flex; flex-direction: column; gap: 6px; }
/* Visage d'un joueur : sa photo ronde, ou ses initiales sur l'accent. */
.avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover;
  display: inline-grid; place-items: center;
  background: var(--accent-doux); color: var(--accent); font: 600 15px/1 var(--f-titre);
  box-shadow: 0 0 0 2px var(--carte), 0 0 0 3px var(--trait);
}
.avatar.grand { width: 76px; height: 76px; font-size: 28px; }
.profil-tete { display: flex; align-items: center; gap: var(--e-4); }
.profil-tete h2 { font: 600 var(--t-l)/1.2 var(--f-titre); }
.profil-tete p { color: var(--encre-2); font-size: var(--t-s); margin-top: 2px; word-break: break-all; }
.photo-profil { position: relative; cursor: pointer; flex: none; }
.photo-edit {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  padding: 2px 8px; border-radius: 99px; background: var(--accent); color: var(--sur-branche);
  font: 600 10px/1.4 var(--f-texte); letter-spacing: .04em; text-transform: uppercase;
}
.petit-mot { margin-top: var(--e-3); font: italic 400 var(--t-m)/1.4 var(--f-titre); color: var(--encre); }
.demande + .demande { margin-top: var(--e-3); }
.actions-joueur { flex-direction: column; align-items: flex-end; gap: 4px; }
.actions-joueur button { font-size: var(--t-xs); font-weight: 600; color: var(--accent); padding: 4px 0; }
/* Action destructrice (supprimer un compte) : en rouge d'alerte, jamais l'accent. */
.actions-joueur button.danger { color: var(--alerte); }
.bouton.danger { background: var(--alerte); color: var(--sur-branche); }

/* ——— Autres jeux : la page « en cours de développement » ——— */
.chantier { text-align: center; padding: var(--e-5) var(--e-4); border-radius: var(--r-l); background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre-1); }
.chantier h1 { margin-top: var(--e-3); font: 600 var(--t-xl)/1.2 var(--f-titre); }
.chantier-panneau { font-size: 56px; line-height: 1; animation: balance 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes balance { 50% { transform: rotate(-8deg); } }
.chantier-blague { margin: var(--e-3) auto var(--e-4); max-width: 30ch; font: italic 400 var(--t-m)/1.45 var(--f-titre); color: var(--encre-2); }
.jeu-futur { opacity: .85; }
.jeu-icone { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--papier-2); font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .chantier-panneau { animation: none; } }
/* La chute de la blague doit se lire : ces descriptions passent à la ligne. */
.jeu-futur .ligne-nom, .jeu-futur .ligne-info { white-space: normal; }