/* Thème « Maquis » : le maquis camerounais le soir. Nuit chaude éclairée par les guirlandes, tables en bois,
   chaises en plastique de couleur, enseignes peintes à la main ; vert, rouge et jaune par petites touches.
   Contrat de thème : CLAUDE.md. Tapis = toile cirée vert vichy ; fonds Nuit, Bois et Clair déclinés plus bas. */

[data-theme="maquis"] {
  /* Polices (chargées par index.php) : lettrage d'enseigne arrondi, texte rond et amical. */
  --jb-police-titre: 'Lilita One', 'Arial Black', sans-serif;
  --jb-police-texte: 'Baloo 2', 'Segoe UI', Arial, sans-serif;
  --jb-police-chiffres: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --jb-police-bulle: 'Lilita One', 'Trebuchet MS', sans-serif;

  /* Application : nuit chaude, lueurs d'ampoules floues en haut. */
  --jb-fond-couleur: #1b110a;
  --jb-fond:
    radial-gradient(circle at 9% 5%, rgba(255, 200, 90, 0.2) 0 3px, rgba(255, 200, 90, 0) 30px),
    radial-gradient(circle at 31% 9%, rgba(80, 210, 130, 0.14) 0 2px, rgba(80, 210, 130, 0) 24px),
    radial-gradient(circle at 56% 4%, rgba(255, 120, 90, 0.15) 0 3px, rgba(255, 120, 90, 0) 28px),
    radial-gradient(circle at 78% 8%, rgba(255, 220, 140, 0.16) 0 2px, rgba(255, 220, 140, 0) 26px),
    radial-gradient(circle at 95% 4%, rgba(255, 180, 70, 0.18) 0 3px, rgba(255, 180, 70, 0) 28px),
    radial-gradient(130% 70% at 50% 0%, #46290f 0%, #2a180b 46%, #170e07 100%);
  --jb-texte: #fbf1df;
  --jb-texte-doux: #d9c4a2;
  --jb-accent: #ffc83d;
  --jb-accent-texte: #2a1206;
  --jb-ligne: rgba(255, 214, 160, 0.13);
  --jb-focus: #ffe066;

  /* Titre d'accueil : lettrage rouge peint sur l'enseigne jaune (règles décoratives plus bas). */
  --jb-titre-couleur: #c62a1c;
  --jb-titre-ombre: -0.015em -0.015em 0 rgba(255, 244, 214, 0.75), 0.035em 0.045em 0 #2a1206;
  --jb-titre-espacement: 0.05em;
  --jb-sous-titre-couleur: #3a1a08;

  /* Panneaux */
  --jb-panneau-fond: linear-gradient(180deg, rgba(255, 214, 160, 0.08) 0%, rgba(255, 214, 160, 0.045) 100%);
  --jb-panneau-bord: rgba(255, 200, 120, 0.17);
  --jb-panneau-rayon: 14px;

  /* Boutons : planche peinte en relief (ombre franche dessous) ; principal vert « on y va ». */
  --jb-bouton-fond: linear-gradient(180deg, #4b2d17 0%, #3a2212 100%);
  --jb-bouton-texte: #fbf1df;
  --jb-bouton-bord: rgba(255, 206, 140, 0.34);
  --jb-bouton-ombre: 0 3px 0 #0c0603;
  --jb-bouton-rayon: 12px;
  --jb-bouton-principal-fond: linear-gradient(180deg, #3cc574 0%, #1f9d55 100%);
  --jb-bouton-principal-texte: #0b2414;
  --jb-bouton-principal-bord: #86e6aa;

  /* Contrôles des paramètres */
  --jb-choix-fond: rgba(255, 220, 170, 0.08);
  --jb-choix-actif-fond: #ffc83d;
  --jb-choix-actif-texte: #2a1206;
  --jb-interrupteur-fond: rgba(255, 220, 170, 0.22);
  --jb-interrupteur-actif: #1f9d55;

  /* Table, fond « Tapis » : toile cirée vert vichy, bord en bois, filet jaune peint. */
  --jb-table-fond:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 13px, rgba(255, 255, 255, 0) 13px 26px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 13px, rgba(255, 255, 255, 0) 13px 26px),
    radial-gradient(ellipse at 50% 45%, #2a8954 0%, #1e7245 50%, #135332 100%);
  --jb-table-bord: 8px solid #5b3418;
  --jb-table-ombre: inset 0 0 0 2px rgba(255, 236, 200, 0.08), inset 0 12px 34px rgba(0, 0, 0, 0.34), 0 12px 26px rgba(0, 0, 0, 0.5);
  --jb-table-rayon: 999px;
  --jb-table-texte: #fff6e0;
  --jb-table-voile: rgba(6, 28, 15, 0.58);
  --jb-table-liseret: rgba(255, 200, 61, 0.4);
  --jb-table-carte-ombre: 0 2px 6px rgba(0, 0, 0, 0.42);
  /* Carte qui tient la main : liseré et halo dorés, comme l'aura du joueur dont c'est le tour (validés par Patrick). */
  --jb-table-halo: var(--jb-tour-halo);
  --jb-table-surbrillance: var(--jb-carte-surbrillance);

  /* Sièges : chaises en plastique de couleur (rouge, vert, bleu par siège plus bas), joueur en jaune. */
  --jb-avatar-fond: linear-gradient(160deg, #c93427 0%, #a1241a 100%);
  --jb-avatar-texte: #fff8ea;
  --jb-avatar-bord: rgba(255, 240, 210, 0.6);
  --jb-avatar-humain-fond: linear-gradient(160deg, #ffd658 0%, #f0a91c 100%);
  --jb-avatar-humain-texte: #2a1206;
  --jb-siege-fond: rgba(28, 15, 7, 0.82);
  --jb-siege-texte: #fbf1df;
  --jb-marque-fond: #ffc83d;
  --jb-marque-texte: #2a1206;

  /* Tour de jeu et minuteur : l'aura dorée reste dorée. */
  --jb-tour-couleur: #ffd65e;
  --jb-tour-halo: rgba(255, 212, 94, 0.56);
  --jb-minuteur-couleur: #4fd987;
  --jb-minuteur-alerte: #ff5a47;
  --jb-minuteur-piste: rgba(255, 240, 210, 0.18);

  /* Bulles */
  --jb-bulle-fond: #fff8e6;
  --jb-bulle-texte: #1f1108;
  --jb-bulle-bord: #1f1108;

  /* Jetons */
  --jb-jeton-couleur: #d23a26;
  --jb-jeton-liseret: #fff1cf;

  /* Dés : crème, points brûlés, arêtes de bois clair */
  --jb-de-fond: #fff8ea;
  --jb-de-point: #2a1206;
  --jb-de-bord: rgba(60, 25, 5, 0.38);
  --jb-de-arete: #ecc488;
  --jb-de-ombre: rgba(26, 10, 2, 0.48);

  /* Bannière, annonces, pastilles : planche sombre, lettrage jaune. */
  --jb-banniere-fond: rgba(33, 18, 9, 0.95);
  --jb-banniere-texte: #fff6e4;
  --jb-banniere-accent: #ffc83d;
  --jb-pastille-fond: rgba(255, 200, 61, 0.17);
  --jb-pastille-texte: #ffd866;

  /* Cartes */
  --jb-carte-ombre: 0 2px 5px rgba(0, 0, 0, 0.42);
  --jb-carte-surbrillance: #ffd65e;
  --jb-carte-interdite: rgba(24, 13, 6, 0.55);
  --jb-carte-ancienne: rgba(24, 13, 6, 0.4);

  color-scheme: dark;
}

/* ---------- Fonds de table ---------- */

/* Nuit : table laquée sombre où se reflètent les ampoules de la guirlande. */
[data-theme="maquis"][data-fond="nuit"] {
  --jb-table-fond:
    radial-gradient(circle at 17% 24%, rgba(255, 200, 90, 0.16) 0 3px, rgba(255, 200, 90, 0) 24px),
    radial-gradient(circle at 83% 20%, rgba(90, 215, 140, 0.13) 0 3px, rgba(90, 215, 140, 0) 22px),
    radial-gradient(circle at 80% 80%, rgba(255, 115, 90, 0.13) 0 3px, rgba(255, 115, 90, 0) 22px),
    radial-gradient(circle at 20% 78%, rgba(255, 232, 170, 0.12) 0 3px, rgba(255, 232, 170, 0) 22px),
    radial-gradient(ellipse at 50% 40%, #362f58 0%, #231e40 52%, #15112a 100%);
  --jb-table-bord: 8px solid #0f0b1e;
  --jb-table-ombre: inset 0 0 0 2px rgba(255, 210, 140, 0.07), inset 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 210, 140, 0.12), 0 12px 28px rgba(0, 0, 0, 0.55);
  --jb-table-liseret: rgba(255, 200, 61, 0.22);
  --jb-table-texte: #f6f1ff;
  --jb-table-voile: rgba(8, 5, 22, 0.56);
  --jb-table-carte-ombre: 0 2px 7px rgba(0, 0, 0, 0.6);
}

/* Bois : table du maquis en bois rouge verni (planches, fil du bois). */
[data-theme="maquis"][data-fond="bois"] {
  --jb-table-fond:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 46px, rgba(42, 14, 4, 0.36) 46px 48px, rgba(255, 220, 170, 0.07) 48px 49px),
    repeating-linear-gradient(178deg, rgba(0, 0, 0, 0.06) 0 2px, rgba(0, 0, 0, 0) 2px 9px, rgba(255, 225, 180, 0.05) 9px 10px, rgba(0, 0, 0, 0) 10px 23px),
    radial-gradient(ellipse at 50% 42%, #a35f2e 0%, #83471f 55%, #5b2e14 100%);
  --jb-table-bord: 8px solid #3a1c0a;
  --jb-table-ombre: inset 0 0 0 2px rgba(255, 222, 176, 0.09), inset 0 12px 36px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.5);
  --jb-table-liseret: rgba(255, 200, 61, 0.3);
  --jb-table-texte: #fff4e2;
  --jb-table-voile: rgba(38, 14, 4, 0.56);
  --jb-table-carte-ombre: 0 2px 6px rgba(30, 10, 2, 0.58);
}

/* Clair : toile cirée crème à carreaux jaune pâle, bord en bois clair. */
[data-theme="maquis"][data-fond="clair"] {
  --jb-table-fond:
    repeating-linear-gradient(0deg, rgba(214, 150, 30, 0.08) 0 13px, rgba(214, 150, 30, 0) 13px 26px),
    repeating-linear-gradient(90deg, rgba(214, 150, 30, 0.08) 0 13px, rgba(214, 150, 30, 0) 13px 26px),
    radial-gradient(ellipse at 50% 42%, #fdf8ec 0%, #f4ead2 55%, #e7d7b3 100%);
  --jb-table-bord: 8px solid #b0803c;
  --jb-table-ombre: inset 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 10px 30px rgba(120, 84, 30, 0.2), 0 12px 28px rgba(0, 0, 0, 0.45);
  --jb-table-liseret: rgba(150, 96, 24, 0.28);
  --jb-table-texte: #2b1c0e;
  --jb-table-voile: rgba(255, 252, 244, 0.82);
  --jb-table-carte-ombre: 0 1px 2px rgba(80, 50, 15, 0.35), 0 3px 9px rgba(80, 50, 15, 0.22);
  --jb-table-halo: rgba(222, 140, 10, 0.62);
  --jb-table-surbrillance: #e09410;
  --jb-carte-ancienne: rgba(245, 236, 218, 0.55);
  --jb-de-bord: rgba(90, 60, 20, 0.45);
  --jb-de-ombre: rgba(90, 60, 20, 0.36);
}

/* ---------- Accueil : le titre JAMBO est une enseigne peinte suspendue ---------- */

[data-theme="maquis"] .accueil-entete {
  position: relative;
  isolation: isolate;
}

/* Planche jaune, contour sombre, filet vert peint, clous aux coins, ombre franche. */
[data-theme="maquis"] .accueil-entete::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -10px;
  bottom: -9px;
  left: -22px;
  right: -22px;
  border: 3px solid #2a1206;
  border-radius: 12px;
  background:
    radial-gradient(circle at 11px 11px, #6b3a16 0 2.5px, rgba(107, 58, 22, 0) 3px),
    radial-gradient(circle at calc(100% - 11px) 11px, #6b3a16 0 2.5px, rgba(107, 58, 22, 0) 3px),
    radial-gradient(circle at 11px calc(100% - 11px), #6b3a16 0 2.5px, rgba(107, 58, 22, 0) 3px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #6b3a16 0 2.5px, rgba(107, 58, 22, 0) 3px),
    repeating-linear-gradient(180deg, rgba(120, 70, 0, 0) 0 9px, rgba(120, 70, 0, 0.05) 9px 11px),
    linear-gradient(180deg, #ffd65a 0%, #f7bd2c 100%);
  outline: 2px solid #138a4b;
  outline-offset: -9px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4);
}

/* Les deux cordes qui tiennent l'enseigne. */
[data-theme="maquis"] .accueil-entete::after {
  content: '';
  position: absolute;
  z-index: -2;
  bottom: calc(100% + 10px);
  height: 100vh;
  left: 14%;
  right: 14%;
  border-left: 2px solid #b89466;
  border-right: 2px solid #b89466;
  opacity: 0.55;
}

[data-theme="maquis"] .accueil-sous-titre { font-weight: 700; }

/* Paysage : le menu est juste dessous (14 px, 8 px sur téléphone) ; la planche s'arrête plus tôt. */
[data-theme="maquis"] .app[data-disposition="paysage"] .accueil-entete::before { bottom: -4px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }

/* ---------- Accueil : décor (guirlande d'ampoules, table en bois, main de cartes, paquet) ---------- */

/* Valeurs de repli (navigateurs sans requêtes de conteneur) : tailles d'après celles de l'application. */
[data-theme="maquis"] .mq-decor {
  position: absolute;
  inset: 0;
}

[data-theme="maquis"] .mq-guirlande,
[data-theme="maquis"] .mq-scene {
  --w: clamp(56px, min(calc(var(--app-l, 400px) * 0.24), calc(var(--app-h, 800px) * 0.16)), 150px);
  --t: 0px;
}

[data-theme="maquis"] .mq-guirlande {
  position: absolute;
  top: var(--t);
  left: -16px;
  right: -16px;
  aspect-ratio: 400 / 128;
  pointer-events: none;
}

[data-theme="maquis"] .mq-guirlande--plate { display: none; aspect-ratio: 400 / 76; }

[data-theme="maquis"] .app[data-disposition="paysage"] .mq-guirlande--creuse { display: none; }

[data-theme="maquis"] .app[data-disposition="paysage"] .mq-guirlande--plate { display: block; }

[data-theme="maquis"] .mq-guirlande svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

[data-theme="maquis"] .mq-feux { will-change: opacity; animation: mq-scintille 1.9s ease-in-out infinite alternate; }

[data-theme="maquis"] .mq-feux--b { animation-delay: -1.9s; }

/* Accueil caché (table, paramètres) : la guirlande ne scintille plus (aucune image calculée pour rien). */
[data-theme="maquis"] .ecran:not(.ecran--active) .mq-feux { animation: none; }

@keyframes mq-scintille {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

/* Repère : milieu du bas de la scène ; tout se place en multiples de --w (largeur d'une carte). */
[data-theme="maquis"] .mq-scene {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 0;
}

/* Navigateurs récents : tailles calculées sur la zone de décor elle-même (requêtes de conteneur).
   --g = hauteur utile de la guirlande, --w = largeur d'une carte, scène (environ 2 --w de haut) centrée dessous ;
   en paysage, guirlande et scène forment un groupe centré (--t), face à l'enseigne. */
@supports (container-type: size) {
  [data-theme="maquis"] .mq-decor { container-type: size; }

  [data-theme="maquis"] .mq-guirlande,
  [data-theme="maquis"] .mq-scene {
    --g: calc((100cqw + 32px) * 0.3);
    --w: clamp(46px, min(25cqw, calc((100cqh - var(--g) - 12px) / 2)), 200px);
    --t: 0px;
  }

  [data-theme="maquis"] .mq-scene { bottom: max(6px, calc((100cqh - var(--g) - var(--w) * 2) / 2)); }

  [data-theme="maquis"] .app[data-disposition="paysage"] .mq-guirlande,
  [data-theme="maquis"] .app[data-disposition="paysage"] .mq-scene {
    --g: calc((100cqw + 32px) * 0.16);
    --t: max(0px, calc((100cqh - var(--g) - 10px - var(--w) * 2) / 2));
  }

  [data-theme="maquis"] .app[data-disposition="paysage"] .mq-scene { bottom: var(--t); }

  /* Portrait peu haut : guirlande plate, la table garde sa place. */
  @container (max-height: 340px) {
    [data-theme="maquis"] .mq-guirlande,
    [data-theme="maquis"] .mq-scene { --g: calc((100cqw + 32px) * 0.16); }

    [data-theme="maquis"] .mq-guirlande--creuse { display: none; }

    [data-theme="maquis"] .mq-guirlande--plate { display: block; }
  }
}

/* Plateau rond en bois vu de face (ellipse), chant plus sombre. */
[data-theme="maquis"] .mq-table {
  position: absolute;
  left: calc(var(--w) * -1.95);
  width: calc(var(--w) * 3.9);
  bottom: calc(var(--w) * 0.08);
  height: calc(var(--w) * 0.62);
  border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 calc(var(--w) * 0.5), rgba(40, 14, 4, 0.3) calc(var(--w) * 0.5) calc(var(--w) * 0.5 + 2px)),
    radial-gradient(ellipse at 50% 30%, #b06a35 0%, #8a4b22 60%, #6a3617 100%);
  box-shadow: inset 0 2px 0 rgba(255, 222, 176, 0.22), 0 calc(var(--w) * 0.07) 0 #3e1d0a, 0 calc(var(--w) * 0.12) calc(var(--w) * 0.14) rgba(0, 0, 0, 0.45);
}

[data-theme="maquis"] .mq-main {
  position: absolute;
  left: calc(var(--w) * -0.45);
  bottom: calc(var(--w) * 0.36);
}

[data-theme="maquis"] .mq-carte {
  position: absolute;
  left: calc(var(--w) * -0.5);
  bottom: 0;
  width: var(--w);
  aspect-ratio: 250 / 350;
  border-radius: 7%;
  transform-origin: 50% 135%;
  transform: rotate(calc(var(--i) * 11deg));
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="maquis"] .mq-carte svg { display: block; width: 100%; height: 100%; }

/* Paquet posé sur la table, à droite de la main (dos du thème). */
[data-theme="maquis"] .mq-paquet {
  position: absolute;
  left: calc(var(--w) * 1.02);
  bottom: calc(var(--w) * 0.24);
  width: calc(var(--w) * 0.74);
  aspect-ratio: 250 / 350;
  transform: rotate(9deg);
}

[data-theme="maquis"] .mq-dos {
  position: absolute;
  inset: 0;
  border-radius: 7%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="maquis"] .mq-dos + .mq-dos { transform: translate(-4%, -3%) rotate(-4deg); }

[data-theme="maquis"] .mq-dos img { display: block; width: 100%; height: 100%; }

/* ---------- Table : avatars aux couleurs des chaises en plastique ---------- */

[data-theme="maquis"] .siege[data-siege="2"] .siege-avatar { background: linear-gradient(160deg, #148045 0%, #0e6235 100%); }

[data-theme="maquis"] .siege[data-siege="3"] .siege-avatar { background: linear-gradient(160deg, #2f6fc0 0%, #22549a 100%); }

/* Fond Clair : contour de focus clavier des piles en brun (le jaune du focus ne se voit pas sur la toile crème). */
[data-theme="maquis"][data-fond="clair"] .pile:focus-visible .carte:last-child .carte-corps { outline-color: #7a3f00; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="maquis"] .mq-feux { animation: none; }
}

/* ---------- Mises, annonces géantes, feu, roll, Full (retours du 12/10) ----------
   Pièces bien jaunes du maquis ; annonces en lettres rondes cernées de brun, lueur des guirlandes. */
[data-theme="maquis"] {
  --jb-piece-or: #ffc83d;
  --jb-piece-reflet: #fff4c2;
  --jb-piece-sombre: #b8800a;
  --jb-piece-tranche: #7a5206;
  --jb-piece-bord: rgba(80, 40, 6, 0.55);
  --jb-mise-fond: rgba(33, 18, 9, 0.9);
  --jb-mise-texte: #ffe08a;
  --jb-annonce-police: 'Lilita One', 'Arial Black', sans-serif;
  --jb-annonce-contour: #2a1206;
  --jb-annonce-lueur: rgba(255, 200, 61, 0.65);
  --jb-annonce-voile: radial-gradient(ellipse at 50% 50%, rgba(33, 18, 9, 0.68) 0%, rgba(33, 18, 9, 0.3) 55%, rgba(33, 18, 9, 0) 80%);
  --jb-annonce-accent: #ffc83d;
  --jb-annonce-accent-texte: #2a1206;
  --jb-frapper-fond: linear-gradient(180deg, #e2452c 0%, #9a1c0e 100%);
  --jb-frapper-bord: #fff1cf;
  --jb-roll-fond: rgba(33, 18, 9, 0.9);
  --jb-roll-bord: rgba(255, 200, 61, 0.8);
  --jb-full-etoile: #ffc83d;
}