/* JAMBO — coquille de l'application (accueil, paramètres, table).
   Structure uniquement : couleurs, polices et textures passent par les propriétés --jb-* (contrat de thème,
   voir CLAUDE.md). Valeurs ci-dessous = thème « neutre ». Un thème les redéfinit sous [data-theme="<id>"]. */

:root,
[data-theme="neutre"] {
  /* Polices (uniquement celles chargées par index.php) */
  --jb-police-titre: 'Archivo Black', 'Arial Black', sans-serif;
  --jb-police-texte: 'Rubik', 'Segoe UI', Arial, sans-serif;
  --jb-police-chiffres: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --jb-police-bulle: 'Righteous', 'Trebuchet MS', sans-serif;

  /* Application */
  --jb-fond-couleur: #12171d;
  --jb-fond: radial-gradient(120% 75% at 50% 0%, #2a3542 0%, #182029 52%, #10151b 100%);
  --jb-texte: #eef1f4;
  --jb-texte-doux: #a9b3bf;
  --jb-accent: #e8bb52;
  --jb-accent-texte: #241a04;
  --jb-ligne: rgba(255, 255, 255, 0.1);
  --jb-focus: #ffd76e;

  /* Titre d'accueil */
  --jb-titre-couleur: #f7f0e1;
  --jb-titre-ombre: 0 4px 0 rgba(0, 0, 0, 0.32);
  --jb-titre-espacement: 0.06em;
  --jb-sous-titre-couleur: #e8bb52;

  /* Panneaux (sections des paramètres, texte des règles) */
  --jb-panneau-fond: rgba(255, 255, 255, 0.045);
  --jb-panneau-bord: rgba(255, 255, 255, 0.09);
  --jb-panneau-rayon: 18px;

  /* Boutons */
  --jb-bouton-fond: rgba(255, 255, 255, 0.07);
  --jb-bouton-texte: #eef1f4;
  --jb-bouton-bord: rgba(255, 255, 255, 0.16);
  --jb-bouton-ombre: 0 2px 0 rgba(0, 0, 0, 0.28);
  --jb-bouton-rayon: 14px;
  --jb-bouton-principal-fond: linear-gradient(180deg, #f2c965 0%, #e2ac3c 100%);
  --jb-bouton-principal-texte: #241a04;
  --jb-bouton-principal-bord: #f6d98c;

  /* Contrôles des paramètres (segments, vignettes, interrupteurs, curseur) */
  --jb-choix-fond: rgba(255, 255, 255, 0.06);
  --jb-choix-actif-fond: #e8bb52;
  --jb-choix-actif-texte: #241a04;
  --jb-interrupteur-fond: rgba(255, 255, 255, 0.18);
  --jb-interrupteur-actif: #5fcf8a;

  /* Table : valeurs du fond « Tapis » (feutre vert) ; Nuit, Bois et Clair plus bas (« Fonds de table »). */
  --jb-table-fond: radial-gradient(ellipse at 50% 45%, #2f7a59 0%, #22654a 48%, #174a36 100%);
  --jb-table-bord: 8px solid #3b2b20;
  --jb-table-ombre: inset 0 0 0 2px rgba(255, 255, 255, 0.07), inset 0 12px 36px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.45);
  --jb-table-rayon: 999px;
  --jb-table-texte: rgba(255, 255, 255, 0.9);
  --jb-table-voile: rgba(0, 0, 0, 0.28);
  --jb-table-liseret: rgba(255, 255, 255, 0.09);
  --jb-table-carte-ombre: var(--jb-carte-ombre);
  --jb-table-halo: var(--jb-tour-halo);
  --jb-table-surbrillance: var(--jb-carte-surbrillance);

  /* Sièges */
  --jb-avatar-fond: linear-gradient(160deg, #3d4b5b 0%, #27313c 100%);
  --jb-avatar-texte: #f7f0e1;
  --jb-avatar-bord: rgba(255, 255, 255, 0.4);
  --jb-avatar-humain-fond: linear-gradient(160deg, #f2c965 0%, #d99f33 100%);
  --jb-avatar-humain-texte: #241a04;
  --jb-siege-fond: rgba(9, 13, 17, 0.74);
  --jb-siege-texte: #eef1f4;
  --jb-marque-fond: #e8bb52;
  --jb-marque-texte: #241a04;

  /* Tour de jeu et minuteur */
  --jb-tour-couleur: #ffd76e;
  --jb-tour-halo: rgba(255, 215, 110, 0.55);
  --jb-minuteur-couleur: #6fe09a;
  --jb-minuteur-alerte: #ff6a5a;
  --jb-minuteur-piste: rgba(255, 255, 255, 0.16);

  /* Bulles de bande dessinée */
  --jb-bulle-fond: #ffffff;
  --jb-bulle-texte: #17130e;
  --jb-bulle-bord: #17130e;

  /* Jetons */
  --jb-jeton-couleur: #d4453b;
  --jb-jeton-liseret: #fff4d8;

  /* Dés (cubes 3D) : faces, points, contour des faces, arêtes (intérieur du cube vu aux coins arrondis), ombre
     portée sur la table (déclinée par fond) */
  --jb-de-fond: #fbf8f1;
  --jb-de-point: #1b1714;
  --jb-de-bord: rgba(0, 0, 0, 0.22);
  --jb-de-arete: #d9d0bf;
  --jb-de-ombre: rgba(0, 0, 0, 0.42);

  /* Bannière de fin de donne, annonces, pastille « Démo locale » */
  --jb-banniere-fond: rgba(12, 16, 21, 0.93);
  --jb-banniere-texte: #ffffff;
  --jb-banniere-accent: #e8bb52;
  --jb-pastille-fond: rgba(232, 187, 82, 0.16);
  --jb-pastille-texte: #f3d27e;

  /* Mises : pièces d'or (tas devant chaque joueur, pot, vols) et montant du tas (retours du 12/10) */
  --jb-piece-or: #e8b43a;
  --jb-piece-reflet: #fff4c6;
  --jb-piece-sombre: #a8730f;
  --jb-piece-tranche: #7c5208;
  --jb-piece-bord: rgba(92, 58, 4, 0.55);
  --jb-mise-fond: rgba(9, 13, 17, 0.8);
  --jb-mise-texte: #ffe08f;

  /* Annonces géantes (Cora, brûlage, Full, FLOP, lancer des dés) : police, texte blanc, contour, lueur, voile,
     pastille du sous-titre ; flammes du brûlage ; bouton « FRAPPER LA CARTE ? » ; plateau du roll ; étoile du Full */
  --jb-annonce-police: 'Bungee', 'Archivo Black', 'Arial Black', sans-serif;
  --jb-annonce-texte: #ffffff;
  --jb-annonce-contour: #111418;
  --jb-annonce-lueur: rgba(255, 205, 90, 0.55);
  --jb-annonce-voile: radial-gradient(ellipse at 50% 50%, rgba(6, 8, 12, 0.62) 0%, rgba(6, 8, 12, 0.3) 55%, rgba(6, 8, 12, 0) 80%);
  --jb-annonce-accent: #e8bb52;
  --jb-annonce-accent-texte: #241a04;
  --jb-feu-coeur: #fff7c2;
  --jb-feu-flamme: #ffb21e;
  --jb-feu-bord: #f04a12;
  --jb-feu-lueur: rgba(255, 110, 20, 0.55);
  --jb-frapper-fond: linear-gradient(180deg, #ee4a33 0%, #a9180e 100%);
  --jb-frapper-texte: #ffffff;
  --jb-frapper-bord: #ffd7a8;
  --jb-roll-fond: rgba(10, 14, 19, 0.84);
  --jb-roll-bord: rgba(232, 187, 82, 0.75);
  --jb-full-etoile: #ffd76e;

  /* Cartes */
  --jb-carte-ombre: 0 2px 5px rgba(0, 0, 0, 0.38);
  --jb-carte-surbrillance: #ffd76e;
  --jb-carte-interdite: rgba(14, 18, 23, 0.55);
  --jb-carte-ancienne: rgba(12, 16, 21, 0.4);

  color-scheme: dark;
}

/* ---------- Fonds de table (Paramètres > Affichage > Fond de table, attribut data-fond sur <html>) ----------
   « Tapis » = les valeurs --jb-table-* du thème. Nuit, Bois et Clair ne remplacent que la surface de la table
   (tapis, bord, liseré, ombres, pot, cartes posées) et l'emportent sur la base de tout thème (:root[data-fond] est
   plus spécifique que [data-theme]) ; un thème décline ses propres fonds sous [data-theme="<id>"][data-fond="<fond>"]
   (même spécificité, chargé après app.css). */

:root[data-fond="nuit"] {
  --jb-de-ombre: rgba(0, 0, 0, 0.55);
  --jb-table-fond: radial-gradient(ellipse at 50% 42%, #2d3a5c 0%, #1d2643 50%, #121833 100%);
  --jb-table-bord: 8px solid #090c17;
  --jb-table-ombre: inset 0 0 0 2px rgba(150, 180, 255, 0.08), inset 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(170, 190, 240, 0.14), 0 12px 28px rgba(0, 0, 0, 0.55);
  --jb-table-liseret: rgba(170, 195, 255, 0.13);
  --jb-table-texte: #edf1fb;
  --jb-table-voile: rgba(4, 7, 20, 0.5);
  --jb-table-carte-ombre: 0 2px 7px rgba(0, 0, 0, 0.6);
}

:root[data-fond="bois"] {
  /* Planches (joints), fil du bois, puis teinte chaude plus claire au centre. */
  --jb-table-fond:
    repeating-linear-gradient(180deg, transparent 0 56px, rgba(34, 15, 4, 0.32) 56px 58px, rgba(255, 226, 180, 0.06) 58px 59px),
    repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 7px, rgba(255, 228, 186, 0.05) 7px 8px, transparent 8px 19px),
    radial-gradient(ellipse at 50% 42%, #8d5c34 0%, #6e4426 55%, #4d2d17 100%);
  --jb-table-bord: 8px solid #2c180b;
  --jb-table-ombre: inset 0 0 0 2px rgba(255, 222, 176, 0.09), inset 0 12px 36px rgba(0, 0, 0, 0.42), 0 12px 28px rgba(0, 0, 0, 0.5);
  --jb-table-liseret: rgba(255, 222, 176, 0.14);
  --jb-table-texte: #fff4e2;
  --jb-table-voile: rgba(30, 13, 4, 0.5);
  --jb-table-carte-ombre: 0 2px 6px rgba(24, 9, 2, 0.55);
}

:root[data-fond="clair"] {
  --jb-table-fond: radial-gradient(ellipse at 50% 42%, #f8f4ea 0%, #ede6d6 55%, #ddd3bd 100%);
  --jb-table-bord: 8px solid #a5885f;
  --jb-table-ombre: inset 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 10px 30px rgba(110, 84, 40, 0.2), 0 12px 28px rgba(0, 0, 0, 0.45);
  --jb-table-liseret: rgba(110, 82, 40, 0.22);
  --jb-table-texte: #2a2217;
  --jb-table-voile: rgba(255, 255, 255, 0.78);
  --jb-table-carte-ombre: 0 1px 2px rgba(70, 50, 20, 0.35), 0 3px 9px rgba(70, 50, 20, 0.22);
  /* Doré plus soutenu : le liseré et le halo de la carte qui tient la main restent visibles sur un fond clair. */
  --jb-table-halo: rgba(224, 146, 18, 0.62);
  --jb-table-surbrillance: #e39b14;
  --jb-carte-ancienne: rgba(240, 234, 220, 0.55);
  --jb-de-bord: rgba(80, 58, 24, 0.45);
  --jb-de-ombre: rgba(70, 48, 16, 0.38);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--jb-fond-couleur);
}

body {
  background: var(--jb-fond);
  background-color: var(--jb-fond-couleur);
  color: var(--jb-texte);
  font-family: var(--jb-police-texte);
  font-size: 16px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}

button,
input,
output { font: inherit; color: inherit; }

button { cursor: pointer; }

:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--jb-focus);
  outline-offset: 2px;
}

.app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* Paysage demandé mais appareil resté en portrait : l'application tourne de 90°. */
html[data-pivote] .app {
  inset: auto;
  top: 0;
  left: 0;
  width: var(--vp-h, 100vh);
  height: var(--vp-l, 100vw);
  transform-origin: 0 0;
  transform: rotate(90deg) translateY(-100%);
  padding: env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) env(safe-area-inset-top, 0px);
}

.ecran {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Les écrans inactifs restent mis en page (la table garde ses mesures) mais invisibles. */
.ecran:not(.ecran--active) {
  visibility: hidden;
  pointer-events: none;
}

.jb-version {
  position: fixed;
  right: 8px;
  bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--jb-texte-doux);
  opacity: 0.5;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1.5px solid var(--jb-bouton-bord);
  border-radius: var(--jb-bouton-rayon);
  background: var(--jb-bouton-fond);
  color: var(--jb-bouton-texte);
  box-shadow: var(--jb-bouton-ombre);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.bouton:active:not(:disabled) { transform: translateY(1px) scale(0.98); }

.bouton:hover:not(:disabled) { filter: brightness(1.08); }

.bouton--principal {
  background: var(--jb-bouton-principal-fond);
  color: var(--jb-bouton-principal-texte);
  border-color: var(--jb-bouton-principal-bord);
}

.bouton--grand { min-height: 54px; font-size: 17px; }

.bouton--discret { background: transparent; box-shadow: none; font-weight: 500; color: var(--jb-texte-doux); }

.bouton:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.bouton small { font-size: 0.78em; font-weight: 700; opacity: 0.8; }

.etiquette {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--jb-pastille-fond);
  color: var(--jb-pastille-texte);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bouton-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--jb-bouton-bord);
  border-radius: 50%;
  background: var(--jb-bouton-fond);
  color: var(--jb-bouton-texte);
}

.bouton-icone svg { width: 22px; height: 22px; }

/* ---------- Accueil ---------- */

.ecran-accueil {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(150px, 1fr) auto;
  grid-template-areas: "titre" "decor" "menu";
  justify-items: center;
  align-items: center;
  gap: 8px;
  padding: 24px 16px 22px;
  overflow-x: hidden;
  overflow-y: auto;
}

.accueil-entete { grid-area: titre; text-align: center; }

.accueil-titre {
  margin: 0;
  font-family: var(--jb-police-titre);
  font-weight: 400;
  font-size: clamp(56px, calc(var(--app-l, 400px) * 0.2), 112px);
  line-height: 0.95;
  letter-spacing: var(--jb-titre-espacement);
  color: var(--jb-titre-couleur);
  text-shadow: var(--jb-titre-ombre);
}

.accueil-sous-titre {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jb-sous-titre-couleur);
}

.accueil-decor {
  grid-area: decor;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 150px;
  overflow: visible;
}

.accueil-menu {
  grid-area: menu;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 380px);
}

