/* ===========================================================
   Aurora — jeux : carte d'invitation, arène plein écran,
   écran de fin, réglages, classement, et le relief de chaque jeu.

   Chargée EN DERNIER : cette feuille n'AJOUTE que des classes neuves
   (.aj-*) et ne redéfinit jamais une règle des feuilles précédentes.

   Deux points de vigilance :
   - games.js injecte ses styles (.ag-*) dans un <style> créé à
     l'exécution, donc APRÈS ce fichier dans l'ordre de la cascade. Toute
     retouche d'une règle .ag-* est donc écrite avec une spécificité
     strictement supérieure (préfixe .aj-plateau / .aj-arene), jamais en
     comptant sur l'ordre.
   - aucune couleur en dur : tout vient de style.css / themes.css
     (--accent, --text, --bg-0, --border, --sunken…) ou des variables
     --ag-* déclarées par games.js sur .ag.
   =========================================================== */

/* ---------------------------------------------------------------
   1. LA CARTE D'INVITATION (dans le fil)
   --------------------------------------------------------------- */

/* Hauteur FIXE : le fil ne doit pas sauter quand l'état d'une partie change.
   Le compte est serré et volontaire — 5 + 44 + 4 + 16 + 4 + 38 + 5 = 116. */
.ag.aj-carte {
  min-width: 196px;
  max-width: 300px;
  height: 116px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 16px;
  border: 1px solid var(--ag-bd);
  background: var(--ag-pane);
  box-shadow: 0 10px 22px -16px var(--ag-ombre);
  overflow: hidden;
  position: relative;
}
.ag.aj-carte.aj-avec-pts { height: 132px; }

