/**
 * PlayAwale — La couleur des graines
 * -----------------------------------------------------------------------------
 * Un réglage de « Personnaliser mon awalé » (inc/game/customize.php, réglage
 * « color ») : voir la documentation technique, section 61.
 *
 * CE FICHIER NE POSE QUE DEUX VARIABLES, sous la classe « seed-color--<nom> »
 * — posée sur <body> pour le joueur qui l'a choisie, ou sur le conteneur de
 * l'aperçu de « Mon profil » :
 *   · --seed-fill    la graine de la disposition classique (components/board.css) ;
 *   · --seed-pretty  la graine des autres dispositions (components/seed-layouts.css),
 *                    avec son reflet net et son bord sombre.
 * « --seed-voile » : LA TEINTE D'APPOINT de la disposition « réelle »
 * (components/seed-layouts.css) — chaque graine en prend sa part (--va), pour
 * qu'aucune ne soit pareille : le vert olive des bonducs, un brun plus sombre…
 * Sans classe : l'or du thème. Les ombres, le relief et le hile restent ceux
 * de la disposition : seule la matière change.
 *
 * DES GRAINES DE VRAIS JEUX — demandé le 30/09/2026 : « un visuel proche d'un
 * vrai awalé », « couleur des graines » :
 *   · natural  le bonduc (Caesalpinia bonduc), la graine du jeu en Afrique de
 *              l'Ouest — d'abord un gris perle, puis un gris-vert (« plus vert,
 *              normalement »), puis, d'après une photo de vraies graines
 *              (01/10/2026), un beige-gris MAT, certaines graines tirant sur
 *              le vert olive ;
 *   · brown    brun luisant, comme une graine de palmier ou un galet de rivière ;
 *   · ivory    ivoire : les cauris, ces coquillages qui servent aussi de graines ;
 *   · red      rouge corail : l'Adenanthera, « l'arbre à graines rouges » ;
 *   · real     DE VRAIS BONDUCS, EN PHOTO (01/10/2026) — celui-là ne pose pas
 *              de variables : il peint la graine elle-même, voir en fin de
 *              fichier.
 *
 * La portée est celle du thème (.board-container) : les variables doivent
 * vivre là où elles servent, et la double écriture couvre <body> comme
 * l'aperçu, qui porte la classe sur le conteneur lui-même.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

.seed-color--natural .board-container,
.board-container.seed-color--natural {
  --seed-fill: radial-gradient(circle at 30% 30%, #d6d3bd, #85846a);
  --seed-pretty: radial-gradient(circle at 36% 30%, #e4ddce 0%, #cdc5b3 36%, #aaa18c 70%, #847b67 100%);
  --seed-voile: #7d8a30;
}

.seed-color--brown .board-container,
.board-container.seed-color--brown {
  --seed-fill: radial-gradient(circle at 30% 30%, #b87444, #5a2a0e);
  --seed-pretty: radial-gradient(circle at 34% 30%, #ffe2c4 0 7%, #c07a45 22%, #7c3d15 60%, #3e1a05 100%);
  --seed-voile: #3d1f0a;
}

.seed-color--ivory .board-container,
.board-container.seed-color--ivory {
  --seed-fill: radial-gradient(circle at 30% 30%, #fffaf0, #d6c7a4);
  --seed-pretty: radial-gradient(circle at 34% 30%, #ffffff 0 9%, #fbf4e4 26%, #e6d7b3 64%, #b09a6a 100%);
  --seed-voile: #a89a78;
}

.seed-color--red .board-container,
.board-container.seed-color--red {
  --seed-fill: radial-gradient(circle at 30% 30%, #f0604a, #9a1408);
  --seed-pretty: radial-gradient(circle at 34% 30%, #ffe0d8 0 7%, #f0563e 22%, #b31a0c 60%, #5e0703 100%);
  --seed-voile: #6e0a05;
}

/* =============================================================================
   « RÉELLES » — DE VRAIES GRAINES, EN PHOTO (01/10/2026)
   =============================================================================
   Demandé : « pour la couleur des graines, on peut choisir “réelle”, avec les
   images des graines que je t'ai fournies, une imitation très proche de la
   réalité, sachant qu'elles peuvent avoir plusieurs positions ».

   LA PLANCHE — assets/img/graines/bonducs.webp (tools/graines_reelles.mjs) :
   seize vrais bonducs du Club Awalé, chacun photographié dans sa position (le
   hile visible ou non, de face, de biais), en 4 × 4 cases. Chaque graine du jeu
   montre UNE case : la photo est posée en fond, quatre fois plus grande que la
   graine, et décalée d'un nombre entier de cases.

   QUELLE CASE — deux décalages qui s'additionnent :
     · selon le RANG de la graine dans son trou (--g-col, --g-lig) : les seize
       premières graines d'un trou sont toutes différentes ;
     · selon le TROU (--t-col, --t-lig) : d'un trou à l'autre, la série ne
       recommence pas au même endroit — deux trous de quatre graines ne
       montrent pas les quatre mêmes.
   Le fond se répète : un décalage qui dépasse la planche revient au début (le
   « modulo » est fait par la répétition, sans calcul). Un décalage de n cases
   s'écrit n × 100 % / 3 : en CSS, un pourcentage de position se rapporte à
   (taille de l'élément − taille du fond) = −3 cases.

   CE QUI RESTE CELUI DE LA DISPOSITION — la place, la taille, la forme, la
   rotation, et, pour la disposition « réelle », l'éclat propre à chaque graine.
   Ce qui change : la matière (la photo, qui porte déjà son relief : plus de
   reflet ni de hile dessinés) et l'ombre, qui n'est plus que l'ombre portée.

   La règle est plus précise que celles des dispositions (cinq classes contre
   quatre au plus), pour passer devant quel que soit l'ordre des feuilles. */