.accueil-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.accueil-lien {
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--jb-texte-doux);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Décor du thème neutre : éventail de cartes du style courant. */
.decor-eventail {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.decor-carte {
  position: absolute;
  width: clamp(72px, min(calc(var(--app-l, 400px) * 0.3), calc(var(--app-h, 800px) * 0.17)), 170px);
  aspect-ratio: 250 / 350;
  transform-origin: 50% 160%;
  transform: rotate(calc(var(--i) * 11deg));
  border-radius: 7%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.decor-carte svg { display: block; width: 100%; height: 100%; }

.app[data-disposition="paysage"] .ecran-accueil {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "decor ." "decor titre" "decor menu" "decor .";
  padding: 18px max(28px, calc((100% - 1160px) / 2));
  column-gap: 24px;
  row-gap: 14px;
}

.app[data-disposition="paysage"] .accueil-entete { align-self: end; }

.app[data-disposition="paysage"] .accueil-menu { align-self: start; }

/* Tailles bornées aussi par la largeur (retour du 12/10, tailles intermédiaires) : le titre tient dans sa colonne
   et l'éventail (environ 2,8 largeurs de carte) dans la sienne, sans chevauchement ni coupure. */
.app[data-disposition="paysage"] .accueil-titre { font-size: clamp(40px, min(calc(var(--app-h, 400px) * 0.17), calc(var(--app-l, 800px) * 0.095)), 104px); }

.app[data-disposition="paysage"] .decor-carte { width: clamp(56px, min(calc(var(--app-h, 400px) * 0.28), calc((var(--app-l, 800px) - 80px) * 0.18)), 210px); }

.accueil-duo .bouton { padding-left: 8px; padding-right: 8px; }

/* Téléphone en paysage (application haute de 440 px au plus, rotation comprise) : accueil compact, tout tient
   sans défiler. .app--basse est posée par app.js (majPivot). */
.app--basse[data-disposition="paysage"] .ecran-accueil { padding-top: 12px; padding-bottom: 12px; row-gap: 8px; }
.app--basse[data-disposition="paysage"] .accueil-titre { font-size: clamp(36px, min(calc(var(--app-h, 400px) * 0.13), calc(var(--app-l, 800px) * 0.095)), 104px); }
.app--basse[data-disposition="paysage"] .accueil-menu { gap: 8px; }
.app--basse[data-disposition="paysage"] .accueil-menu .bouton { min-height: 44px; }
.app--basse[data-disposition="paysage"] .accueil-lien { min-height: 36px; }

/* ---------- Écrans à défilement (paramètres, règles) ---------- */

.ecran-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 6px;
}

.ecran-entete h1 {
  margin: 0;
  font-family: var(--jb-police-titre);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.02em;
}

.ecran-defilant {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 16px 40px;
  -webkit-overflow-scrolling: touch;
}

.reglages-colonnes {
  display: grid;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.app[data-disposition="paysage"] .reglages-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

.reglages-section,
.panneau-texte {
  background: var(--jb-panneau-fond);
  border: 1px solid var(--jb-panneau-bord);
  border-radius: var(--jb-panneau-rayon);
  padding: 14px 16px;
}

.reglages-section h2,
.panneau-texte h2 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jb-accent);
}