.aj-carte-haut { display: flex; align-items: center; gap: 8px; flex: none; height: 44px; }
.aj-carte-emb { flex: none; display: block; }
.aj-carte-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.aj-carte-nom {
  font-size: .85rem; font-weight: 800; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aj-carte-reglages {
  font-size: .66rem; font-weight: 700; opacity: .75; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Sous 230 px, la ligne des réglages disparaît — jamais un retour à la ligne,
   qui ferait sauter la hauteur fixe de la carte. Le bouton garde ses 38 px. */
.aj-carte.aj-etroit .aj-carte-reglages { display: none; }

.aj-carte-score {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: .66rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--ag-bd); background: var(--ag-hole);
}

.aj-carte-etat {
  flex: 1; min-height: 0; display: flex; align-items: center; gap: 6px; overflow: hidden;
}
/* Une seule ligne par défaut (« ● À toi de jouer · coup 12 ») ; deux lignes
   seulement quand la partie a un résultat comptable à annoncer. */
.aj-carte-etat-txt {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 5px;
}
.aj-carte.aj-avec-pts .aj-carte-etat-txt { flex-direction: column; align-items: flex-start; gap: 0; }
.aj-carte-ligne {
  flex: 0 1 auto; min-width: 0;
  font-size: .78rem; font-weight: 800; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aj-carte-sous {
  flex: 1 1 auto; min-width: 0;
  font-size: .68rem; font-weight: 600; opacity: .78; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aj-carte-etat-txt > .aj-carte-sous::before { content: "· "; opacity: .55; }
.aj-carte.aj-avec-pts .aj-carte-sous { flex: none; max-width: 100%; }
.aj-carte.aj-avec-pts .aj-carte-sous::before { content: none; }

.aj-carte-btn {
  appearance: none; -webkit-appearance: none; font: inherit; color: inherit;
  flex: none; width: 100%; height: 38px; border-radius: 12px; cursor: pointer;
  font-size: .78rem; font-weight: 800;
  border: 1px solid var(--ag-bd); background: var(--ag-hole);
  transition: background .18s ease, transform .15s ease, filter .18s ease;
}
.aj-carte-btn:hover:not(:disabled) { background: var(--ag-hi); transform: translateY(-1px); }
.aj-carte-btn:active:not(:disabled) { transform: scale(.98); }
.aj-carte-btn:disabled { opacity: .5; cursor: default; }
.aj-carte-btn.aj-primaire {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--ag-a1), var(--ag-a2));
}
.aj-carte-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Teinte de fond selon l'état : une nuance, pas une couleur en dur. */
.aj-carte.aj-gagne { border-color: color-mix(in srgb, var(--ag-ok) 55%, transparent); }
.aj-carte.aj-perdu, .aj-carte.aj-abandon { opacity: .94; }
.aj-carte.aj-litige { border-style: dashed; }
.aj-carte.aj-sommeil, .aj-carte.aj-blanche { opacity: .88; }
.aj-carte.aj-inconnu { border-style: dashed; opacity: .8; }
.aj-carte.aj-a-moi { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* Une invitation reçue pulse UNE fois, à son premier affichage. */
.aj-carte.aj-appel { animation: aj-appel .9s ease-out 1; }
@keyframes aj-appel {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ---------------------------------------------------------------
   2. L'ARÈNE PLEIN ÉCRAN
   z-index 46 : au-dessus des modales (40) et du dock (45),
   SOUS l'appel (50), les toasts (60), la visionneuse (70),
   le bandeau réseau (95) et le verrouillage.
   --------------------------------------------------------------- */

.aj-arene {
  position: fixed; inset: 0; z-index: 46;
  background: color-mix(in srgb, var(--bg-0) 88%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  color: var(--text);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  animation: aj-arene-in .26s cubic-bezier(.22, .8, .3, 1) both;
  overscroll-behavior: contain;
}
/* Pendant les 200 ms de sortie l'arène est encore dans le document : sans ce
   `pointer-events: none` elle avalerait les clics destinés à ce qui s'ouvre
   derrière (l'écran de réglages d'une revanche, par exemple). */
.aj-arene.aj-sortie { animation: aj-arene-out .2s ease-in both; pointer-events: none; }
@keyframes aj-arene-in  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes aj-arene-out { to { opacity: 0; transform: translateY(12px); } }

.ag.aj-corps {
  min-width: 0; max-width: none;
  height: 100%; display: flex; flex-direction: column; gap: 0;
}

/* z-index 4 : l'en-tête reste AU-DESSUS de l'écran de fin (3). Sans ça, une
   partie terminée n'aurait plus aucun bouton de sortie que ceux de sa carte. */
.aj-arene-top {
  flex: none; height: 56px; display: flex; align-items: center; gap: 10px;
  padding: 0 8px; border-bottom: 1px solid var(--border);
  position: relative; z-index: 4;
}
.aj-retour, .aj-arene-menu, .aj-resultat {
  appearance: none; -webkit-appearance: none; font: inherit; color: inherit;
  flex: none; min-width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
  display: grid; place-items: center; font-size: 1.3rem; font-weight: 800;
  border: 1px solid var(--border); background: var(--sunken);
  transition: background .18s ease, transform .15s ease;
}
.aj-resultat { min-width: auto; padding: 0 12px; font-size: .78rem; }
.aj-retour:hover, .aj-arene-menu:hover, .aj-resultat:hover { background: var(--glass-2); }
.aj-retour:active, .aj-arene-menu:active { transform: scale(.94); }
.aj-retour:focus-visible, .aj-arene-menu:focus-visible, .aj-resultat:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.aj-arene-ttbloc { flex: 1; min-width: 0; text-align: center; }
.aj-arene-tt {
  font-size: 1rem; font-weight: 800; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aj-arene-sub {
  font-size: .68rem; font-weight: 600; opacity: .75;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.aj-duel {
  flex: none; min-height: 60px; display: flex; align-items: stretch; gap: 8px;
  padding: 8px 10px;
}
.aj-duel-camp {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 14px;
  border: 1px solid var(--ag-bd); background: var(--ag-pane);
  transition: border-color .2s ease, background .2s ease;
  position: relative;
}
.aj-duel-camp.ag-actif {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.aj-duel-camp.ag-gagnant {
  border-color: var(--ag-ok);
  background: color-mix(in srgb, var(--ag-ok) 20%, transparent);
}
.aj-duel-camp .aj-duel-txt { flex: 1; min-width: 0; }
.aj-duel-nom { display: flex; align-items: baseline; gap: 6px; }
.aj-duel-nom > span:first-child {
  flex: 1; min-width: 0; font-size: .82rem; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aj-duel-val { flex: none; font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.aj-duel-pts {
  font-size: .66rem; font-weight: 700; opacity: .72;
  display: flex; align-items: center; gap: 6px; min-height: 14px;
}
.aj-ici {
  font-size: .58rem; font-weight: 800; padding: 1px 6px; border-radius: 999px;
  color: var(--ag-ok); border: 1px solid var(--ag-ok); opacity: .9;
}
.aj-duel-vs { align-self: center; font-size: .62rem; font-weight: 800; opacity: .55; }
.aj-delta {
  position: absolute; right: 10px; top: 6px;
  font-size: .8rem; font-weight: 800; color: var(--ag-ok);
  animation: aj-delta .6s ease-out 1 both;
}
@keyframes aj-delta {
  0%   { opacity: 0; transform: translateY(6px); }
  35%  { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* grid-auto-rows: min-content + align-content: center — sans ça, un jeu qui
   produit deux blocs (les manches du ppc et son compte à rebours) les verrait
   écartés d'un demi-écran par les rangées implicites étirées. */
.aj-plateau {
  flex: 1; min-height: 0; display: grid;
  grid-auto-rows: min-content; align-content: center; justify-items: center;
  row-gap: 14px; overflow: auto; padding: 8px 16px;
}
/* L'agrandissement du plateau ne se joue QU'A l'ouverture (classe posée par le
   module au premier rendu) : sans cette garde, chaque coup rejouerait l'entrée. */
.aj-plateau.aj-entree > * { animation: aj-plateau-in .26s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes aj-plateau-in { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

.aj-barre { flex: none; padding: 4px 16px 0; }
.aj-barre .ag-status { font-size: .9rem; justify-content: center; }
.aj-cmd {
  flex: none; max-height: 38vh; overflow: auto;
  padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
}
.aj-cmd.aj-vide { display: none; }

/* Menu ⋯ de l'arène : une feuille posée par-dessus, fermée au clic dans le vide. */
.aj-menu {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  padding: 60px 10px 0;
  background: color-mix(in srgb, var(--bg-0) 40%, transparent);
}
.aj-menu-item {
  appearance: none; -webkit-appearance: none; font: inherit; color: inherit;
  min-width: 200px; min-height: 44px; padding: 0 14px; text-align: left; cursor: pointer;
  border-radius: 12px; font-size: .82rem; font-weight: 700;
  border: 1px solid var(--border); background: var(--glass-2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.aj-menu-item:hover { background: var(--glass-3); }
.aj-menu-item.aj-danger { color: var(--danger); }

/* --- paysage : deux colonnes, le plateau à gauche sur toute la hauteur, une
   colonne de 300 px fixes à droite qui défile seule. La classe est posée par le
   module (même bascule que Flutter : paysage ET hauteur ≤ 560 px) — pas par une
   media query, pour que les deux clients basculent au même moment. --- */
.aj-arene.aj-paysage .ag.aj-corps {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: 56px auto 1fr auto;
  grid-template-areas:
    "plateau top"
    "plateau duel"
    "plateau barre"
    "plateau cmd";
}
.aj-arene.aj-paysage .aj-arene-top { grid-area: top; border-bottom: 0; }
.aj-arene.aj-paysage .aj-duel { grid-area: duel; }
.aj-arene.aj-paysage .aj-plateau {
  grid-area: plateau; padding: 10px; border-right: 1px solid var(--border);
}
.aj-arene.aj-paysage .aj-barre { grid-area: barre; }
.aj-arene.aj-paysage .aj-cmd { grid-area: cmd; max-height: none; overflow: auto; }

/* ---------------------------------------------------------------
   2 bis. L'ARÈNE D'UN JEU D'ACTION (couche arcade, web/js/arcade.js)

   Un jeu d'action ne se peint pas, il se monte : l'arcade dessine
   son propre bandeau de tête (noms, plaques, score, chrono, qualité
   réseau), ses propres commandes et ses propres voiles. Les blocs
   du tour par tour n'auraient rien à y montrer — on les RETIRE du
   flux (`display: none`) plutôt que de les masquer, pour que la
   scène prenne réellement toute la hauteur restante.

   Seule règle de cette feuille qui touche un sélecteur `.ax-*` :
   elle est portée par `.aj-arene.aj-arcade`, donc de spécificité
   strictement supérieure, et ne s'applique qu'ici.
   --------------------------------------------------------------- */

.aj-arene.aj-arcade .aj-duel,
.aj-arene.aj-arcade .aj-plateau,
.aj-arene.aj-arcade .aj-barre,
.aj-arene.aj-arcade .aj-cmd { display: none; }

/* `.ax` est en `position: absolute; inset: 0` : il lui faut un parent positionné
   ET dimensionné. C'est ce bloc — jamais .aj-plateau, dont la grille centrée et
   l'`overflow: auto` déformeraient la toile à chaque redimensionnement.
   `touch-action: none` double celui de `.ax` : sans lui, le premier glissement
   du pouce peut encore être volé par le défilement avant que la toile ne soit
   montée. */
.aj-scene {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  touch-action: none;
}

/* Filet : arcade absente ou jeu inconnu de cette version. */
.aj-scene-note {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 24px; text-align: center;
  font-size: .86rem; font-weight: 600; color: var(--muted);
}

/* L'encoche est DÉJÀ consommée par le `padding` de .aj-arene. Sans ces deux
   remises à zéro, le bandeau de l'arcade et sa rangée de boutons la compteraient
   une seconde fois et descendraient d'une quarantaine de pixels sur un écran à
   encoche — le chronomètre passerait sous le titre de l'arène. */
.aj-arene.aj-arcade .ax-haut { padding-top: 0; }
.aj-arene.aj-arcade .ax-cmds { padding-bottom: 18px; }

/* ---------------------------------------------------------------
   3. L'ÉCRAN DE FIN
   --------------------------------------------------------------- */

.aj-fin {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.aj-fin-carte {
  width: min(380px, 92vw); max-height: 84%; overflow: auto;
  padding: 22px 20px; border-radius: 22px; text-align: center;
  border: 1px solid var(--border); background: var(--glass-2);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px;
}
.aj-fin-carte.aj-fin-anim { animation: aj-fin-in .32s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes aj-fin-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.aj-fin-titre { font-size: 1.4rem; font-weight: 800; }
.aj-fin-detail { font-size: .82rem; font-weight: 600; opacity: .8; }
.aj-fin-pts {
  font-size: 1rem; font-weight: 800;
  background: var(--degrade-txt, linear-gradient(135deg, var(--accent), var(--accent-2)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.aj-fin-serie { font-size: .76rem; font-weight: 700; opacity: .85; }
.aj-fin-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.aj-fin-actions .ag-btn { width: 100%; }

/* ---------------------------------------------------------------
   4. L'ÉCRAN DE RÉGLAGES (ajouts)
   --------------------------------------------------------------- */

.aj-sup-head { display: flex; align-items: center; gap: 12px; }
.aj-sup-txt { flex: 1; min-width: 0; }
.aj-sup-head .ag-sup-sub { margin-top: 2px; }

.aj-apercu {
  min-width: 0; max-width: none;
  height: 168px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 16px; padding: 8px;
  border: 1px solid var(--ag-bd); background: var(--ag-hole);
}
.aj-apercu > * { max-width: 100%; max-height: 100%; }

.aj-groupe { display: flex; flex-direction: column; gap: 10px; }
.aj-groupe-tt {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; opacity: .6;
}
.ag-setup .ag-chip { min-height: 40px; display: inline-flex; align-items: center; }
.ag-setup .ag-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aj-chip-memo { align-self: flex-start; }

.aj-recompenses {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--ag-bd); background: var(--ag-hole);
  font-size: .72rem; font-weight: 700;
}
.aj-recompenses .aj-duel-txt { opacity: .78; font-weight: 600; }

.aj-actions-collantes {
  position: sticky; bottom: 0; z-index: 1;
  padding: 10px 0 2px; margin-top: 2px;
  background: color-mix(in srgb, var(--bg-1) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 -10px 14px -12px var(--ag-ombre);
}
@media (max-width: 520px) {
  .aj-actions-collantes { flex-wrap: wrap; }
  .aj-actions-collantes .aj-lancer { flex: 1 0 100%; order: -1; }
}

/* ---------------------------------------------------------------
   5. LE CLASSEMENT
   --------------------------------------------------------------- */

.modal.aj-modal-jeux { z-index: 47; }

/* L'appel entrant est une `.modal` (z-index 40) : sans ce relèvement il
   sonnerait DERRIÈRE l'arène (46) et on ne pourrait ni répondre ni refuser.
   48 le met au-dessus de l'arène et du classement, et sous l'appel lui-même (50). */
.modal#incoming-call { z-index: 48; }
.ag.aj-classement {
  min-width: 0; max-width: none;
  display: flex; flex-direction: column; gap: 14px; color: var(--text);
}
.aj-cl-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aj-cl-tete h2 { margin: 0; }
.aj-cl-fermer {
  appearance: none; -webkit-appearance: none; font: inherit; color: inherit;
  width: 36px; height: 36px; border-radius: 12px; cursor: pointer; font-size: 1.2rem;
  border: 1px solid var(--border); background: var(--sunken);
}
.aj-cl-tt { font-size: .78rem; font-weight: 800; opacity: .7; }

.aj-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.aj-podium-c {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 6px; border-radius: 16px; text-align: center;
  border: 1px solid var(--border); background: var(--sunken);
}
/* Ni or ni argent en dur : la même teinte d'accent à trois intensités.
   L'intensité porte sur le FOND seul (color-mix), pas sur une `opacity` qui
   effacerait aussi le chiffre : à 45 %, le rang du troisième devenait
   illisible. `--accent-txt` est la variante ASSOMBRIE de l'accent, faite pour
   écrire SUR un fond clair — sur la pastille pleine elle donnait 2,3:1. */
.aj-podium-p {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: .9rem; font-weight: 800; color: #fff;
  background: color-mix(in srgb, var(--accent) calc(var(--o, 1) * 100%), transparent);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, .3), 0 4px 10px -6px var(--accent);
}
/* Dès que la pastille laisse passer le fond de la carte, le blanc ne tient plus :
   le chiffre repasse en couleur de texte, lisible sur les deux palettes. */
.aj-podium-p.aj-pale { color: var(--text); }
.aj-podium-nom {
  font-size: .76rem; font-weight: 800; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aj-podium-pts { font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.aj-podium-bilan, .aj-podium-serie { font-size: .62rem; font-weight: 700; opacity: .7; }

.aj-table { display: flex; flex-direction: column; gap: 5px; }
.aj-table-l {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--sunken);
  font-size: .76rem; font-weight: 700;
}
.aj-table-rang { flex: none; width: 20px; opacity: .6; font-variant-numeric: tabular-nums; }
.aj-table-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-table-val { flex: none; font-variant-numeric: tabular-nums; opacity: .85; }

.aj-bilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.aj-bilan-c {
  padding: 9px 4px; border-radius: 12px; text-align: center;
  border: 1px solid var(--border); background: var(--sunken);
}
.aj-bilan-v { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.aj-bilan-l { font-size: .6rem; font-weight: 700; opacity: .68; }

.aj-cl-det > summary { cursor: pointer; font-size: .78rem; font-weight: 800; opacity: .8; padding: 4px 0; }
.aj-cl-det > .aj-table { margin-top: 8px; }
.aj-cl-pied { font-size: .68rem; font-weight: 600; opacity: .68; line-height: 1.45; }

/* ---------------------------------------------------------------
   6. LES EMBLÈMES
   Un objet par jeu, dessiné au même vocabulaire que les plateaux.
   --------------------------------------------------------------- */

.aj-e-puits { fill: var(--ag-hole); stroke: var(--ag-bd); stroke-width: 2; }
.aj-e-case {
  fill: var(--ag-pane); stroke: var(--ag-bd); stroke-width: 2;
  filter: drop-shadow(0 2px 0 var(--ag-ombre));
}
.aj-e-tube {
  fill: none; stroke: var(--ag-a2); stroke-width: 11; stroke-linecap: round;
  filter: drop-shadow(0 -1px 0 var(--ag-relief)) drop-shadow(0 2px 0 var(--ag-ombre));
}
.aj-e-plaque { fill: var(--ag-pane); stroke: var(--ag-bd); stroke-width: 2; }
.aj-e-jeton.aj-e-a { fill: var(--ag-a1); }
.aj-e-jeton.aj-e-b { fill: var(--ag-b1); }
.aj-e-tranche.aj-e-a { fill: var(--ag-a2); opacity: .55; }
.aj-e-tranche.aj-e-b { fill: var(--ag-b2); opacity: .55; }
.aj-e-luisant { fill: var(--ag-relief); opacity: .55; }
.aj-e-bois { fill: var(--ag-bois2); }
.aj-e-bois-clair { fill: var(--ag-bois1); }
.aj-e-corde { stroke: var(--ag-bois1); stroke-width: 3; stroke-linecap: round; }
.aj-e-tete { fill: var(--ag-b1); }
.aj-e-carte {
  fill: var(--ag-pane); stroke: var(--ag-bd); stroke-width: 2;
  filter: drop-shadow(0 3px 4px var(--ag-ombre));
}
.aj-e-carte-dos { fill: var(--ag-hole); stroke: var(--ag-bd); stroke-width: 2; }
.aj-e-question, .aj-e-piece, .aj-e-main {
  text-anchor: middle; font-weight: 800; fill: currentColor;
}
.aj-e-question { font-size: 44px; filter: drop-shadow(0 1px 0 var(--ag-ombre)); }
.aj-e-piece { font-size: 40px; }
.aj-e-main { font-size: 17px; }
.aj-e-case-fermee { fill: var(--ag-a1); opacity: .34; }
.aj-e-baguette { stroke: var(--ag-trait); stroke-width: 5; stroke-linecap: round; }
.aj-e-clou { fill: var(--ag-trait); }
.aj-e-ech-fonce { fill: var(--ag-hole); }
.aj-e-ech-clair { fill: var(--ag-pane); }

/* ---------------------------------------------------------------
   7. LE RELIEF, JEU PAR JEU (dans l'arène uniquement)
   Les échecs et le pendu donnent le niveau : tout le reste s'aligne.
   Aucune animation en boucle, aucune variation tirée au sort.
   --------------------------------------------------------------- */

/* --- morpion : 12° d'inclinaison, socle de 6 px, puits creusés, tubes --- */
.aj-plateau .ag-3d { perspective: 900px; }
.aj-plateau .ag-3d > .ag-grid {
  transform: rotateX(12deg);
  width: var(--ag-taille, 320px);
  box-shadow:
    0 6px 0 -1px color-mix(in srgb, var(--ag-ombre) 80%, transparent),
    0 22px 30px -18px var(--ag-ombre);
}
.aj-plateau .ag-cell {
  box-shadow: inset 0 4px 7px var(--ag-ombre), inset 0 -2px 0 var(--ag-relief);
}
.aj-plateau .ag-sym path, .aj-plateau .ag-sym circle {
  filter: drop-shadow(0 -1px 0 var(--ag-relief)) drop-shadow(0 2px 0 var(--ag-ombre));
}
/* Le symbole se pose en descendant, l'ombre se resserre sous lui. */
.aj-plateau .ag-cell.ag-draw .ag-sym { animation: aj-pose .34s cubic-bezier(.3, .9, .3, 1) both; }
@keyframes aj-pose { from { transform: translateY(-10px); } to { transform: none; } }

/* --- puissance 4 : plaque de trois quarts, trous percés, jetons cylindres --- */
.aj-plateau .ag-3d > .ag-board {
  transform: rotateX(14deg);
  width: min(var(--ag-taille, 320px), 76vh);
  box-shadow:
    0 5px 0 -1px color-mix(in srgb, var(--ag-ombre) 80%, transparent),
    0 22px 30px -18px var(--ag-ombre);
}
.aj-plateau .ag-slot {
  box-shadow: inset 0 4px 8px var(--ag-ombre);
  position: relative; overflow: hidden;
}
/* Croissant de reflet en bas du trou : c'est lui qui fait « percé » et non « peint ». */
.aj-plateau .ag-slot::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 5%; height: 24%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, var(--ag-relief), transparent 72%);
  opacity: .45;
}
/* Un jeton posé masque le reflet du trou : il remplit le puits. */
.aj-plateau .ag-slot:has(.ag-pion)::after { opacity: 0; }
.aj-plateau .ag-pion.ag-a {
  background:
    radial-gradient(circle at 32% 26%, var(--ag-relief), transparent 58%),
    linear-gradient(160deg, var(--ag-a1), var(--ag-a2));
}
.aj-plateau .ag-pion.ag-b {
  background:
    radial-gradient(circle at 32% 26%, var(--ag-relief), transparent 58%),
    linear-gradient(160deg, var(--ag-b1), var(--ag-b2));
}
/* La tranche de 4 px : le cylindre est vu de trois quarts, on voit son épaisseur. */
.aj-plateau .ag-slot .ag-pion {
  box-shadow:
    inset 0 2px 5px var(--ag-relief),
    inset 0 -3px 6px rgba(0, 0, 0, .34),
    0 4px 0 -1px color-mix(in srgb, var(--ag-ombre) 85%, transparent),
    0 7px 10px -6px var(--ag-ombre);
}
/* Chute : l'ombre portée se resserre pendant la descente. */
.aj-plateau .ag-fall { animation-name: aj-chute; }
@keyframes aj-chute {
  0%   { transform: translateY(calc(-1px * var(--fall, 120))); opacity: .55;
         box-shadow: 0 18px 22px -10px var(--ag-ombre); }
  70%  { transform: translateY(0); opacity: 1; }
  82%  { transform: translateY(-9%) scaleY(.94); }
  100% { transform: translateY(0) scaleY(1);
         box-shadow: inset 0 2px 5px var(--ag-relief), inset 0 -3px 6px rgba(0, 0, 0, .34),
                     0 4px 0 -1px color-mix(in srgb, var(--ag-ombre) 85%, transparent); }
}

/* --- pendu : la scène à 260 px, ombre au sol qui s'allonge, corde qui oscille --- */
.aj-plateau .ag-hang-top { gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; }
.aj-plateau .ag-scene { width: 222px; height: 260px; }
/* Une erreur de plus, une ombre un peu plus longue : le poids s'accumule. */
.aj-plateau .ag-scene .ag-sol {
  transform: scaleX(calc(1 + var(--bad, 0) * .05));
  transform-origin: 58px 140px;
}
.aj-plateau .ag-scene:has(.ag-neuf) .ag-corde { animation: aj-corde .7s ease-out 1; transform-origin: 84px 24px; }
@keyframes aj-corde {
  0% { transform: rotate(0deg); } 35% { transform: rotate(3.5deg); }
  70% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); }
}
/* Lettres gravées : un trait sombre sous chaque lettre trouvée. */
.aj-plateau .ag-letter.ag-found { text-shadow: 0 1px 0 var(--ag-ombre); }
/* Le mot et la catégorie suivent la scène : à 260 px de haut, du texte de bulle
   serait ridicule à côté de la potence. */
.aj-plateau .ag-hang-side { gap: 9px; }
.aj-plateau .ag-cat { font-size: .96rem; }
.aj-plateau .ag-indice { font-size: .84rem; }
.aj-plateau .ag-letter { font-size: 1.5rem; min-width: 20px; border-bottom-width: 3px; }
.aj-plateau .ag-hang-side .ag-note { font-size: .82rem; }
.aj-cmd .ag-keys { grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); }
.aj-cmd .ag-key { min-height: 42px; font-size: .9rem; }

/* --- pierre-papier-ciseaux : mains posées sur des jetons bombés --- */
.aj-plateau .ag-rounds { width: min(var(--ag-taille, 320px), 480px); gap: 10px; }
.aj-plateau .ag-round { padding: 12px 6px; gap: 6px; }
.aj-plateau .ag-rnum { font-size: .72rem; }
.aj-plateau .ag-duel { font-size: 1.5rem; gap: 8px; }
.aj-plateau .ag-count { font-size: .9rem; gap: 9px; }
.aj-plateau .ag-count span { width: 26px; height: 26px; }
.aj-plateau .ag-duel .ag-hand-a, .aj-plateau .ag-duel .ag-hand-b {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  transition: transform .3s cubic-bezier(.3, .9, .3, 1), opacity .3s ease, box-shadow .3s ease;
}
.aj-plateau .ag-duel .ag-hand-a {
  background: radial-gradient(circle at 32% 26%, var(--ag-relief), transparent 60%), var(--ag-hole);
  box-shadow: inset 0 2px 5px var(--ag-relief), 0 3px 7px -3px var(--ag-ombre);
}
.aj-plateau .ag-duel .ag-hand-b {
  background: radial-gradient(circle at 32% 26%, var(--ag-relief), transparent 60%), var(--ag-hole);
  box-shadow: inset 0 2px 5px var(--ag-relief), 0 3px 7px -3px var(--ag-ombre);
}
/* Le perdant s'enfonce de 6 px et son ombre s'écrase ; le gagnant remonte de 3. */
.aj-plateau .ag-round[data-res="a"] .ag-hand-a,
.aj-plateau .ag-round[data-res="b"] .ag-hand-b { transform: translateY(-3px); }
.aj-plateau .ag-round[data-res="a"] .ag-hand-b,
.aj-plateau .ag-round[data-res="b"] .ag-hand-a {
  transform: translateY(6px) scale(.92); opacity: .72;
  box-shadow: 0 1px 3px -2px var(--ag-ombre);
}
.aj-cmd .ag-pick { padding: 12px 6px; }
.aj-cmd .ag-pick .ag-emo { font-size: 1.8rem; }

/* --- culture générale : la question posée sur une pile, réponses en touches --- */
.aj-plateau .ag-pane {
  position: relative;
  width: min(var(--ag-taille, 320px), 520px);
  padding: 20px 22px;
}
.aj-plateau .ag-qtext { font-size: 1.15rem; line-height: 1.4; }
.aj-plateau .ag-qhead { font-size: .78rem; margin-bottom: 6px; }
.aj-plateau .ag-pane::before, .aj-plateau .ag-pane::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid var(--ag-bd); background: var(--ag-hole); z-index: -1;
}
.aj-plateau .ag-pane::before { transform: translate(3px, 3px); opacity: .7; }
.aj-plateau .ag-pane::after  { transform: translate(6px, 6px); opacity: .45; }
.aj-plateau .ag-pane.aj-carte-neuve { animation: aj-carte-suivante .34s cubic-bezier(.3, .9, .3, 1) both; }
@keyframes aj-carte-suivante {
  0%   { transform: translate(26px, -8px) rotate(8deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.aj-cmd .ag-opt {
  box-shadow: inset 0 1px 0 var(--ag-relief), 0 3px 0 -1px color-mix(in srgb, var(--ag-ombre) 70%, transparent);
  transition: transform .12s ease, background .18s ease, box-shadow .12s ease;
}
.aj-cmd .ag-opt:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 var(--ag-relief), 0 1px 0 -1px var(--ag-ombre);
}

/* --- memory : dos gaufré, ombre qui grandit pendant la rotation, éventail --- */
.aj-plateau .ag-cards { width: min(var(--ag-taille, 320px), 58vh); }
/* Dos gaufré : un damier de LUMIÈRE et d'OMBRE posé sur le dégradé, et non un
   second dégradé de couleur — le dos doit rester calme derrière douze cartes. */
.aj-plateau .ag-face.ag-dos {
  background:
    repeating-conic-gradient(from 45deg,
      color-mix(in srgb, var(--ag-relief) 40%, transparent) 0deg 90deg,
      color-mix(in srgb, var(--ag-ombre) 30%, transparent) 90deg 180deg) 0 0 / 18px 18px,
    linear-gradient(135deg, var(--ag-a1), var(--ag-b1));
  box-shadow: inset 0 2px 6px var(--ag-relief), inset 0 -3px 8px var(--ag-ombre);
}
.aj-plateau .ag-card { position: relative; }
/* La carte se soulève pour se retourner : son ombre grandit avec elle. */
.aj-plateau .ag-card::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -6px; height: 10px;
  border-radius: 50%; background: var(--ag-ombre); opacity: .3; filter: blur(3px);
  transition: transform .42s cubic-bezier(.3, .9, .3, 1), opacity .42s ease;
  pointer-events: none;
}
.aj-plateau .ag-card.ag-up::after { transform: scale(1.35); opacity: .5; }
.aj-plateau.aj-entree .ag-cards .ag-card {
  animation: aj-eventail .3s cubic-bezier(.3, .9, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 25ms);
}
@keyframes aj-eventail { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }

/* --- points et carrés : clous bombés, baguettes, carré enfoncé --- */
.aj-plateau .ag-dotsbox { width: var(--ag-taille, 320px); height: var(--ag-taille, 320px); }
.aj-plateau .ag-dotsvg .ag-clou { fill: var(--ag-relief); opacity: .8; }
.aj-plateau .ag-dotsvg .ag-lueur {
  stroke: var(--ag-relief); stroke-width: 1.6; stroke-linecap: round; opacity: .5;
}
.aj-plateau .ag-dotsvg .ag-plein { filter: drop-shadow(0 2px 1px var(--ag-ombre)); }
/* Un carré fermé s'enfonce : son fond descend de 3 px et porte une ombre. */
.aj-plateau .ag-dotsvg .ag-case {
  filter: drop-shadow(0 3px 2px var(--ag-ombre));
  opacity: .4;
  transform: translateY(3px);
}
.aj-plateau .ag-dotsvg .ag-init { filter: drop-shadow(0 1px 0 var(--ag-ombre)); }

/* --- allumettes : éventail déterministe, plateau à tranche, chute à la prise --- */
.aj-plateau .ag-nim {
  width: min(var(--ag-taille, 320px), 440px);
  box-shadow:
    0 5px 0 -1px color-mix(in srgb, var(--ag-ombre) 80%, transparent),
    0 20px 26px -16px var(--ag-ombre);
}
.aj-plateau .ag-match {
  width: 20px; height: 58px;
  transform: rotate(calc((-2 + var(--i, 0)) * 1deg));
  transform-origin: 50% 100%;
}
.aj-plateau .ag-match:not(:disabled):hover { transform: rotate(calc((-2 + var(--i, 0)) * 1deg)) translateY(-4px); }
.aj-plateau .ag-mstick { box-shadow: 2px 3px 5px var(--ag-ombre); }
.aj-plateau .ag-match.ag-neuf { animation-name: aj-tombe; animation-duration: .5s; }
@keyframes aj-tombe {
  0%   { opacity: 1; transform: rotate(calc((-2 + var(--i, 0)) * 1deg)); }
  100% { opacity: 0; transform: rotate(25deg) translateY(26px); }
}

/* --- échecs : l'arène leur donne enfin la place --- */
.aj-plateau .ech {
  max-width: none;
  --ech-c: clamp(28px, calc((var(--ag-taille, 320px) - 40px) / 8), 56px);
}
.aj-plateau .ech-scene { perspective: 1400px; }
/* Le module d'échecs porte son propre bandeau d'état ; dans l'arène, .aj-barre
   dit déjà la même chose. On garde ses bandeaux de camp (prises et matériel). */
.aj-plateau .ech-etat { display: none; }

/* ---------------------------------------------------------------
   8. LES APERÇUS DES RÉGLAGES
   Ils DESSINENT le format choisi : rien n'y est tiré au sort.
   --------------------------------------------------------------- */

.aj-ap-3d { perspective: 700px; }
.aj-ap-3d > * { transform: rotateX(11deg); transform-origin: 50% 100%; }
.aj-ap-grid, .aj-ap-board { width: 168px; }
.aj-ap-grid .ag-cell, .aj-ap-board .ag-slot { pointer-events: none; }
.aj-ap-align { border-color: color-mix(in srgb, var(--ag-ok) 70%, transparent) !important; }
.aj-ap-svg { width: 100%; height: 100%; max-height: 152px; }
.aj-ap-fantome { fill: none; stroke: currentColor; stroke-width: 3; opacity: .28; stroke-linecap: round; }
.aj-ap-trait { stroke: var(--ag-trait); stroke-width: 2.4; stroke-linecap: round; }
.aj-ap-txt { fill: currentColor; font-size: 13px; font-weight: 800; text-anchor: middle; opacity: .75; }
.aj-ap-case { fill: var(--ag-a1); opacity: .3; }
.aj-ap-baguette { stroke: var(--ag-a2); stroke-width: 5; stroke-linecap: round; }
.aj-ap-vide { stroke: var(--ag-trait); stroke-width: 2.4; opacity: .3; stroke-linecap: round; }

.aj-ap-rps { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.aj-ap-mains { display: flex; gap: 14px; }
.aj-ap-main {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem;
  background: radial-gradient(circle at 32% 26%, var(--ag-relief), transparent 60%), var(--ag-hole);
  box-shadow: inset 0 2px 5px var(--ag-relief), 0 4px 8px -4px var(--ag-ombre);
}
.aj-ap-manches { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.aj-ap-pastille {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: .62rem; font-weight: 800;
  border: 1px solid var(--ag-trait); background: var(--ag-hole);
}

.aj-ap-quiz { width: 100%; display: grid; place-items: center; }
.aj-ap-pile {
  position: relative; width: min(230px, 90%); padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--ag-bd); background: var(--ag-pane);
  display: flex; flex-direction: column; gap: 8px;
}
.aj-ap-pile::before, .aj-ap-pile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  border: 1px solid var(--ag-bd); background: var(--ag-hole);
}
.aj-ap-pile::before { transform: translate(3px, 3px); opacity: .7; }
.aj-ap-pile::after { transform: translate(6px, 6px); opacity: .45; }
.aj-ap-qtt { font-size: .78rem; font-weight: 800; }
.aj-ap-qtxt { font-size: .68rem; font-weight: 600; opacity: .78; }
.aj-ap-chrono > i { width: 62%; animation: none; }

.aj-ap-cards { width: 150px; gap: 4px; padding: 5px; display: grid; }
.aj-ap-carte {
  aspect-ratio: 3/4; border-radius: 7px; display: grid; place-items: center; font-size: .8rem;
  background:
    repeating-conic-gradient(from 45deg,
      color-mix(in srgb, var(--ag-a1) 88%, transparent) 0deg 90deg,
      color-mix(in srgb, var(--ag-b1) 88%, transparent) 90deg 180deg) 0 0 / 12px 12px,
    linear-gradient(135deg, var(--ag-a1), var(--ag-b1));
  box-shadow: inset 0 1px 4px var(--ag-relief), 0 2px 4px -2px var(--ag-ombre);
}
.aj-ap-carte.aj-ap-face { background: var(--ag-hole); box-shadow: inset 0 2px 5px var(--ag-ombre); }

.aj-ap-nim { display: flex; flex-direction: column; gap: 7px; }
.aj-ap-nrow { display: flex; justify-content: center; gap: 5px; }
.aj-ap-match {
  width: 6px; height: 24px; border-radius: 3px;
  background: linear-gradient(100deg, var(--ag-bois1), var(--ag-bois2));
  transform: rotate(calc((-2 + var(--i, 0)) * 1deg));
  box-shadow: 1px 2px 3px var(--ag-ombre);
  position: relative;
}
.aj-ap-match::before {
  content: ""; position: absolute; left: -2px; right: -2px; top: -5px; height: 8px;
  border-radius: 50%; background: var(--ag-b1);
}

.aj-ap-ech {
  display: grid; grid-template-columns: repeat(8, 1fr); width: 152px;
  border-radius: 6px; overflow: hidden; box-shadow: 0 5px 12px -8px var(--ag-ombre);
}
.aj-ap-ecase { aspect-ratio: 1; display: grid; place-items: center; font-size: .78rem; }
.aj-ap-cl { background: var(--ag-pane); }
.aj-ap-fo { background: var(--ag-hole); }
.aj-ap-blanc { color: var(--ag-relief); text-shadow: 0 1px 1px var(--ag-ombre); }

/* ---------------------------------------------------------------
   9. ANIMATIONS RÉDUITES
   Tout tombe à zéro : rien ne bouge, tout reste lisible.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .aj-arene, .aj-arene *, .aj-arene *::before, .aj-arene *::after,
  .aj-carte, .aj-carte *, .aj-apercu *, .aj-classement * {
    animation: none !important;
    transition: none !important;
  }
  .aj-plateau > * { opacity: 1 !important; transform: none !important; }
  .aj-plateau .ag-3d > .ag-grid, .aj-plateau .ag-3d > .ag-board { transform: none; }
  .aj-ap-3d > * { transform: none; }
}