/* Thème « Ndop » : l'étoffe royale bamiléké teinte à l'indigo par réserve. Indigo profond, motifs blancs
   (grilles, lunes, chevrons, araignée et lézard stylisés), une touche d'ocre. Calme, noble, mystérieux.
   Contrat : CLAUDE.md, « Contrat de thème ». Dos de carte et décor d'accueil : assets/js/themes/ndop.js.
   Motifs de fond : une petite tuile SVG (data URI) statique, aucune animation de fond. */

[data-theme="ndop"] {
  /* 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: 'Baloo 2', 'Trebuchet MS', sans-serif;

  /* Application : nuit d'indigo, motifs de réserve à peine visibles */
  --jb-fond-couleur: #0e1533;
  --jb-fond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg opacity='0.028' fill='%23ffffff'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='40' cy='40' rx='12.3' ry='11.4' transform='rotate(-12 40 40)' stroke-width='2.4'/%3E%3Cellipse cx='40' cy='40' rx='5.9' ry='5.5' stroke-width='1.9'/%3E%3Cpath d='M120 109L129.4 120L120 131L110.7 120Z' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='40.3' cy='39.8' r='1.9'/%3E%3Ccircle cx='120' cy='120' r='2.1'/%3E%3Ccircle cx='120' cy='32' r='1.4'/%3E%3Ccircle cx='120' cy='40' r='1.4'/%3E%3Ccircle cx='120' cy='48' r='1.4'/%3E%3Ccircle cx='40' cy='112' r='1.4'/%3E%3Ccircle cx='40' cy='120' r='1.4'/%3E%3Ccircle cx='40' cy='128' r='1.4'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 160px 160px, radial-gradient(130% 80% at 50% 0%, #24336f 0%, #151f4f 48%, #0b1130 100%);
  --jb-texte: #eef1f8;
  --jb-texte-doux: #b6c0de;
  --jb-accent: #e3b45e;
  --jb-accent-texte: #141c40;
  --jb-ligne: rgba(214, 224, 255, 0.13);
  --jb-focus: #ffd47a;

  /* Titre d'accueil */
  --jb-titre-couleur: #f6f2e8;
  --jb-titre-ombre: 0 3px 0 rgba(6, 9, 28, 0.6), 0 0 26px rgba(120, 150, 255, 0.22);
  --jb-titre-espacement: 0.1em;
  --jb-sous-titre-couleur: #e3b45e;

  /* Panneaux */
  /* Une rangée de dents en haut de chaque panneau, comme l'ourlet d'un Ndop. */
  --jb-panneau-fond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1.5 0L6 6.2L10.5 0Z' fill='%23ffffff' fill-opacity='0.2'/%3E%3C/svg%3E") 0 0 / 12px 7px repeat-x, rgba(150, 170, 240, 0.07);
  --jb-panneau-bord: rgba(214, 224, 255, 0.16);
  --jb-panneau-rayon: 12px;

  /* Boutons : indigo cerné de blanc ; bouton principal en coton blanc, texte indigo */
  --jb-bouton-fond: rgba(160, 180, 245, 0.1);
  --jb-bouton-texte: #f1f3fa;
  --jb-bouton-bord: rgba(228, 234, 255, 0.42);
  --jb-bouton-ombre: 0 2px 0 rgba(4, 7, 24, 0.55);
  --jb-bouton-rayon: 10px;
  --jb-bouton-principal-fond: linear-gradient(180deg, #fbf8f0 0%, #e8e1d0 100%);
  --jb-bouton-principal-texte: #121b45;
  --jb-bouton-principal-bord: #ffffff;

  /* Contrôles des paramètres */
  --jb-choix-fond: rgba(160, 180, 245, 0.08);
  --jb-choix-actif-fond: #f4f0e4;
  --jb-choix-actif-texte: #121b45;
  --jb-interrupteur-fond: rgba(200, 212, 255, 0.3);
  --jb-interrupteur-actif: #c9913a;

  /* Table, fond « Tapis » : feutre vert sombre, bord indigo cousu de blanc. */
  --jb-table-fond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg opacity='0.05' fill='%23ffffff'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='30' cy='30' rx='11.2' ry='10.4' transform='rotate(-12 30 30)' stroke-width='2.2'/%3E%3Cellipse cx='30' cy='30' rx='5.4' ry='5' stroke-width='1.7'/%3E%3Cpath d='M90 80L98.5 90L90 100L81.5 90Z' stroke-width='1.8'/%3E%3Cpath d='M21 83l9 7 9-7M21 90l9 7 9-7' stroke-width='1.8'/%3E%3C/g%3E%3Ccircle cx='30.3' cy='29.8' r='1.7'/%3E%3Ccircle cx='90' cy='90' r='2'/%3E%3Crect x='82.5' y='22.5' width='4.3' height='4.3'/%3E%3Crect x='82.5' y='32.9' width='4.3' height='4.3'/%3E%3Crect x='87.7' y='27.7' width='4.3' height='4.3'/%3E%3Crect x='92.9' y='22.5' width='4.3' height='4.3'/%3E%3Crect x='92.9' y='32.9' width='4.3' height='4.3'/%3E%3Ccircle cx='60' cy='8' r='1.3'/%3E%3Ccircle cx='60' cy='52' r='1.3'/%3E%3Ccircle cx='60' cy='68' r='1.3'/%3E%3Ccircle cx='60' cy='112' r='1.3'/%3E%3Ccircle cx='8' cy='60' r='1.3'/%3E%3Ccircle cx='52' cy='60' r='1.3'/%3E%3Ccircle cx='68' cy='60' r='1.3'/%3E%3Ccircle cx='112' cy='60' r='1.3'/%3E%3C/g%3E%3C/svg%3E") center / 120px 120px, radial-gradient(ellipse at 50% 45%, #2b7060 0%, #1d5848 50%, #123b33 100%);
  --jb-table-bord: 8px solid #141d48;
  --jb-table-ombre: inset 0 0 0 2px rgba(255, 255, 255, 0.05), inset 0 12px 36px rgba(0, 0, 0, 0.36), 0 12px 28px rgba(2, 4, 18, 0.5);
  --jb-table-rayon: 999px;
  --jb-table-texte: #f6f2e8;
  --jb-table-voile: rgba(6, 12, 30, 0.42);
  --jb-table-liseret: rgba(240, 244, 255, 0.26);
  --jb-table-carte-ombre: 0 2px 6px rgba(2, 12, 10, 0.5);
  --jb-table-halo: var(--jb-tour-halo);
  --jb-table-surbrillance: var(--jb-carte-surbrillance);
  /* Point de couture du bord du tapis (règle décorative plus bas), décliné par fond. */
  --ndop-couture: rgba(240, 244, 255, 0.55);

  /* Sièges */
  --jb-avatar-fond: linear-gradient(160deg, #2e4290 0%, #1a2659 100%);
  --jb-avatar-texte: #f6f2e8;
  --jb-avatar-bord: rgba(240, 236, 226, 0.62);
  --jb-avatar-humain-fond: linear-gradient(160deg, #fbf8f0 0%, #e2dbc8 100%);
  --jb-avatar-humain-texte: #121b45;
  --jb-siege-fond: rgba(8, 12, 34, 0.8);
  --jb-siege-texte: #eef1f8;
  --jb-marque-fond: #e3b45e;
  --jb-marque-texte: #141c40;

  /* Tour de jeu et minuteur : l'aura dorée reste celle validée par Patrick. */
  --jb-tour-couleur: #ffd76e;
  --jb-tour-halo: rgba(255, 215, 110, 0.55);
  --jb-minuteur-couleur: #dfe6ff;
  --jb-minuteur-alerte: #ff765e;
  --jb-minuteur-piste: rgba(255, 255, 255, 0.16);

  /* Bulles */
  --jb-bulle-fond: #f7f4ec;
  --jb-bulle-texte: #121b45;
  --jb-bulle-bord: #121b45;

  /* Jetons : ocre, liseré blanc cousu */
  --jb-jeton-couleur: #c5872d;
  --jb-jeton-liseret: #fbf4e2;

  /* Dés : coton blanc, points indigo, arêtes teintées d'indigo */
  --jb-de-fond: #f6f2e8;
  --jb-de-point: #16215a;
  --jb-de-bord: rgba(8, 14, 44, 0.32);
  --jb-de-arete: #c2c8e0;
  --jb-de-ombre: rgba(3, 6, 26, 0.5);

  /* Bannière, annonces, pastilles */
  --jb-banniere-fond: rgba(13, 19, 50, 0.95);
  --jb-banniere-texte: #f6f2e8;
  --jb-banniere-accent: #e3b45e;
  --jb-pastille-fond: rgba(227, 180, 94, 0.16);
  --jb-pastille-texte: #f0c87c;

  /* Cartes */
  --jb-carte-ombre: 0 2px 5px rgba(3, 6, 22, 0.45);
  --jb-carte-surbrillance: #ffd76e;
  --jb-carte-interdite: rgba(10, 15, 42, 0.55);
  --jb-carte-ancienne: rgba(10, 15, 42, 0.4);

  color-scheme: dark;
}

/* ---------- Fonds de table (déclinaisons Ndop) ---------- */

[data-theme="ndop"][data-fond="tapis"] {
  --jb-table-halo: rgba(255, 215, 110, 0.55);
  --jb-table-surbrillance: #ffd76e;
}

/* Nuit : le Ndop lui-même, indigo profond à motifs de réserve, bandes tissées cousues bord à bord. */
[data-theme="ndop"][data-fond="nuit"] {
  --jb-table-fond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg opacity='0.09' fill='%23eef2fb'%3E%3Cg fill='none' stroke='%23eef2fb' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='30' cy='30' rx='11.2' ry='10.4' transform='rotate(-12 30 30)' stroke-width='2.2'/%3E%3Cellipse cx='30' cy='30' rx='5.4' ry='5' stroke-width='1.7'/%3E%3Cpath d='M90 80L98.5 90L90 100L81.5 90Z' stroke-width='1.8'/%3E%3Cpath d='M21 83l9 7 9-7M21 90l9 7 9-7' stroke-width='1.8'/%3E%3C/g%3E%3Ccircle cx='30.3' cy='29.8' r='1.7'/%3E%3Ccircle cx='90' cy='90' r='2'/%3E%3Crect x='82.5' y='22.5' width='4.3' height='4.3'/%3E%3Crect x='82.5' y='32.9' width='4.3' height='4.3'/%3E%3Crect x='87.7' y='27.7' width='4.3' height='4.3'/%3E%3Crect x='92.9' y='22.5' width='4.3' height='4.3'/%3E%3Crect x='92.9' y='32.9' width='4.3' height='4.3'/%3E%3Ccircle cx='60' cy='8' r='1.3'/%3E%3Ccircle cx='60' cy='52' r='1.3'/%3E%3Ccircle cx='60' cy='68' r='1.3'/%3E%3Ccircle cx='60' cy='112' r='1.3'/%3E%3Ccircle cx='8' cy='60' r='1.3'/%3E%3Ccircle cx='52' cy='60' r='1.3'/%3E%3Ccircle cx='68' cy='60' r='1.3'/%3E%3Ccircle cx='112' cy='60' r='1.3'/%3E%3C/g%3E%3C/svg%3E") center / 120px 120px, repeating-linear-gradient(90deg, transparent 0 59px, rgba(4, 8, 30, 0.4) 59px 60px, rgba(140, 165, 255, 0.07) 60px 61px, transparent 61px 64px), radial-gradient(ellipse at 50% 42%, #304b9e 0%, #223577 52%, #18275f 100%);
  --jb-table-bord: 8px solid #0a0f2c;
  --jb-table-ombre: inset 0 0 0 2px rgba(170, 190, 255, 0.08), inset 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 0 1.5px rgba(190, 205, 255, 0.3), 0 12px 28px rgba(0, 0, 0, 0.55);
  --jb-table-liseret: rgba(232, 238, 255, 0.34);
  --jb-table-texte: #f6f2e8;
  --jb-table-voile: rgba(5, 9, 30, 0.6);
  --jb-table-carte-ombre: 0 2px 7px rgba(0, 2, 16, 0.62);
  --jb-table-halo: rgba(255, 215, 110, 0.6);
  --jb-table-surbrillance: #ffd76e;
  --ndop-couture: rgba(232, 238, 255, 0.5);
}

/* Bois : bois sombre sculpté des chefferies, motifs gravés à peine visibles. */
[data-theme="ndop"][data-fond="bois"] {
  --jb-table-fond:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg opacity='0.16' fill='%231e0d03'%3E%3Cg fill='none' stroke='%231e0d03' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='30' cy='30' rx='11.2' ry='10.4' transform='rotate(-12 30 30)' stroke-width='2.2'/%3E%3Cellipse cx='30' cy='30' rx='5.4' ry='5' stroke-width='1.7'/%3E%3Cpath d='M90 80L98.5 90L90 100L81.5 90Z' stroke-width='1.8'/%3E%3Cpath d='M21 83l9 7 9-7M21 90l9 7 9-7' stroke-width='1.8'/%3E%3C/g%3E%3Ccircle cx='30.3' cy='29.8' r='1.7'/%3E%3Ccircle cx='90' cy='90' r='2'/%3E%3Crect x='82.5' y='22.5' width='4.3' height='4.3'/%3E%3Crect x='82.5' y='32.9' width='4.3' height='4.3'/%3E%3Crect x='87.7' y='27.7' width='4.3' height='4.3'/%3E%3Crect x='92.9' y='22.5' width='4.3' height='4.3'/%3E%3Crect x='92.9' y='32.9' width='4.3' height='4.3'/%3E%3Ccircle cx='60' cy='8' r='1.3'/%3E%3Ccircle cx='60' cy='52' r='1.3'/%3E%3Ccircle cx='60' cy='68' r='1.3'/%3E%3Ccircle cx='60' cy='112' r='1.3'/%3E%3Ccircle cx='8' cy='60' r='1.3'/%3E%3Ccircle cx='52' cy='60' r='1.3'/%3E%3Ccircle cx='68' cy='60' r='1.3'/%3E%3Ccircle cx='112' cy='60' r='1.3'/%3E%3C/g%3E%3C/svg%3E") center / 120px 120px,
    repeating-linear-gradient(180deg, transparent 0 56px, rgba(24, 10, 2, 0.36) 56px 58px, rgba(255, 222, 176, 0.06) 58px 59px),
    repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 7px, rgba(255, 226, 186, 0.05) 7px 8px, transparent 8px 19px),
    radial-gradient(ellipse at 50% 42%, #7e4c2a 0%, #5f361a 55%, #3e200c 100%);
  --jb-table-bord: 8px solid #1c0f07;
  --jb-table-ombre: inset 0 0 0 2px rgba(255, 222, 176, 0.08), inset 0 12px 36px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.5);
  --jb-table-liseret: rgba(255, 226, 186, 0.22);
  --jb-table-texte: #fff4e2;
  --jb-table-voile: rgba(28, 12, 4, 0.55);
  --jb-table-carte-ombre: 0 2px 6px rgba(20, 8, 2, 0.58);
  --jb-table-halo: rgba(255, 215, 110, 0.58);
  --jb-table-surbrillance: #ffd76e;
  --ndop-couture: rgba(255, 228, 190, 0.38);
}

/* Clair : coton écru non teint, motifs indigo à peine posés, bord indigo cousu de blanc. */
[data-theme="ndop"][data-fond="clair"] {
  --jb-table-fond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg opacity='0.08' fill='%231b2a66'%3E%3Cg fill='none' stroke='%231b2a66' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='30' cy='30' rx='11.2' ry='10.4' transform='rotate(-12 30 30)' stroke-width='2.2'/%3E%3Cellipse cx='30' cy='30' rx='5.4' ry='5' stroke-width='1.7'/%3E%3Cpath d='M90 80L98.5 90L90 100L81.5 90Z' stroke-width='1.8'/%3E%3Cpath d='M21 83l9 7 9-7M21 90l9 7 9-7' stroke-width='1.8'/%3E%3C/g%3E%3Ccircle cx='30.3' cy='29.8' r='1.7'/%3E%3Ccircle cx='90' cy='90' r='2'/%3E%3Crect x='82.5' y='22.5' width='4.3' height='4.3'/%3E%3Crect x='82.5' y='32.9' width='4.3' height='4.3'/%3E%3Crect x='87.7' y='27.7' width='4.3' height='4.3'/%3E%3Crect x='92.9' y='22.5' width='4.3' height='4.3'/%3E%3Crect x='92.9' y='32.9' width='4.3' height='4.3'/%3E%3Ccircle cx='60' cy='8' r='1.3'/%3E%3Ccircle cx='60' cy='52' r='1.3'/%3E%3Ccircle cx='60' cy='68' r='1.3'/%3E%3Ccircle cx='60' cy='112' r='1.3'/%3E%3Ccircle cx='8' cy='60' r='1.3'/%3E%3Ccircle cx='52' cy='60' r='1.3'/%3E%3Ccircle cx='68' cy='60' r='1.3'/%3E%3Ccircle cx='112' cy='60' r='1.3'/%3E%3C/g%3E%3C/svg%3E") center / 120px 120px, radial-gradient(ellipse at 50% 42%, #f8f5ec 0%, #ede6d5 55%, #dcd2ba 100%);
  --jb-table-bord: 8px solid #1d2a62;
  --jb-table-ombre: inset 0 0 0 2px rgba(255, 255, 255, 0.55), inset 0 10px 30px rgba(40, 50, 100, 0.18), 0 12px 28px rgba(0, 0, 0, 0.45);
  --jb-table-liseret: rgba(29, 42, 98, 0.34);
  --jb-table-texte: #18214a;
  --jb-table-voile: rgba(255, 255, 255, 0.8);
  --jb-table-carte-ombre: 0 1px 2px rgba(30, 34, 70, 0.34), 0 3px 9px rgba(30, 34, 70, 0.2);
  --jb-table-halo: rgba(200, 128, 10, 0.62);
  /* Ocre soutenu : au moins 3:1 sur le coton écru et sur la carte. */
  --jb-table-surbrillance: #bf7a06;
  --jb-carte-ancienne: rgba(240, 236, 224, 0.55);
  --jb-de-bord: rgba(27, 35, 80, 0.5);
  --jb-de-ombre: rgba(27, 35, 80, 0.32);
  --ndop-couture: rgba(244, 241, 232, 0.75);
}

/* ---------- Règles décoratives ---------- */

/* Le tapis est cousu : point avant pour le liseré intérieur, et sur le bord. */
[data-theme="ndop"] .tapis::before { border-style: dashed; }

[data-theme="ndop"] .tapis::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1.5px dashed var(--ndop-couture);
  border-radius: inherit;
  pointer-events: none;
}

/* Bannière de fin de donne : une couture ocre à l'intérieur du cadre. */
[data-theme="ndop"] .banniere-boite {
  outline: 1px dashed rgba(227, 180, 94, 0.5);
  outline-offset: -7px;
}

/* ---------- Décor d'accueil : pan de Ndop derrière l'éventail ---------- */

[data-theme="ndop"] .ndop-decor {
  position: absolute;
  inset: 0;
  /* Largeur des cartes de l'éventail (mêmes bornes que .decor-carte dans app.css). */
  --ndop-c: clamp(72px, min(calc(var(--app-l, 400px) * 0.3), calc(var(--app-h, 800px) * 0.17)), 170px);
}

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

[data-theme="ndop"] .ndop-toile {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(calc(var(--ndop-c) * 2.9), 98%);
  height: min(calc(var(--ndop-c) * 2.43), 98%);
  transform: translate(-50%, -50%) rotate(-1.5deg);
  animation: ndop-toile 0.6s ease-out both;
}

[data-theme="ndop"] .ndop-toile svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

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

[data-theme="ndop"] .ndop-eventail .decor-carte {
  box-shadow: 0 6px 14px rgba(3, 6, 22, 0.5);
  animation: ndop-eventail 0.75s cubic-bezier(0.2, 0.8, 0.3, 1) 0.1s both;
}

@keyframes ndop-toile {
  from { opacity: 0; }
}

/* L'éventail s'ouvre une fois (la fin de l'animation est la rotation donnée par app.css). */
@keyframes ndop-eventail {
  from { opacity: 0; transform: rotate(0deg); }
}

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

/* ---------- Mises, annonces géantes, feu, roll, Full (retours du 12/10) ----------
   Pièces d'or chaud sur l'indigo ; annonces cernées d'indigo, lueur ocre ; roll sur toile indigo. */
[data-theme="ndop"] {
  --jb-piece-or: #e3b45e;
  --jb-piece-reflet: #fff2cf;
  --jb-piece-sombre: #9c6f22;
  --jb-piece-tranche: #6b4a12;
  --jb-piece-bord: rgba(60, 38, 6, 0.5);
  --jb-mise-fond: rgba(13, 19, 50, 0.9);
  --jb-mise-texte: #f6e3b4;
  --jb-annonce-police: 'Archivo Black', 'Arial Black', sans-serif;
  --jb-annonce-contour: #0d1332;
  --jb-annonce-lueur: rgba(227, 180, 94, 0.6);
  --jb-annonce-voile: radial-gradient(ellipse at 50% 50%, rgba(13, 19, 50, 0.68) 0%, rgba(13, 19, 50, 0.3) 55%, rgba(13, 19, 50, 0) 80%);
  --jb-annonce-accent: #e3b45e;
  --jb-annonce-accent-texte: #141c40;
  --jb-frapper-fond: linear-gradient(180deg, #d9552b 0%, #8a2a10 100%);
  --jb-frapper-bord: #f6f2e8;
  --jb-roll-fond: rgba(13, 19, 50, 0.9);
  --jb-roll-bord: rgba(227, 180, 94, 0.8);
  --jb-full-etoile: #e3b45e;
}