.h2-sous { font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--jb-texte-doux); }

.reglage {
  padding: 12px 0;
  border-top: 1px solid var(--jb-ligne);
}

.reglages-section h2 + .reglage { border-top: 0; }

.reglage-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-weight: 600;
}

.reglage-valeur { font-weight: 500; font-size: 14px; color: var(--jb-texte-doux); text-align: right; }

.reglage-aide { display: block; margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--jb-texte-doux); font-weight: 400; }

.reglage-note { margin-top: 12px; }

.segments { display: flex; flex-wrap: wrap; gap: 6px; }

.segments button {
  flex: 1 1 0;
  min-width: 64px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1.5px solid var(--jb-bouton-bord);
  border-radius: 12px;
  background: var(--jb-choix-fond);
  font-weight: 600;
  font-size: 15px;
}

.segments button[aria-checked="true"] {
  background: var(--jb-choix-actif-fond);
  color: var(--jb-choix-actif-texte);
  border-color: transparent;
}

/* Réglage verrouillé pendant une partie en cours (sens du jeu) : boutons grisés, raison affichée. */
.segments button:disabled { opacity: 0.45; cursor: not-allowed; }

.reglage--verrouille .reglage-titre { color: var(--jb-texte-doux); }

.reglage-verrou { color: var(--jb-accent); font-weight: 500; }

/* Valeur en lecture seule (réglage de l'administrateur : jetons reçus au départ) */
.reglage-valeur { display: block; margin-top: 6px; font-family: var(--jb-police-chiffres); font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--jb-texte); }

.ligne-interrupteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.ligne-texte { display: flex; flex-direction: column; min-width: 0; }

.ligne-titre { font-weight: 600; }

.interrupteur {
  position: relative;
  flex: none;
  width: 54px;
  height: 32px;
  border-radius: 16px;
  background: var(--jb-interrupteur-fond);
  transition: background-color 0.15s ease;
}

.interrupteur::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}

[aria-checked="true"] > .interrupteur { background: var(--jb-interrupteur-actif); }

[aria-checked="true"] > .interrupteur::after { transform: translateX(22px); }

.reglage--ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pas-a-pas {
  flex: none;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--jb-bouton-bord);
  border-radius: 12px;
  background: var(--jb-choix-fond);
}

.pas-a-pas button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  border-radius: 10px;
}

.pas-a-pas button:disabled { opacity: 0.3; cursor: default; }

.pas-a-pas output {
  min-width: 92px;
  text-align: center;
  font-family: var(--jb-police-chiffres);
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}

.styles-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}

.style-vignette {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 4px 6px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--jb-choix-fond);
}

.style-vignette[aria-checked="true"] {
  border-color: var(--jb-choix-actif-fond);
  background: rgba(255, 255, 255, 0.1);
}

.vignette-carte { display: block; width: 54px; aspect-ratio: 250 / 350; }

.vignette-carte svg,
.apercu-carte svg { display: block; width: 100%; height: 100%; }

.vignette-nom { font-size: 11.5px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }

/* Fond de table : vignettes (petite table ovale à la surface du thème courant, posée en ligne par ecrans.js,
   avec une carte face et une carte dos pour juger le contraste). */
.fonds-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.fond-choix {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 9px 6px 7px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--jb-choix-fond);
}

.fond-choix[aria-checked="true"] {
  border-color: var(--jb-choix-actif-fond);
  background: rgba(255, 255, 255, 0.1);
}

.fond-apercu {
  position: relative;
  display: block;
  width: 100%;
  max-width: 104px;
  aspect-ratio: 8 / 5;
  border: var(--jb-table-bord);
  border-width: 3px !important;
  border-radius: 999px;
  background: var(--jb-table-fond);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.fond-carte {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19%;
  aspect-ratio: 250 / 350;
  border-radius: 2px;
  background: #fbf8f1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transform: translate(-88%, -50%) rotate(-7deg);
}

/* Petit carreau rouge sur la carte face. */
.fond-carte::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  background: #c22a2f;
  transform: translate(-50%, -50%) scale(0.8, 1.15) rotate(45deg);
}

/* Carte dos : le dos du thème courant (image posée par ecrans.js, rendreApercusFonds), comme sur la table. */
.fond-carte--dos {
  background: transparent center / 100% 100% no-repeat;
  transform: translate(-6%, -46%) rotate(6deg);
}

.fond-carte--dos::after { content: none; }

.fond-nom { font-size: 13px; font-weight: 600; line-height: 1.2; }

.styles-additionnels,
.avance { margin-top: 10px; }

.styles-additionnels > summary,
.avance > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.styles-additionnels > summary::-webkit-details-marker,
.avance > summary::-webkit-details-marker { display: none; }

.styles-additionnels > summary::before,
.avance > summary::before {
  content: '';
  width: 8px;
  height: 8px;
  margin: 0 4px 0 2px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.styles-additionnels[open] > summary::before,
.avance[open] > summary::before { transform: rotate(45deg); }

.compte {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--jb-choix-fond);
  font-size: 13px;
  color: var(--jb-texte-doux);
}

.avance { border-top: 1px solid var(--jb-ligne); padding-top: 4px; }

.avance > summary { color: var(--jb-texte-doux); }

.echelle-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.echelle-ligne input[type="range"] {
  width: 100%;
  height: 44px;
  margin: 0;
  accent-color: var(--jb-accent);
}

.apercu-carte { display: block; width: 66px; aspect-ratio: 250 / 350; }

.reinitialiser { text-align: center; margin: 18px 0 0; }

.panneau-texte { max-width: 640px; margin: 0 auto; }

.panneau-texte p { margin: 10px 0; }

.regles-intro { font-size: 17px; font-weight: 600; }

.couleurs-liste { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }

.couleurs-liste li { display: flex; align-items: center; gap: 12px; }