.seed-color--real .board .hole .seeds .seed {
  background:
    url('../../img/graines/bonducs.webp')
    calc((var(--g-col, 0) + var(--t-col, 0)) * 100% / 3)
    calc((var(--g-lig, 0) + var(--t-lig, 0)) * 100% / 3)
    / 400% 400% repeat;
  /* LES GRAINES POSÉES, ET NON FLOTTANTES (22/10/2026, « accentuer un petit
     peu les ombres, qu'on ait moins l'impression que les graines flottent ») :
       · le modelé, un peu plus marqué du côté opposé à la lumière ;
       · l'OMBRE DE CONTACT, courte et sombre, juste sous la graine : c'est
         elle qui la pose sur le bois — sans elle, l'œil ne sait pas où la
         graine touche ;
       · l'ombre portée, un peu plus longue et plus dense.
     Seulement pour ces graines-ci (la photo) : les autres couleurs gardent
     leurs ombres. */
  box-shadow:
    inset calc(var(--seed-size) * -0.07) calc(var(--seed-size) * -0.11) calc(var(--seed-size) * 0.2) rgba(45, 26, 4, 0.42),
    0 calc(var(--seed-size) * 0.06) calc(var(--seed-size) * 0.09) rgba(22, 10, 0, 0.68),
    calc(var(--seed-size) * 0.07) calc(var(--seed-size) * 0.16) calc(var(--seed-size) * 0.26) rgba(35, 15, 0, 0.55);
}

/* LA LUMIÈRE DU PLATEAU — photographiées sous la lumière blanche d'un studio,
   les graines paraissaient gris-bleu sur le bois orangé. Le trou les réchauffe
   et les assombrit un peu, toutes ensemble : le filtre est posé sur le groupe
   (.seeds), et non sur chaque graine, pour laisser à chacune l'éclat que lui
   donne la disposition « réelle ». Le bord assombri (l'ombre intérieure,
   ci-dessus) les pose dans le bol. */
.seed-color--real .board .hole .seeds {
  filter: sepia(0.22) saturate(1.3) brightness(0.88) contrast(1.05);
}

/* Le rang de la graine dans son trou : la colonne, puis la ligne de la case. */
.seed-color--real .seeds .seed:nth-child(4n + 2) { --g-col: 1; }
.seed-color--real .seeds .seed:nth-child(4n + 3) { --g-col: 2; }
.seed-color--real .seeds .seed:nth-child(4n + 4) { --g-col: 3; }

.seed-color--real .seeds .seed:is(:nth-child(16n + 5), :nth-child(16n + 6), :nth-child(16n + 7), :nth-child(16n + 8)) { --g-lig: 1; }
.seed-color--real .seeds .seed:is(:nth-child(16n + 9), :nth-child(16n + 10), :nth-child(16n + 11), :nth-child(16n + 12)) { --g-lig: 2; }
.seed-color--real .seeds .seed:is(:nth-child(16n + 13), :nth-child(16n + 14), :nth-child(16n + 15), :nth-child(16n + 16)) { --g-lig: 3; }

/* Le trou (data-hole, de 1 à 12) : un départ différent dans la planche pour
   chacun ; le trou 12 garde le départ (0, 0). */
.seed-color--real .hole[data-hole="1"]  { --t-col: 1; --t-lig: 2; }
.seed-color--real .hole[data-hole="2"]  { --t-col: 2; --t-lig: 1; }
.seed-color--real .hole[data-hole="3"]  { --t-col: 3; --t-lig: 3; }
.seed-color--real .hole[data-hole="4"]  { --t-col: 1; --t-lig: 1; }
.seed-color--real .hole[data-hole="5"]  { --t-col: 2; --t-lig: 3; }
.seed-color--real .hole[data-hole="6"]  { --t-col: 3; --t-lig: 2; }
.seed-color--real .hole[data-hole="7"]  { --t-col: 0; --t-lig: 1; }
.seed-color--real .hole[data-hole="8"]  { --t-col: 2; --t-lig: 2; }
.seed-color--real .hole[data-hole="9"]  { --t-col: 1; --t-lig: 3; }
.seed-color--real .hole[data-hole="10"] { --t-col: 3; --t-lig: 1; }
.seed-color--real .hole[data-hole="11"] { --t-col: 0; --t-lig: 3; }