/* Thème « Toghu » — la tenue de cérémonie des Grassfields (Nord-Ouest du Cameroun) : velours noir profond,
   bandes brodées serrées aux fils rouge, jaune, orange, blanc et vert (dents de scie, losanges, zigzags).
   Contrat de thème : CLAUDE.md. 1) propriétés --jb-* ; 2) déclinaison des 4 fonds de table ; 3) décor.
   Tout est statique (aucun fond animé) ; seules les cartes et le col de l'accueil ont une entrée animée
   (transform, opacity), neutralisée sous prefers-reduced-motion. */

[data-theme="toghu"] {
  /* Fils de broderie (mêmes teintes que themes/toghu.js) */
  --toghu-jaune: #f5b820;
  --toghu-rouge: #d02c22;
  --toghu-orange: #f07a1e;
  --toghu-blanc: #f6eedb;
  --toghu-vert: #2c9a58;
  --toghu-velours: #130e0b;
  /* Bande brodée horizontale : dents jaunes sur fond rouge (triangles alternés), tuile 12 x 7 */
  --toghu-dents: conic-gradient(from 139.4deg at 50% 0, var(--toghu-jaune) 0 81.2deg, var(--toghu-rouge) 0);

  /* Polices */
  --jb-police-titre: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --jb-police-texte: 'Rubik', 'Segoe UI', Arial, sans-serif;
  --jb-police-chiffres: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --jb-police-bulle: 'Lilita One', 'Trebuchet MS', sans-serif;

  /* Application : velours noir, reflet chaud en haut */
  --jb-fond-couleur: #0e0a08;
  --jb-fond:
    radial-gradient(90% 55% at 50% -6%, rgba(245, 184, 32, 0.08) 0%, transparent 70%),
    radial-gradient(130% 80% at 50% 0%, #2a1f18 0%, #17110d 52%, #0c0907 100%);
  --jb-texte: #f6eedb;
  --jb-texte-doux: #cdbda3;
  --jb-accent: #f5b820;
  --jb-accent-texte: #1d1004;
  --jb-ligne: rgba(245, 220, 170, 0.13);
  --jb-focus: #ffd34d;

  /* Titre d'accueil : fil d'or, relief rouge puis ombre du velours */
  --jb-titre-couleur: #f5b820;
  --jb-titre-ombre: 0 3px 0 #b3241b, 0 6px 0 rgba(0, 0, 0, 0.55);
  --jb-titre-espacement: 0.05em;
  --jb-sous-titre-couleur: #f39645;

  /* Panneaux : velours un peu plus clair, ourlet brodé en haut */
  --jb-panneau-fond:
    linear-gradient(var(--toghu-jaune), var(--toghu-jaune)) 0 7px / 100% 1.5px no-repeat,
    var(--toghu-dents) 0 0 / 12px 7px repeat-x,
    linear-gradient(180deg, rgba(255, 236, 200, 0.07) 0%, rgba(255, 236, 200, 0.035) 100%);
  --jb-panneau-bord: rgba(245, 184, 32, 0.26);
  --jb-panneau-rayon: 14px;

  /* Boutons : velours bordé d'un fil d'or ; principal en or avec un ourlet de dents rouges */
  --jb-bouton-fond: linear-gradient(180deg, #2d221b 0%, #1a1310 100%);
  --jb-bouton-texte: #f6eedb;
  --jb-bouton-bord: rgba(245, 184, 32, 0.6);
  --jb-bouton-ombre: 0 2px 0 #050302;
  --jb-bouton-rayon: 12px;
  --jb-bouton-principal-fond:
    conic-gradient(from 135deg at 50% 0, var(--toghu-rouge) 0 90deg, transparent 0) 0 100% / 10px 5px repeat-x,
    linear-gradient(180deg, #ffd04d 0%, #f2ab17 100%);
  --jb-bouton-principal-texte: #1d1004;
  --jb-bouton-principal-bord: #ffe08a;

  /* Contrôles des paramètres */
  --jb-choix-fond: rgba(255, 236, 200, 0.07);
  --jb-choix-actif-fond: #f5b820;
  --jb-choix-actif-texte: #1d1004;
  --jb-interrupteur-fond: rgba(255, 236, 200, 0.2);
  --jb-interrupteur-actif: #2c9a58;

  /* Table, fond « Tapis » : velours vert émeraude (fil vert du Toghu), bord de velours noir passepoilé d'or,
     coutures rouge et or, point de couture ivoire (liseré en tirets, voir plus bas). */
  --jb-table-fond:
    radial-gradient(ellipse 60% 42% at 34% 26%, rgba(255, 255, 255, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse at 50% 44%, #227652 0%, #185c3f 52%, #0f3f2b 100%);
  --jb-table-bord: 8px solid #110c09;
  --jb-table-ombre:
    0 0 0 1.5px rgba(245, 184, 32, 0.75),
    inset 0 0 0 2px #d02c22,
    inset 0 0 0 3.5px #f5b820,
    inset 0 12px 36px rgba(0, 0, 0, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.5);
  --jb-table-rayon: 999px;
  --jb-table-texte: #fff6e2;
  --jb-table-voile: rgba(8, 5, 3, 0.42);
  --jb-table-liseret: rgba(246, 238, 219, 0.36);
  --jb-table-carte-ombre: 0 2px 6px rgba(0, 0, 0, 0.5);
  --jb-table-halo: rgba(255, 212, 100, 0.58);
  --jb-table-surbrillance: #ffd062;

  /* Sièges : avatars en médaillon brodé (disque de velours, fil d'or, bordure rouge) */
  --jb-avatar-fond: radial-gradient(circle closest-side, #2e231b 0 70%, var(--toghu-jaune) 71% 78%, #0b0806 79% 83%, var(--toghu-rouge) 84% 100%);
  --jb-avatar-texte: #f5b820;
  --jb-avatar-bord: #0b0806;
  --jb-avatar-humain-fond: radial-gradient(circle closest-side, #ffcb3d 0 72%, #0b0806 73% 79%, var(--toghu-rouge) 80% 100%);
  --jb-avatar-humain-texte: #1d1004;
  --jb-siege-fond: rgba(14, 10, 7, 0.84);
  --jb-siege-texte: #f6eedb;
  --jb-marque-fond: #f5b820;
  --jb-marque-texte: #1d1004;

  /* Tour de jeu et minuteur */
  --jb-tour-couleur: #ffcf4a;
  --jb-tour-halo: rgba(255, 200, 70, 0.55);
  --jb-minuteur-couleur: #4cc47e;
  --jb-minuteur-alerte: #ff5a3c;
  --jb-minuteur-piste: rgba(246, 238, 219, 0.18);

  /* Bulles */
  --jb-bulle-fond: #fbf4e4;
  --jb-bulle-texte: #1d120b;
  --jb-bulle-bord: #1d120b;

  /* Jetons : rouge cerclé d'or */
  --jb-jeton-couleur: #c8261d;
  --jb-jeton-liseret: #ffd45a;

  /* Dés : ivoire, points de velours, arêtes au fil d'or */
  --jb-de-fond: #fbf4e4;
  --jb-de-point: #1d120b;
  --jb-de-bord: rgba(0, 0, 0, 0.32);
  --jb-de-arete: #d8b45e;
  --jb-de-ombre: rgba(0, 0, 0, 0.5);

  /* Bannière, annonces, pastilles */
  --jb-banniere-fond: rgba(17, 12, 9, 0.95);
  --jb-banniere-texte: #fff8ea;
  --jb-banniere-accent: #f5b820;
  --jb-pastille-fond: rgba(245, 184, 32, 0.16);
  --jb-pastille-texte: #f8cf5f;

  /* Cartes */
  --jb-carte-ombre: 0 2px 5px rgba(0, 0, 0, 0.5);
  --jb-carte-surbrillance: #ffd062;
  --jb-carte-interdite: rgba(14, 10, 7, 0.58);
  --jb-carte-ancienne: rgba(14, 10, 7, 0.42);

  color-scheme: dark;
}

/* ---------- Fonds de table (Paramètres > Affichage > Fond de table) ----------
   Même bord de velours noir et mêmes coutures rouge et or partout : c'est la signature du thème ; seule la
   surface change. */

/* Nuit : le velours noir du Toghu, reflet chaud et fin quadrillage de losanges brodé ton sur ton. */
[data-theme="toghu"][data-fond="nuit"] {
  --jb-table-fond:
    radial-gradient(ellipse 60% 42% at 34% 26%, rgba(255, 236, 200, 0.07) 0%, transparent 70%),
    repeating-linear-gradient(60deg, transparent 0 21px, rgba(245, 184, 32, 0.05) 21px 22px),
    repeating-linear-gradient(-60deg, transparent 0 21px, rgba(245, 184, 32, 0.05) 21px 22px),
    radial-gradient(ellipse at 50% 45%, #2a2019 0%, #18120e 55%, #0c0806 100%);
  --jb-table-bord: 8px solid #050302;
  --jb-table-ombre:
    0 0 0 1.5px rgba(245, 184, 32, 0.8),
    inset 0 0 0 2px #d02c22,
    inset 0 0 0 3.5px #f5b820,
    inset 0 12px 36px rgba(0, 0, 0, 0.5),
    0 12px 28px rgba(0, 0, 0, 0.6);
  --jb-table-liseret: rgba(246, 238, 219, 0.3);
  --jb-table-texte: #fff6e2;
  --jb-table-voile: rgba(245, 184, 32, 0.15);
  --jb-table-carte-ombre: 0 2px 7px rgba(0, 0, 0, 0.7);
  --jb-table-halo: rgba(255, 212, 100, 0.6);
  --jb-table-surbrillance: #ffd062;
  --jb-carte-ancienne: rgba(14, 10, 7, 0.45);
  --jb-de-bord: rgba(0, 0, 0, 0.5);
}

/* Bois : bois sculpté des Grassfields (iroko rouge sombre), planches et fil du bois. */
[data-theme="toghu"][data-fond="bois"] {
  --jb-table-fond:
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(30, 10, 3, 0.34) 52px 54px, rgba(255, 210, 160, 0.06) 54px 55px),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 9px, rgba(255, 214, 170, 0.05) 9px 10px, transparent 10px 23px),
    radial-gradient(ellipse at 50% 42%, #8c4c2b 0%, #6b371d 55%, #47200f 100%);
  --jb-table-bord: 8px solid #1c0d06;
  --jb-table-ombre:
    0 0 0 1.5px rgba(245, 184, 32, 0.7),
    inset 0 0 0 2px #d02c22,
    inset 0 0 0 3.5px #f5b820,
    inset 0 12px 36px rgba(0, 0, 0, 0.42),
    0 12px 28px rgba(0, 0, 0, 0.5);
  --jb-table-liseret: rgba(255, 228, 190, 0.3);
  --jb-table-texte: #fff3e0;
  --jb-table-voile: rgba(28, 10, 3, 0.55);
  --jb-table-carte-ombre: 0 2px 6px rgba(20, 6, 0, 0.6);
  --jb-table-halo: rgba(255, 212, 100, 0.6);
  --jb-table-surbrillance: #ffd062;
}

/* Clair : coton ivoire tissé, bordé du velours noir et des coutures du Toghu ; doré plus soutenu pour la carte
   qui tient la main, pot en texte sombre sur voile blanc. */
[data-theme="toghu"][data-fond="clair"] {
  --jb-table-fond:
    repeating-linear-gradient(0deg, rgba(120, 88, 40, 0.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(120, 88, 40, 0.045) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 42%, #fbf5e7 0%, #f0e5cc 55%, #e1d0ad 100%);
  --jb-table-bord: 8px solid #15100c;
  --jb-table-ombre:
    0 0 0 1.5px rgba(214, 150, 20, 0.85),
    inset 0 0 0 2px #c0231a,
    inset 0 0 0 3.5px #e2a316,
    inset 0 10px 30px rgba(110, 84, 40, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.45);
  --jb-table-liseret: rgba(120, 70, 20, 0.42);
  --jb-table-texte: #24170d;
  --jb-table-voile: rgba(255, 255, 255, 0.8);
  --jb-table-carte-ombre: 0 1px 2px rgba(70, 50, 20, 0.35), 0 3px 9px rgba(70, 50, 20, 0.22);
  --jb-table-halo: rgba(224, 146, 18, 0.62);
  --jb-table-surbrillance: #e39b14;
  --jb-carte-ancienne: rgba(240, 232, 214, 0.55);
  --jb-de-bord: rgba(80, 58, 24, 0.5);
  --jb-de-ombre: rgba(70, 46, 14, 0.4);
}

/* ---------- Décor (règles décoratives, sans toucher à la mise en page) ---------- */

/* Couture du tapis : point de couture en tirets plutôt qu'un trait. */
[data-theme="toghu"] .tapis::before { border-style: dashed; }

/* Ourlet brodé en haut de l'accueil (comme l'encolure du Toghu ; rien en bas : la version y est affichée). */
[data-theme="toghu"] .ecran-accueil::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 9px;
  background:
    linear-gradient(var(--toghu-jaune), var(--toghu-jaune)) 0 7px / 100% 2px no-repeat,
    var(--toghu-dents) 0 0 / 12px 7px repeat-x;
  pointer-events: none;
}

/* Boutons secondaires : point de couture ivoire à l'intérieur du bord (le contour de focus reste celui de l'app). */
[data-theme="toghu"] .bouton:not(.bouton--principal):not(.bouton--discret) {
  outline: 1px dashed rgba(246, 238, 219, 0.26);
  outline-offset: -5px;
}

[data-theme="toghu"] .bouton:focus-visible,
[data-theme="toghu"] .bouton:not(.bouton--principal):not(.bouton--discret):focus-visible {
  outline: 3px solid var(--jb-focus);
  outline-offset: 2px;
}

/* Fond Clair : contour de focus d'une pile en rouge sombre (le doré ne se verrait pas sur le coton ivoire). */
[data-theme="toghu"][data-fond="clair"] .pile:focus-visible .carte:last-child .carte-corps { outline-color: #a3201a; }

/* Initiales des avatars (« O1 ») : le 1 du DM Serif ressemble à un I, on garde la police du texte. */
[data-theme="toghu"] .siege-initiale { font-family: var(--jb-police-texte); font-weight: 700; }

/* Plaque des sièges : fil d'or discret. */
[data-theme="toghu"] .siege-infos { box-shadow: inset 0 0 0 1px rgba(245, 184, 32, 0.3); }

/* Bannière de fin de donne : ourlets brodés en haut et en bas. */
[data-theme="toghu"] .banniere-boite {
  background-image:
    var(--toghu-dents),
    conic-gradient(from -40.6deg at 50% 100%, var(--toghu-jaune) 0 81.2deg, var(--toghu-rouge) 0);
  background-size: 12px 7px, 12px 7px;
  background-position: 0 0, 0 100%;
  background-repeat: repeat-x, repeat-x;
}

/* Accueil : col brodé derrière l'éventail. */
[data-theme="toghu"] .toghu-decor {
  position: absolute;
  inset: 0;
  container-type: size;
}

[data-theme="toghu"] .toghu-col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  height: auto;
  aspect-ratio: 1;
  max-height: 100%;
  width: min(94cqw, 94cqh);
  transform: translate(-50%, -50%);
  animation: toghu-col 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

[data-theme="toghu"] .toghu-decor .decor-carte {
  animation: toghu-eventail 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: calc((var(--i) + 2) * 50ms + 120ms);
}

[data-theme="toghu"] .decor-carte img { display: block; width: 100%; height: 100%; }

@keyframes toghu-col {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.86) rotate(-12deg); }
}

@keyframes toghu-eventail {
  from { opacity: 0; transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="toghu"] .toghu-col,
  [data-theme="toghu"] .toghu-decor .decor-carte { animation: none; }
}

/* ---------- Mises, annonces géantes, feu, roll, Full (retours du 12/10) ----------
   Pièces d'or au fil de broderie jaune ; annonces en lettres de velours noir cernées, lueur or ; roll et
   bouton « FRAPPER LA CARTE ? » aux couleurs des fils rouge et or. */
[data-theme="toghu"] {
  --jb-piece-or: #f5b820;
  --jb-piece-reflet: #fff3bf;
  --jb-piece-sombre: #b07a0c;
  --jb-piece-tranche: #6e4306;
  --jb-piece-bord: rgba(70, 30, 0, 0.55);
  --jb-mise-fond: rgba(19, 14, 11, 0.88);
  --jb-mise-texte: #ffd45a;
  --jb-annonce-police: 'Archivo Black', 'Arial Black', sans-serif;
  --jb-annonce-contour: #130e0b;
  --jb-annonce-lueur: rgba(245, 184, 32, 0.6);
  --jb-annonce-voile: radial-gradient(ellipse at 50% 50%, rgba(19, 14, 11, 0.7) 0%, rgba(19, 14, 11, 0.32) 55%, rgba(19, 14, 11, 0) 80%);
  --jb-annonce-accent: #f5b820;
  --jb-annonce-accent-texte: #1d1004;
  --jb-frapper-fond: linear-gradient(180deg, #d02c22 0%, #7d140e 100%);
  --jb-frapper-bord: #f5b820;
  --jb-roll-fond: rgba(19, 14, 11, 0.88);
  --jb-roll-bord: rgba(245, 184, 32, 0.8);
  --jb-full-etoile: #f5b820;
}