.couleurs-liste svg { width: 30px; height: 30px; padding: 4px; border-radius: 8px; background: #fbf8f1; }

.couleurs-liste .couleur-noire { fill: #17130f; }

.couleurs-liste .couleur-rouge { fill: #c22a2f; }

/* ---------- Table ---------- */

.ecran-table { padding: 0; }

.table {
  --avatar: 46px;
  /* Marge du haut (retour du 12/10) : barre et siège d'en face jamais collés ni coupés contre le bord de l'écran
     (anneau du tour et badges débordent de l'avatar de 7 px). */
  --marge-haut: 10px;
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "barre" "scene" "moi" "main" "actions";
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.table-barre {
  grid-area: barre;
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: var(--marge-haut) 10px 0;
}

.table-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--jb-police-chiffres);
  font-weight: 600;
  font-size: 15px;
  color: var(--jb-texte-doux);
  white-space: nowrap;
}

.pastille-demo {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--jb-pastille-fond);
  color: var(--jb-pastille-texte);
  font-family: var(--jb-police-texte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scene {
  grid-area: scene;
  position: relative;
  min-height: 0;
}

.tapis {
  position: absolute;
  top: calc(var(--avatar) * 0.5 + 6px);
  bottom: 8px;
  left: 30px;
  right: 30px;
  border: var(--jb-table-bord);
  border-radius: var(--jb-table-rayon);
  background: var(--jb-table-fond);
  box-shadow: var(--jb-table-ombre);
}

/* Liseré intérieur du tapis (couture du feutre). */
.tapis::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1.5px solid var(--jb-table-liseret);
  border-radius: inherit;
  pointer-events: none;
}

.tapis-centre { position: absolute; inset: 0; }

.tapis-ancre {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 0;
  height: 0;
}

.pot {
  position: absolute;
  left: 0;
  right: 0;
  top: 54%;
  width: max-content;
  margin: -15px auto 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px 3px 4px;
  border-radius: 999px;
  background: var(--jb-table-voile);
  color: var(--jb-table-texte);
  font-family: var(--jb-police-chiffres);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

.pot b { font-weight: 700; font-size: 17px; }

.jeton {
  flex: none;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--jb-jeton-couleur);
  border: 3px dashed var(--jb-jeton-liseret);
  box-shadow: 0 0 0 1.5px var(--jb-jeton-couleur), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.jeton--petit { width: 12px; height: 12px; border-width: 2px; box-shadow: 0 0 0 1px var(--jb-jeton-couleur); }

.jeton--vol { position: absolute; left: 0; top: 0; z-index: 400; }

/* Places des adversaires : boîtes pleine largeur / hauteur sans transformation (les positions se mesurent). */
.places { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

.place { position: absolute; display: flex; pointer-events: none; }

.place > .siege { pointer-events: auto; }

.place--haut { top: 0; left: 0; right: 0; justify-content: center; }

.place--gauche { left: 2px; top: 0; bottom: 22%; align-items: center; }

.place--droite { right: 2px; top: 0; bottom: 22%; align-items: center; justify-content: flex-end; }

.siege {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 92px;
}

.siege-avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  background: var(--jb-avatar-fond);
  color: var(--jb-avatar-texte);
  border: 2px solid var(--jb-avatar-bord);
  font-family: var(--jb-police-titre);
  font-size: calc(var(--avatar) * 0.36);
  line-height: 1;
}

.siege--humain .siege-avatar { background: var(--jb-avatar-humain-fond); color: var(--jb-avatar-humain-texte); }

.siege-initiale { position: relative; z-index: 1; }

.siege-anneau {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 3px solid var(--jb-tour-couleur);
  box-shadow: 0 0 12px var(--jb-tour-halo);
  opacity: 0;
}

.siege--actif .siege-anneau { animation: jb-tour 1.1s ease-in-out infinite alternate; }

@keyframes jb-tour {
  from { opacity: 0.5; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.05); }
}

.minuteur {
  position: absolute;
  left: -6px;
  top: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  overflow: visible;
}

.minuteur-piste { fill: none; stroke: var(--jb-minuteur-piste); stroke-width: 3.5; }

.minuteur-arc {
  fill: none;
  stroke: var(--jb-minuteur-couleur);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.siege--urgent .minuteur-arc { stroke: var(--jb-minuteur-alerte); }

.siege--actif .minuteur:not([hidden]) ~ .siege-initiale { z-index: 1; }

.siege-marque {
  position: absolute;
  left: 50%;
  bottom: -9px;
  z-index: 2;
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--jb-marque-fond);
  color: var(--jb-marque-texte);
  font-family: var(--jb-police-texte);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.siege-infos {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin-top: 4px;
  padding: 3px 9px 4px;
  border-radius: 10px;
  background: var(--jb-siege-fond);
  color: var(--jb-siege-texte);
  line-height: 1.15;
}

.siege-nom { font-weight: 700; font-size: 13px; white-space: nowrap; }

.siege-chiffres {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jb-police-chiffres);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.siege-jetons,
.siege-nbcartes { display: inline-flex; align-items: center; gap: 4px; }

.mini-carte {
  display: inline-block;
  width: 9px;
  height: 12px;
  border-radius: 2px;
  border: 1.5px solid currentColor;
  opacity: 0.85;
}

.siege-badge {
  position: absolute;
  top: calc(var(--avatar) * 0.5 - 13px);
  left: calc(50% + var(--avatar) * 0.5 + 4px);
  z-index: 3;
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--jb-banniere-fond);
  color: var(--jb-banniere-texte);
  font-family: var(--jb-police-chiffres);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
}

.siege-badge--gagnant { background: var(--jb-accent); color: var(--jb-accent-texte); }

.siege-badge--couche { font-family: var(--jb-police-texte); font-size: 12px; }

.siege--droite .siege-badge { left: auto; right: calc(50% + var(--avatar) * 0.5 + 4px); }

.siege--couche .siege-avatar,
.siege--couche .siege-infos { opacity: 0.5; }

.siege-cartes {
  position: relative;
  width: calc(var(--carte-adv) * 2.4);
  height: calc(var(--carte-adv) * 1.4 + 4px);
}

.siege-cartes .mini {
  position: absolute;
  left: 50%;
  top: 2px;
  width: var(--carte-adv);
  height: calc(var(--carte-adv) * 1.4);
  margin-left: calc(var(--carte-adv) * -0.5);
  transform: translateX(calc(var(--k) * var(--carte-adv) * 0.28)) rotate(calc(var(--k) * 5deg));
  transform-origin: 50% 90%;
}

.mini-dos { display: block; width: 100%; height: 100%; }

/* Le joueur humain, sous le tapis. */
.moi {
  grid-area: moi;
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  padding: 2px 10px 0;
}

.moi .siege {
  --avatar: 40px;
  flex-direction: row;
  gap: 10px;
  width: auto;
}

.moi .siege-infos { align-items: flex-start; margin-top: 0; }

.moi .siege-badge { left: calc(var(--avatar) - 6px); top: -12px; }

/* Badges en mots du joueur (Couché, Brûlé) : au-dessus de son avatar, sans couvrir son nom. */
.moi .siege-badge.siege-badge--couche,
.moi .siege-badge.siege-badge--brule { left: calc(var(--avatar) * 0.5); top: -16px; transform: translateX(-50%); }

.main-joueur {
  grid-area: main;
  position: relative;
  z-index: 15;
  height: calc(var(--carte-main) * 1.4 + var(--carte-main) * 0.36);
}

.actions {
  grid-area: actions;
  position: relative;
  z-index: 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 62px;
  padding: 2px 12px 12px;
}

.consigne {
  margin: 0;
  max-width: 560px;
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
  color: var(--jb-texte-doux);
}

.actions-boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.bouton--action { min-height: 46px; padding: 8px 12px; font-size: 15px; }

/* ---------- Cartes ---------- */

.carte {
  --cw: var(--carte-table);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  transform-origin: 50% 50%;
  -webkit-user-select: none;
  user-select: none;
}

.carte--main { --cw: var(--carte-main); }

.carte-corps {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--cw) * 0.07);
}

.carte-corps > svg,
.carte-corps > img { display: block; width: 100%; height: 100%; pointer-events: none; }

.carte--main .carte-corps { box-shadow: var(--jb-carte-ombre); }

/* Cartes posées sur la table : ombre adaptée au fond de table. */
.carte--posee .carte-corps { box-shadow: var(--jb-table-carte-ombre); }

.main-joueur .carte {
  transition: transform calc(190ms * var(--jb-anim, 1)) cubic-bezier(0.2, 0.8, 0.3, 1);
  touch-action: none;
}

.main-joueur .carte.sans-transition { transition: none; }

/* Rangement de la main (glisser de côté, menu) : les cartes rejoignent leur place un peu plus lentement. */
.main--rangement .carte { transition-duration: calc(300ms * var(--jb-anim, 1)); }

.main-joueur .carte--tenue { cursor: grabbing; will-change: transform; }

.carte--tenue .carte-corps { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45); }

.main--active .carte--jouable { cursor: grab; }

.main--active.main--double .carte--jouable { cursor: pointer; }

/* Carte glissée vers la table pour être jouée. */
.main-joueur .carte--glissee { cursor: grabbing; will-change: transform; }

.carte--glissee .carte-corps { box-shadow: 0 12px 22px rgba(0, 0, 0, 0.45); }

/* Place d'arrivée de la carte glissée (dessus de la pile du joueur) : pointillés, puis allumée quand on peut lâcher. */
.depot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 500;
  border: 2px dashed var(--jb-table-surbrillance);
  border-radius: calc(var(--carte-table) * 0.08);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity calc(160ms * var(--jb-anim, 1)) ease;
  animation: jb-depot 1.2s ease-in-out infinite alternate;
}

.depot--allume {
  border-style: solid;
  opacity: 1;
  box-shadow: 0 0 14px 3px var(--jb-table-halo), inset 0 0 12px var(--jb-table-halo);
  animation: none;
}

@keyframes jb-depot {
  from { opacity: 0.35; }
  to { opacity: 0.7; }
}

/* Carte interdite (mode guidé) : opaque mais voilée, pour ne pas laisser voir les cartes dessous. */
.carte--interdite .carte-corps::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--jb-carte-interdite);
}

.carte--jouable:focus-visible { outline: none; }

.carte--jouable:focus-visible .carte-corps,
.carte--levee .carte-corps {
  outline: 3px solid var(--jb-carte-surbrillance);
  outline-offset: 1px;
}

/* Carte qui tient la main dans le pli en cours (puis carte gagnante) : liseré doré comme la carte levée. */
.carte--maitre .carte-corps,
.carte--gagnante .carte-corps {
  outline: 3px solid var(--jb-table-surbrillance);
  outline-offset: 2px;
}

.couche-vol {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.couche-bulles {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

/* ---------- Piles de cartes jouées (une par joueur, devant son siège) ---------- */

/* Même repère que la couche de vol ; chaque pile est un groupe sans taille, ses cartes portent la position. */
.couche-piles {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.pile {
  --ouverture: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.pile:focus-visible { outline: none; }

/* Une pile ouverte (ou qu'on déplie) : les autres s'estompent légèrement (retour du 12/10). */
.couche-piles .pile { transition: opacity calc(200ms * var(--jb-anim, 1)) ease; }

.couche-piles--focus .pile:not(.pile--active) { opacity: 0.58; }

/* Fond Clair : des cartes blanches estompées se fondraient dans la surface (plis finis déjà voilés) ; estompe plus
   légère pour qu'elles restent lisibles. */
:root[data-fond="clair"] .couche-piles--focus .pile:not(.pile--active) { opacity: 0.76; }

.pile .carte {
  pointer-events: auto;
  touch-action: none;
  transition: transform calc(260ms * var(--jb-anim, 1)) cubic-bezier(0.2, 0.8, 0.3, 1);
}

.pile--depliable .carte { cursor: grab; }

.pile--glisse .carte,
.pile--fixe .carte { transition: none; }

html.jb-saisie,
html.jb-saisie * { cursor: grabbing !important; }

.pile:focus-visible .carte:last-child .carte-corps {
  outline: 3px solid var(--jb-focus);
  outline-offset: 2px;
}

/* Cartes des plis finis : voilées tant que la pile est fermée (le pli en cours reste net). */
.pile .carte-corps::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--jb-carte-ancienne);
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(320ms * var(--jb-anim, 1)) ease;
}

.pile .carte--ancienne .carte-corps::after { opacity: calc(1 - var(--ouverture)); }

/* Halo doré de la carte qui tient la main, qui respire comme l'aura du joueur dont c'est le tour. */
.pile .carte--maitre .carte-corps::before {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: calc(var(--cw) * 0.1);
  box-shadow: 0 0 14px 4px var(--jb-table-halo);
  pointer-events: none;
  animation: jb-tour 1.1s ease-in-out infinite alternate;
}

/* Carte qui a remporté son pli : petit trait doré au-dessus, visible quand la pile est dépliée. */
.pile .carte--a-gagne .carte-corps::before {
  content: '';
  position: absolute;
  left: 5%;
  width: 30%;
  top: -7px;
  height: 4px;
  border-radius: 2px;
  background: var(--jb-table-surbrillance);
  opacity: var(--ouverture);
  pointer-events: none;
}

.pile--glisse .carte-corps::after,
.pile--fixe .carte-corps::after { transition: none; }

/* Nombre de cartes de la pile (coin de la carte du dessus), s'efface quand la pile se déplie. */
.pile-compte {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--jb-siege-fond);
  color: var(--jb-siege-texte);
  font-family: var(--jb-police-chiffres);
  font-weight: 700;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
  pointer-events: none;
  opacity: calc(1 - var(--ouverture));
  transition: transform calc(260ms * var(--jb-anim, 1)) cubic-bezier(0.2, 0.8, 0.3, 1);
}

.pile--glisse .pile-compte,
.pile--fixe .pile-compte { transition: none; }

/* ---------- Menu de rangement de la main (appui long, clic droit) ---------- */

.menu-main {
  position: absolute;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 268px;
  max-width: calc(100% - 16px);
  padding: 6px;
  border: 1.5px solid var(--jb-banniere-accent);
  border-radius: 16px;
  background: var(--jb-banniere-fond);
  color: var(--jb-banniere-texte);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 100%;
}

.menu-main-titre {
  margin: 2px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jb-banniere-accent);
}

.menu-main-choix {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.menu-main-choix:hover,
.menu-main-choix:focus { background: rgba(255, 255, 255, 0.1); }

.menu-main-choix:focus-visible { outline: 2px solid var(--jb-focus); outline-offset: -2px; }

.menu-main-libelle { font-weight: 600; font-size: 15px; line-height: 1.2; }

.menu-main-aide { font-size: 12px; line-height: 1.25; opacity: 0.72; }

/* ---------- Dés (cubes 3D, retour du 12/10) ----------
   .de = enveloppe (trajet, hauteur par l'échelle, perspective) ; .de-ombre = ombre sur la table ; .de-cube = cube
   (preserve-3d) : 6 faces (.de-face--1 à 6, points en grille 3 x 3) et 3 plans intérieurs (.de-coeur, couleur des
   arêtes) qui bouchent les coins arrondis. Animations : transform et opacity seulement (des.js). */

.de {
  --de: clamp(30px, calc(var(--carte-main) * 0.46), 54px);
  --de-demi: calc(var(--de) / 2);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--de);
  height: var(--de);
  perspective: calc(var(--de) * 5.5);
  pointer-events: none;
}

.de-ombre {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
  border-radius: 26%;
  background: var(--jb-de-ombre);
  box-shadow: 0 0 calc(var(--de) * 0.14) calc(var(--de) * 0.05) var(--jb-de-ombre);
}

.de-cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.de-face {
  /* Faces dessinées au double de leur taille puis réduites de moitié dans le cube : points et bords restent nets
     une fois le cube tourné (rendu 3D rééchantillonné par la carte graphique). */
  --f: calc(var(--de) * 2);
  position: absolute;
  left: calc(var(--de) * -0.5);
  top: calc(var(--de) * -0.5);
  width: var(--f);
  height: var(--f);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: calc(var(--f) * 0.13);
  border-radius: 21%;
  /* Reflet en haut à gauche, bords assombris en douceur : arêtes arrondies (biseau), sans ombre animée. */
  background: radial-gradient(130% 130% at 28% 22%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%), var(--jb-de-fond);
  box-shadow: inset 0 0 0 2px var(--jb-de-bord), inset 0 0 calc(var(--f) * 0.1) rgba(0, 0, 0, 0.14);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.de-face--1 { transform: translateZ(var(--de-demi)) scale(0.5); }
.de-face--6 { transform: rotateY(180deg) translateZ(var(--de-demi)) scale(0.5); }
.de-face--2 { transform: rotateY(90deg) translateZ(var(--de-demi)) scale(0.5); }
.de-face--5 { transform: rotateY(-90deg) translateZ(var(--de-demi)) scale(0.5); }
.de-face--3 { transform: rotateX(90deg) translateZ(var(--de-demi)) scale(0.5); }
.de-face--4 { transform: rotateX(-90deg) translateZ(var(--de-demi)) scale(0.5); }

.de-coeur {
  position: absolute;
  inset: 2%;
  background: var(--jb-de-arete);
}

.de-coeur--x { transform: rotateX(90deg); }
.de-coeur--y { transform: rotateY(90deg); }

.de-point {
  width: 78%;
  height: 78%;
  margin: auto;
  border-radius: 50%;
  background: var(--jb-de-point);
  /* Points nets, légèrement creusés (ombre intérieure sans flou). */
  box-shadow: inset 0 calc(var(--de) * 0.04) 0 rgba(0, 0, 0, 0.3);
}

.de-point.p1 { grid-area: 1 / 1; }
.de-point.p3 { grid-area: 1 / 3; }
.de-point.p4 { grid-area: 2 / 1; }
.de-point.p5 { grid-area: 2 / 2; }
.de-point.p6 { grid-area: 2 / 3; }
.de-point.p7 { grid-area: 3 / 1; }
.de-point.p9 { grid-area: 3 / 3; }

.de--hors { opacity: 0.35 !important; }

.siege-badge--hors { opacity: 0.45; }

/* ---------- Coupe ---------- */

.coupe-zone {
  position: absolute;
  z-index: 25;
  border-radius: 14px;
  touch-action: none;
  cursor: ew-resize;
}

.coupe-curseur {
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 14px;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--jb-accent);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35);
}

.coupe-etiquette {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 3px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--jb-accent);
  color: var(--jb-accent-texte);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Bulles, annonces, bannière ---------- */

.bulle {
  position: absolute;
  max-width: 214px;
  padding: 7px 12px 8px;
  border: 2.5px solid var(--jb-bulle-bord);
  border-radius: 18px;
  background: var(--jb-bulle-fond);
  color: var(--jb-bulle-texte);
  box-shadow: 3px 3px 0 var(--jb-bulle-bord);
  font-family: var(--jb-police-bulle);
  font-size: 15px;
  line-height: 1.15;
  /* Phrases longues (« Pardon, il faut me couper ça oh.. ») : deux lignes équilibrées plutôt qu'un débordement. */
  white-space: normal;
  text-wrap: balance;
}

/* Petit écran : bulle calée contre le bord, sur deux lignes, pour ne pas couvrir le siège d'en face. */
.bulle--etroite { white-space: normal; }

.bulle-mot { white-space: nowrap; }

.bulle::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  background: var(--jb-bulle-fond);
  border-right: 2.5px solid var(--jb-bulle-bord);
  border-bottom: 2.5px solid var(--jb-bulle-bord);
}

.bulle--bas,
.bulle--gauche { transform-origin: 18px 110%; }

.bulle--bas::after,
.bulle--gauche::after { left: 16px; bottom: -8px; transform: rotate(45deg) skew(8deg, 8deg); }

.bulle--droite { transform-origin: calc(100% - 18px) 110%; }

.bulle--droite::after { right: 16px; bottom: -8px; transform: rotate(45deg) skew(8deg, 8deg); }

.bulle--haut { transform-origin: -10px 18px; }

.bulle--haut::after { left: -8px; top: 12px; transform: rotate(135deg) skew(8deg, 8deg); }

.annonce {
  position: absolute;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--jb-banniere-fond);
  color: var(--jb-banniere-texte);
  border: 2px solid var(--jb-banniere-accent);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

.banniere {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
  transition: top calc(220ms * var(--jb-anim, 1)) ease;
}

.banniere-boite {
  max-width: min(96%, 420px);
  padding: 16px 18px 18px;
  border: 2px solid var(--jb-banniere-accent);
  border-radius: 18px;
  background: var(--jb-banniere-fond);
  color: var(--jb-banniere-texte);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.banniere-titre {
  margin: 0;
  font-family: var(--jb-police-titre);
  /* Une seule ligne même sur un écran de 360 px : la bannière tient entre le siège du joueur et les boutons. */
  font-size: clamp(16px, calc(var(--app-l, 420px) * 0.048), 20px);
  line-height: 1.15;
  color: var(--jb-banniere-accent);
}

.banniere-texte { margin: 6px 0 0; font-size: 15px; }

/* ---------- Mises : pièces d'or (retours du 12/10) ----------
   Tas de pièces devant chaque joueur, à gauche de sa pile (place : piles.js posTas ; dessin : mises.js) ; pièces
   en dégradés CSS (aucune image), couleurs --jb-piece-* ; montant lisible dessous (--jb-mise-*). */

.piece {
  flex: none;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--jb-piece-reflet) 0 15%, var(--jb-piece-or) 44%, var(--jb-piece-sombre) 100%);
  box-shadow: inset 0 0 0 1.5px var(--jb-piece-bord), inset 0 0 0 4px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.piece--vol { position: absolute; left: 0; top: 0; z-index: 400; }

.pot-pieces { position: relative; flex: none; width: 27px; height: 22px; }

.pot-pieces .piece { position: absolute; width: 17px; height: 17px; }

.pot-pieces .piece:nth-child(1) { left: 0; top: 5px; }

.pot-pieces .piece:nth-child(2) { left: 9px; top: 0; }

.pot-pieces .piece:nth-child(3) { left: 10px; top: 6px; }

.mise {
  --piece: 22px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
}

.mise-tas {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 16px;
  transform-origin: 50% 100%;
}

/* Pièce vue de côté dans le tas : ellipse dorée avec sa tranche ; deux colonnes qui se chevauchent. */
.piece--tas {
  position: absolute;
  left: calc(50% - var(--piece) * 0.66 + var(--c) * var(--piece) * 0.52);
  bottom: calc(var(--i) * var(--piece) * 0.17 + 2px - var(--c) * 1px);
  width: var(--piece);
  height: calc(var(--piece) * 0.44);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--jb-piece-reflet) 0%, var(--jb-piece-or) 40%, var(--jb-piece-sombre) 100%);
  box-shadow: inset 0 0 0 1px var(--jb-piece-bord), 0 calc(var(--piece) * 0.09) 0 var(--jb-piece-tranche), 0 calc(var(--piece) * 0.12) 2px rgba(0, 0, 0, 0.32);
}

.mise-montant {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  min-width: 24px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--jb-mise-fond);
  color: var(--jb-mise-texte);
  font-family: var(--jb-police-chiffres);
  font-weight: 700;
  font-size: 13px;
  line-height: 15px;
  text-align: center;
  white-space: nowrap;
}

/* ---------- Annonces géantes (retours du 12/10), façon jeu de combat d'arcade ---------- */

.annonce-geante {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5%;
  pointer-events: none;
  overflow: hidden;
}

.annonce-geante-voile { position: absolute; inset: 0; background: var(--jb-annonce-voile); }

.annonce-geante-boite { position: relative; max-width: 100%; text-align: center; }

.annonce-geante-texte {
  --o: 0.055em;
  margin: 0;
  font-family: var(--jb-annonce-police);
  font-weight: 900;
  font-size: clamp(38px, calc(var(--app-l, 420px) * 0.13), 108px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--jb-annonce-texte);
  text-wrap: balance;
  transform: skewX(-7deg);
  text-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 var(--jb-annonce-contour), var(--o) calc(var(--o) * -1) 0 var(--jb-annonce-contour),
    calc(var(--o) * -1) var(--o) 0 var(--jb-annonce-contour), var(--o) var(--o) 0 var(--jb-annonce-contour),
    0 calc(var(--o) * -1.2) 0 var(--jb-annonce-contour), 0 calc(var(--o) * 1.2) 0 var(--jb-annonce-contour),
    calc(var(--o) * -1.2) 0 0 var(--jb-annonce-contour), calc(var(--o) * 1.2) 0 0 var(--jb-annonce-contour),
    0 calc(var(--o) * 2.6) 0 var(--jb-annonce-contour), 0 0 0.45em var(--jb-annonce-lueur);
}

/* Phrase longue (lancer des dés) : plus petite, sur plusieurs lignes équilibrées. */
.annonce-geante--longue .annonce-geante-texte {
  --o: 0.06em;
  font-size: clamp(22px, calc(var(--app-l, 420px) * 0.064), 52px);
  line-height: 1.16;
}

.annonce-geante-sous {
  display: inline-block;
  margin: 12px 0 0;
  padding: 3px 14px 4px;
  border-radius: 999px;
  background: var(--jb-annonce-accent);
  color: var(--jb-annonce-accent-texte);
  font-family: var(--jb-police-texte);
  font-weight: 800;
  font-size: clamp(14px, calc(var(--app-l, 420px) * 0.04), 22px);
  line-height: 1.25;
  transform: skewX(-7deg);
  box-shadow: 0 3px 0 var(--jb-annonce-contour);
}

.annonce-geante--feu { --jb-annonce-lueur: rgba(255, 96, 24, 0.85); --jb-annonce-accent: #ff6a2a; --jb-annonce-accent-texte: #ffffff; }

.annonce-geante--or { --jb-annonce-lueur: rgba(255, 215, 110, 0.85); }

.annonce-geante--flop { --jb-annonce-lueur: rgba(124, 200, 255, 0.8); --jb-annonce-accent: #7cc8ff; --jb-annonce-accent-texte: #08223a; }

.annonce-geante--tchaka { --jb-annonce-lueur: rgba(57, 217, 122, 0.8); --jb-annonce-accent: #39d97a; --jb-annonce-accent-texte: #062b14; }

.annonce-geante--cora { --jb-annonce-lueur: rgba(255, 176, 46, 0.85); }

/* ---------- Brûlage : la main brûle (flammes CSS, aucune image ni filtre) ---------- */

.feu {
  --fl: 30px;
  position: absolute;
  z-index: 45;
  pointer-events: none;
}

.feu-lueur {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -4%;
  height: 80%;
  border-radius: 50% 50% 20% 20%;
  background: radial-gradient(ellipse at 50% 100%, var(--jb-feu-lueur) 0%, rgba(255, 80, 0, 0) 70%);
  animation: jb-lueur calc(380ms * var(--jb-anim, 1)) ease-in-out infinite alternate;
}

.flamme {
  position: absolute;
  left: var(--x);
  bottom: 2%;
  width: var(--fl);
  height: calc(var(--fl) * 1.9);
  margin-left: calc(var(--fl) * -0.5);
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 78%, var(--jb-feu-coeur) 0%, var(--jb-feu-flamme) 34%, var(--jb-feu-bord) 62%, rgba(200, 30, 0, 0) 74%);
  transform-origin: 50% 100%;
  animation: jb-flamme calc(560ms * var(--jb-anim, 1)) ease-in-out infinite alternate;
  animation-delay: var(--d);
}

@keyframes jb-flamme {
  from { transform: translateY(0) scale(calc(var(--s) * 0.86), calc(var(--s) * 0.78)); opacity: 0.78; }
  to { transform: translateY(-14%) scale(calc(var(--s) * 1.04), calc(var(--s) * 1.16)); opacity: 1; }
}

@keyframes jb-lueur {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

/* Cartes qui noircissent dans le feu (main du joueur, petites cartes d'un adversaire). */
.carte--brule .carte-corps::before,
.siege-cartes.carte--brule .mini::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(0deg, rgba(40, 10, 0, 0.78) 0%, rgba(170, 50, 0, 0.38) 48%, rgba(0, 0, 0, 0) 82%);
  pointer-events: none;
}

.siege-cartes .mini { border-radius: 2px; }

/* Brûleur : sa main reste visible de tous, semi-transparente (DR 12/10). FLOP : main montrée à tous. */
.main--brulee .carte { opacity: 0.5; }

.main--montree::before,
.main--brulee::before {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 60;
  transform: translateX(-50%);
  padding: 1px 10px;
  border-radius: 999px;
  background: #2f6fb4;
  color: #ffffff;
  font-family: var(--jb-police-texte);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  pointer-events: none;
}

.main--montree::before { content: 'Main montrée à tous'; }

.main--brulee::before { content: 'Brûlée : main montrée à tous'; background: #b3261e; }

/* Portrait : le siège du joueur est juste au-dessus de sa main ; étiquettes de la main et des cartes en dessous,
   pour ne jamais couvrir son badge « La main ». */
.table[data-disposition="portrait"] .main--montree::before,
.table[data-disposition="portrait"] .main--brulee::before { top: auto; bottom: 0; }

.table[data-disposition="portrait"] .main-joueur .carte-etiquette { top: auto; bottom: -8px; }

/* ---------- Cora frappé : onde de choc, carte soulevée ---------- */

.onde {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 25;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 18px rgba(255, 220, 150, 0.6), inset 0 0 12px rgba(255, 220, 150, 0.5);
  pointer-events: none;
}

.carte--frappee .carte-corps { box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5); }

.bouton--frapper {
  position: absolute;
  z-index: 52;
  min-height: 44px;
  max-width: 128px;
  padding: 6px 10px;
  border: 2px solid var(--jb-frapper-bord);
  border-radius: 12px;
  background: var(--jb-frapper-fond);
  color: var(--jb-frapper-texte);
  font-family: var(--jb-annonce-police);
  font-size: 14px;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: normal;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), 0 0 16px rgba(255, 80, 40, 0.55);
  animation: jb-frapper 0.7s ease-in-out infinite alternate;
}

@keyframes jb-frapper {
  from { transform: scale(1) rotate(-2deg); }
  to { transform: scale(1.07) rotate(2deg); }
}

/* ---------- Choix de cartes (roll, réponse à un roll, « pour toi ») ---------- */

.main--selection .carte { cursor: pointer; }

.carte--choisie .carte-corps {
  outline: 3px solid var(--jb-carte-surbrillance);
  outline-offset: 1px;
}

.carte--choisie[data-ordre]::after {
  content: attr(data-ordre);
  position: absolute;
  top: -9px;
  right: -7px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--jb-accent);
  color: var(--jb-accent-texte);
  font-family: var(--jb-police-chiffres);
  font-weight: 800;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

/* Étiquette sur une carte de la main : « Pour O2 », « Connue » (roll coupé), « Montrée » (FLOP). */
.carte-etiquette {
  position: absolute;
  left: 50%;
  top: -9px;
  z-index: 2;
  transform: translateX(-50%);
  padding: 0 7px;
  border-radius: 999px;
  background: var(--jb-banniere-fond);
  color: var(--jb-banniere-accent);
  font-family: var(--jb-police-texte);
  font-weight: 700;
  font-size: 11px;
  line-height: 17px;
  white-space: nowrap;
  pointer-events: none;
}

.carte-etiquette--carte--pourtoi { background: var(--jb-accent); color: var(--jb-accent-texte); }

.carte-etiquette--carte--connue,
.carte-etiquette--carte--montree { background: #2f6fb4; color: #ffffff; }

.carte--pourtoi .carte-corps { outline: 2px dashed var(--jb-accent); outline-offset: 2px; }

/* ---------- Bouton réglable (relance) : − montant + ---------- */

.choix-pas { display: inline-flex; align-items: stretch; }

.choix-pas > .bouton--action { border-radius: 0; }

.bouton--pas {
  min-width: 40px;
  min-height: 46px;
  padding: 0 8px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.choix-pas > .bouton--pas:first-child { border-radius: var(--jb-bouton-rayon) 0 0 var(--jb-bouton-rayon); }

.choix-pas > .bouton--pas:last-child { border-radius: 0 var(--jb-bouton-rayon) var(--jb-bouton-rayon) 0; }

.bouton--pas:disabled { opacity: 0.35; }

.choix-pas--fixe > .bouton--pas { display: none; }

.choix-pas--fixe > .bouton--action { border-radius: var(--jb-bouton-rayon); }

/* ---------- Full : étoile privée (guidé) et bouton « Valider », ou « Full » (expert) ---------- */

.full {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  padding: 3px 4px 3px 9px;
  border-radius: 999px;
  background: var(--jb-siege-fond);
  color: var(--jb-siege-texte);
  font-family: var(--jb-police-chiffres);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.full--expert { padding: 2px; background: none; }

.full-etoile {
  display: inline-block;
  color: var(--jb-full-etoile);
  font-size: 21px;
  line-height: 1;
  text-shadow: 0 0 9px var(--jb-full-etoile);
  animation: jb-etoile 1.1s ease-in-out infinite alternate;
}

@keyframes jb-etoile {
  from { transform: scale(0.9) rotate(-8deg); }
  to { transform: scale(1.12) rotate(8deg); }
}

.full-texte b { font-size: 17px; color: var(--jb-full-etoile); }

.full--reclame { padding-right: 11px; }

.bouton--full { min-height: 36px; padding: 4px 13px; font-size: 14px; }

/* ---------- Sièges : éliminé (brûlage), visé par un « pour toi », cartes publiques ---------- */

.siege--elimine .siege-avatar,
.siege--elimine .siege-infos { opacity: 0.55; }

.siege-badge--brule { background: #b3261e; color: #ffffff; font-family: var(--jb-police-texte); font-size: 12px; }

/* Siège sorti de table (R-D6, dette) : grisé pour le reste de la partie, badge « Parti ». */
.siege--parti .siege-avatar,
.siege--parti .siege-infos { opacity: 0.4; }

.siege-badge--parti { font-family: var(--jb-police-texte); font-size: 12px; }

.moi .siege-badge.siege-badge--parti { left: calc(var(--avatar) * 0.5); top: -16px; transform: translateX(-50%); }

.table[data-disposition="paysage"] .place--haut .siege-badge.siege-badge--parti { left: auto; right: calc(100% + 6px); top: calc(var(--avatar) * 0.5 - 11px); }

.siege-badge--pourtoi { background: var(--jb-accent); color: var(--jb-accent-texte); font-family: var(--jb-police-texte); font-size: 11px; }

/* Paysage, siège du haut (avatar, plaque et cartes en ligne) : les badges en mots passent à gauche de l'avatar, sans
   couvrir le nom. */
.table[data-disposition="paysage"] .place--haut .siege-badge.siege-badge--pourtoi,
.table[data-disposition="paysage"] .place--haut .siege-badge.siege-badge--brule,
.table[data-disposition="paysage"] .place--haut .siege-badge.siege-badge--couche { left: auto; right: calc(100% + 6px); top: calc(var(--avatar) * 0.5 - 11px); }

.siege-avatar--cible { cursor: pointer; }

.siege-avatar--cible::after {
  content: '';
  position: absolute;
  inset: -10px;
  z-index: 3;
  border-radius: 50%;
  border: 3px dashed var(--jb-accent);
  animation: jb-tourne 4s linear infinite;
}

@keyframes jb-tourne {
  to { transform: rotate(360deg); }
}

/* Cartes de la main d'un adversaire connues de tous : face visible, plus grandes et plus écartées (index lisible). */
.siege-cartes--publiques { --carte-adv: calc(var(--carte-table) * 0.46); width: calc(var(--carte-adv) * 3.3); }

.siege-cartes--publiques .mini { transform: translateX(calc(var(--k) * var(--carte-adv) * 0.56)) rotate(calc(var(--k) * 3deg)); }

.mini--face { border-radius: calc(var(--carte-adv) * 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }

.mini--face > svg { display: block; width: 100%; height: 100%; }

.mini--connue { box-shadow: 0 0 0 1.5px #7cc8ff, 0 1px 3px rgba(0, 0, 0, 0.45); }

.mini--brulee { opacity: 0.55; }

/* ---------- Cartes « pour toi » en attente, face cachée, près de la pile de leur joueur ---------- */

.carte--attente .carte-corps { box-shadow: 0 0 0 3px var(--jb-accent), var(--jb-table-carte-ombre); }

.carte--attente::after {
  content: attr(data-pour);
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  padding: 0 10px;
  border-radius: 999px;
  background: var(--jb-accent);
  color: var(--jb-accent-texte);
  font-family: var(--jb-police-texte);
  font-weight: 800;
  font-size: 19px;
  line-height: 28px;
  white-space: nowrap;
}

/* Carte « pour toi » du joueur reprenable (à son tour) : la toucher la reprend en main (DR 12/10 soir) */
.carte--attente.carte--reprenable { pointer-events: auto; cursor: pointer; }
.carte--attente.carte--reprenable .carte-corps {
  outline: 3px solid var(--jb-accent);
  outline-offset: 5px;
  animation: reprenable-pulse 1.1s ease-in-out infinite alternate;
}
.carte--attente.carte--reprenable:focus-visible { outline: none; }
.carte--attente.carte--reprenable:focus-visible .carte-corps { outline-color: var(--jb-focus); animation: none; }
.carte--attente.carte--reprenable::after { content: '↩ ' attr(data-pour); }

@keyframes reprenable-pulse {
  from { outline-color: var(--jb-accent); }
  to { outline-color: transparent; }
}

/* ---------- Plateau du roll ---------- */

.roll-plateau {
  position: absolute;
  z-index: 18;
  border: 1.5px solid var(--jb-roll-bord);
  border-radius: 16px;
  background: var(--jb-roll-fond);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.roll-titre {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 3px;
  margin: 0;
  overflow: hidden;
  color: var(--jb-banniere-texte);
  font-family: var(--jb-police-texte);
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.roll-titre b { color: var(--jb-banniere-accent); }

.roll-nom {
  position: absolute;
  left: 8px;
  transform: translateY(-50%);
  color: var(--jb-banniere-texte);
  font-family: var(--jb-police-chiffres);
  font-weight: 800;
  font-size: 13px;
  text-align: center;
}

.roll-nom--meneur { color: var(--jb-banniere-accent); }

.roll-colonne { position: absolute; border-radius: 9px; }

.roll-colonne--jouee { background: rgba(255, 255, 255, 0.07); }

.roll-colonne--coupee { background: rgba(255, 90, 60, 0.2); box-shadow: inset 0 0 0 2px rgba(255, 120, 90, 0.85); }

.roll-coupe {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -4px;
  z-index: 2;
  transform: translate(-50%, 100%) rotate(-5deg);
  padding: 1px 8px;
  border-radius: 999px;
  background: #d4382a;
  color: #ffffff;
  font-family: var(--jb-police-texte);
  font-weight: 800;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.roll-colonne--coupee .roll-coupe { display: block; }

.carte--coupee-roll .carte-corps { box-shadow: 0 0 0 3px #e0442f, var(--jb-table-carte-ombre); }

/* Tampon « Coupé ! » sur la colonne coupée du roll (couche des bulles, par-dessus les cartes). */
.roll-tampon {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%) rotate(-9deg);
  padding: 2px 10px;
  border: 2px solid #ffffff;
  border-radius: 8px;
  background: #d4382a;
  color: #ffffff;
  font-family: var(--jb-annonce-police);
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.carte--maitre-roll .carte-corps {
  outline: 3px solid var(--jb-table-surbrillance);
  outline-offset: 2px;
  box-shadow: 0 0 14px 4px var(--jb-table-halo);
}

.carte--privee .carte-corps { outline: 2px dashed rgba(255, 255, 255, 0.75); outline-offset: 1px; }

/* ---------- Dés sur téléphone (retour du 12/10) : plus petits en portrait comme en paysage ---------- */

@media (max-width: 480px), (max-height: 480px) {
  .de { --de: clamp(22px, calc(var(--carte-main) * 0.36), 30px); }
}

/* ---------- Table en paysage (vraie disposition, pas un portrait étiré) ---------- */

.table[data-disposition="paysage"] {
  --avatar: 42px;
  --marge-haut: 14px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "scene scene scene" "moi main actions";
}

.table[data-disposition="paysage"] .table-barre {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(var(--marge-haut) - 2px) 12px 8px;
  pointer-events: none;
}

.table[data-disposition="paysage"] .table-barre > * { pointer-events: auto; }

.table[data-disposition="paysage"] .table-info {
  position: absolute;
  left: 64px;
  top: calc(var(--marge-haut) + 10px);
}

/* Le siège d'en face est dans la scène, en haut : la marge l'éloigne du bord (anneau, badge, minuteur compris). */
.table[data-disposition="paysage"] .scene { margin-top: var(--marge-haut); }

.table[data-disposition="paysage"] .tapis {
  top: calc(var(--avatar) * 0.5 + 8px);
  bottom: calc(var(--carte-main) * 0.3);
  left: 74px;
  right: 74px;
}

.table[data-disposition="paysage"] .tapis-ancre { top: 50%; }

.table[data-disposition="paysage"] .pot { top: 50%; }

.table[data-disposition="paysage"] .place--gauche,
.table[data-disposition="paysage"] .place--droite { bottom: 6%; }

.table[data-disposition="paysage"] .place--haut .siege { flex-direction: row; width: auto; gap: 8px; align-items: flex-start; }

.table[data-disposition="paysage"] .place--haut .siege-infos { margin-top: 2px; }

.table[data-disposition="paysage"] .place--haut .siege-badge { top: -6px; left: calc(var(--avatar) - 4px); }

.table[data-disposition="paysage"] .moi {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 16px 14px;
}

.table[data-disposition="paysage"] .main-joueur {
  width: calc(var(--carte-main) * 4.7);
  height: calc(var(--carte-main) * 1.4 + 14px);
  margin-top: calc(var(--carte-main) * -0.3);
}

.table[data-disposition="paysage"] .actions {
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 0;
  padding: 0 14px 18px 6px;
}

.table[data-disposition="paysage"] .consigne { text-align: right; font-size: 13px; }

.table[data-disposition="paysage"] .actions-boutons { justify-content: flex-end; flex-wrap: wrap; gap: 6px; }

.table[data-disposition="paysage"] .bouton--pas { min-width: 30px; min-height: 40px; padding: 0 4px; font-size: 18px; }

/* Paysage : boutons de mise compacts. Suivre et Se coucher sur une ligne, Relancer réglable dessous : deux lignes au
   plus dans la colonne de droite, le tapis garde sa hauteur sur un téléphone bas (780 x 360). */
.table[data-disposition="paysage"] .actions-boutons .bouton--action { min-height: 40px; padding: 5px 10px; }

.table[data-disposition="paysage"] .actions-boutons > .choix-pas { order: 2; }

/* Téléphone en paysage (application basse) : boutons et marges resserrés. */
.app--basse .table[data-disposition="paysage"] .actions { padding-bottom: 16px; }

.app--basse .table[data-disposition="paysage"] .actions-boutons .bouton--action,
.app--basse .table[data-disposition="paysage"] .bouton--pas { min-height: 36px; }

.table[data-disposition="paysage"] .bouton--action { min-height: 44px; padding: 6px 11px; font-size: 14px; white-space: nowrap; }

/* Grands écrans : un peu plus d'air autour des sièges. */
@media (min-width: 900px) and (min-height: 700px) {
  .table,
  .table[data-disposition="paysage"] { --avatar: 54px; }
  .siege { width: 110px; }
  .siege-nom { font-size: 15px; }
  .siege-chiffres { font-size: 16px; }
  .consigne { font-size: 16px; }
  .bulle { font-size: 18px; max-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .siege--actif .siege-anneau { animation: none; opacity: 1; }
  .pile .carte,
  .pile-compte,
  .pile .carte-corps::after { transition-duration: 0.12s; }
  .pile .carte--maitre .carte-corps::before { animation: none; }
  .couche-piles .pile { transition-duration: 0.12s; }
  .depot { animation: none; }
  .flamme,
  .feu-lueur,
  .full-etoile,
  .bouton--frapper,
  .carte--attente.carte--reprenable .carte-corps,
  .siege-avatar--cible::after { animation: none; }
  .bouton,
  .interrupteur,
  .interrupteur::after { transition: none; }
}

/* ---------- Jouer en ligne : écran En ligne, salon, table en ligne (docs/EN_LIGNE.md § 2) ---------- */

.champ {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1.5px solid var(--jb-bouton-bord);
  border-radius: 12px;
  background: var(--jb-choix-fond);
  color: var(--jb-texte);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
}

.champ:focus { outline: 3px solid var(--jb-focus); outline-offset: 1px; }

.champ--code {
  max-width: 220px;
  font-family: var(--jb-police-chiffres);
  font-size: 24px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
}

.champ::placeholder { color: var(--jb-texte-doux); font-weight: 400; letter-spacing: normal; }

.enligne-action { margin: 8px 0 0; }

.enligne-action .bouton { width: 100%; }

.enligne-erreur {
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--jb-panneau-fond);
  border: 1.5px solid var(--jb-minuteur-alerte);
  color: var(--jb-texte);
  font-size: 14px;
  font-weight: 500;
}

.salon-code {
  margin: 4px 0 10px;
  font-family: var(--jb-police-chiffres);
  font-size: clamp(34px, 11vw, 52px);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-align: center;
  color: var(--jb-accent);
  user-select: all;
  -webkit-user-select: all;
}

.salon-sieges { list-style: none; margin: 0; padding: 0; }

.salon-siege {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 0;
  border-top: 1px solid var(--jb-ligne);
  font-weight: 600;
}

.salon-siege:first-child { border-top: 0; }

.salon-siege--libre .salon-nom { color: var(--jb-texte-doux); font-weight: 400; }

.salon-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.salon-point {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--jb-texte-doux);
  opacity: 0.5;
}

.salon-point--ok { background: #35c46a; opacity: 1; }

.salon-point--aucun { visibility: hidden; }

.salon-pret { font-size: 12px; font-weight: 700; color: var(--jb-texte-doux); text-transform: uppercase; letter-spacing: 0.06em; }

.salon-pret--ok { color: #35c46a; }

.etiquette--moi { background: var(--jb-accent); color: var(--jb-accent-texte); }

.salon-actions { display: grid; gap: 10px; }

.salon-raison { text-align: center; margin-top: 2px; }

.salon-reglages { line-height: 1.5; }

/* Table en ligne : pastille du code, statut des sièges (Hôte, Absent), point de connexion, siège absent grisé. */
.pastille-table {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--jb-pastille-fond);
  color: var(--jb-pastille-texte);
  font-family: var(--jb-police-chiffres);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.siege-nom { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }

.siege-connexion {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jb-siege-texte);
  opacity: 0.35;
}

.siege-connexion--ok { background: #35c46a; opacity: 1; }

.siege-statut {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jb-accent);
  white-space: nowrap;
}

.siege-statut--absent { color: var(--jb-minuteur-alerte); }

.siege--absent .siege-avatar { opacity: 0.55; }

/* Boîte de confirmation par-dessus la table (quitter une table en ligne). */
.dialogue {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}

.dialogue-boite {
  width: min(100%, 360px);
  padding: 18px 18px 16px;
  border: 2px solid var(--jb-banniere-accent);
  border-radius: 18px;
  background: var(--jb-banniere-fond);
  color: var(--jb-banniere-texte);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.dialogue-titre { margin: 0; font-family: var(--jb-police-titre); font-size: 20px; color: var(--jb-banniere-accent); }

.dialogue-texte { margin: 8px 0 14px; font-size: 14px; line-height: 1.4; }

.dialogue-boutons { display: grid; gap: 8px; }