/* =====================================================================
   Mancala — styles propres au jeu (préfixe mcl-)
   La barre, le plein écran et les infobulles sont dans css/games.css.
   Les tailles du plateau dépendent de --u (diamètre d'une case), posé par game.js.
   ===================================================================== */

.mcl-jeu {
  --mg-jeu-largeur: 1204px; /* barre de 1180 px + marges de 12 px : ne pas changer */
  --mgb-fond: linear-gradient(120deg, #2a1206, #6b2f12 60%, #a2521f);
  --mgb-accent: #f6c453;
  --mgb-titre: linear-gradient(100deg, #fff4dc, #f6c453);
  --mgb-police-titre: "Fraunces", Georgia, serif;
  --mg-stat-largeur: 3.4em;
  --mg-fs-fond: #1b0d07;
  --mg-bulle-fond: #3a1a0a;
  --mcl-or: #f6c453;
  --mcl-corail: #ff7a59;
  --mcl-creme: #fbefd8;
}

.mcl-jeu [hidden] {
  display: none !important;
}

/* ---------- Zone : un pagne aux motifs géométriques sous le plateau ---------- */
.mcl-zone {
  position: relative;
  box-sizing: border-box;
  align-self: center;
  width: min(var(--mg-barre-largeur, 1180px), calc(100vw - 24px));
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 50%,
      rgba(255, 170, 90, 0.2),
      transparent 70%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='none' stroke='%23f6c453' stroke-width='2' stroke-opacity='.09'%3E%3Cpath d='M36 6 66 36 36 66 6 36z'/%3E%3Cpath d='M36 20 52 36 36 52 20 36z'/%3E%3C/g%3E%3Ccircle cx='36' cy='36' r='3.5' fill='%23ff7a59' fill-opacity='.18'/%3E%3Cg fill='%23f6c453' fill-opacity='.12'%3E%3Ccircle cx='0' cy='0' r='5'/%3E%3Ccircle cx='72' cy='0' r='5'/%3E%3Ccircle cx='0' cy='72' r='5'/%3E%3Ccircle cx='72' cy='72' r='5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #4a2412, #24100a 70%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.55);
  user-select: none;
  -webkit-user-select: none;
}

.mcl-jeu.mg-fs .mcl-zone {
  align-self: stretch;
  width: auto;
  flex: 1;
  min-height: 0;
}

.mcl-scene {
  --u: 80px;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.2);
  font-family: "Fraunces", Georgia, serif;
  color: var(--mcl-creme);
}

/* ---------- Étiquettes des joueurs ---------- */
.mcl-tag {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.16);
  width: var(--mcl-largeur, 800px);
  height: calc(var(--u) * 0.56);
  padding: 0 calc(var(--u) * 0.3);
  box-sizing: border-box;
  opacity: 0.62;
  transition: opacity 0.3s;
}
.mcl-tag.actif {
  opacity: 1;
}
.mcl-avatar {
  flex: none;
  width: calc(var(--u) * 0.44);
  height: calc(var(--u) * 0.44);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 30%,
      rgba(255, 255, 255, 0.9) 0 7%,
      transparent 26%
    ),
    radial-gradient(
      circle at 55% 65%,
      var(--c2, #8fe0bd),
      var(--c, #2f9e74) 62%,
      var(--c3, #145740)
    );
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}
.mcl-tag.actif .mcl-avatar {
  animation: mcl-pouls 1.6s ease-in-out infinite;
}
@keyframes mcl-pouls {
  0%,
  100% {
    box-shadow:
      0 3px 8px rgba(0, 0, 0, 0.5),
      0 0 0 0 rgba(246, 196, 83, 0.55);
  }
  50% {
    box-shadow:
      0 3px 8px rgba(0, 0, 0, 0.5),
      0 0 0 calc(var(--u) * 0.1) rgba(246, 196, 83, 0);
  }
}
#mcl-tag1 .mcl-avatar {
  --c: #e0604b;
  --c2: #ffb09c;
  --c3: #7d2416;
}
.mcl-tag-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.mcl-nom {
  color: var(--mcl-creme);
  font-size: max(13px, calc(var(--u) * 0.2));
  font-weight: 700;
  letter-spacing: 0.01em;
}
.mcl-tag.actif .mcl-nom {
  color: var(--mcl-creme);
  color: var(--mcl-or);
}
.mcl-statut {
  font-size: max(11px, calc(var(--u) * 0.14));
  font-family: Outfit, system-ui, sans-serif;
  color: rgba(251, 239, 216, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.2em;
}
.mcl-statut .pts::after {
  content: "";
  animation: mcl-points 1.2s steps(4) infinite;
}
@keyframes mcl-points {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}
.mcl-tag-info {
  margin-left: auto;
  font-family: Outfit, system-ui, sans-serif;
  font-size: max(11px, calc(var(--u) * 0.13));
  color: rgba(251, 239, 216, 0.6);
  white-space: nowrap;
}
.mcl-tag-info b {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  border: 1px solid rgba(246, 196, 83, 0.4);
  color: var(--mcl-or);
  font-weight: 600;
}

/* ---------- Plateau de bois sculpté ---------- */
.mcl-plateau {
  position: relative;
  flex: none;
  border-radius: calc(var(--u) * 0.95);
  background:
    radial-gradient(
      ellipse 60% 70% at 28% 18%,
      rgba(255, 222, 170, 0.28),
      transparent 60%
    ),
    radial-gradient(
      ellipse 40% 60% at 85% 90%,
      rgba(40, 12, 2, 0.35),
      transparent 70%
    ),
    repeating-linear-gradient(
      92deg,
      transparent 0 calc(var(--u) * 0.05),
      rgba(70, 28, 8, 0.16) calc(var(--u) * 0.05) calc(var(--u) * 0.062),
      transparent calc(var(--u) * 0.062) calc(var(--u) * 0.15)
    ),
    repeating-linear-gradient(
      88deg,
      rgba(255, 214, 160, 0.06) 0 3px,
      transparent 3px 13px
    ),
    linear-gradient(180deg, #c27234, #96501f 52%, #723714);
  box-shadow:
    0 calc(var(--u) * 0.08) 0 #4e220b,
    0 calc(var(--u) * 0.28) calc(var(--u) * 0.5) rgba(0, 0, 0, 0.6),
    inset 0 2px 0 rgba(255, 232, 196, 0.4),
    inset 0 -4px 8px rgba(0, 0, 0, 0.3);
}
/* filet gravé et rainure centrale */
.mcl-plateau::before {
  content: "";
  position: absolute;
  inset: calc(var(--u) * 0.12);
  border-radius: calc(var(--u) * 0.83);
  border: 1.5px solid rgba(255, 222, 176, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(60, 20, 4, 0.3),
    0 0 0 1px rgba(60, 20, 4, 0.25);
  pointer-events: none;
}
.mcl-rainure {
  position: absolute;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(50, 18, 4, 0.55),
    rgba(255, 220, 170, 0.25)
  );
  pointer-events: none;
}

.mcl-case,
.mcl-grenier {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: radial-gradient(
    circle at 50% 36%,
    #351705 0%,
    #4b220c 42%,
    #683113 70%,
    #7f3e18 100%
  );
  box-shadow:
    inset 0 calc(var(--u) * 0.1) calc(var(--u) * 0.16) rgba(0, 0, 0, 0.78),
    inset 0 calc(var(--u) * -0.03) calc(var(--u) * 0.05)
      rgba(255, 196, 136, 0.28),
    0 1px 0 rgba(255, 226, 186, 0.4),
    0 -1px 0 rgba(40, 14, 2, 0.5);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.mcl-case {
  border-radius: 50%;
  cursor: default;
}
.mcl-grenier {
  border-radius: calc(var(--u) * 0.52);
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 50% at 50% 40%,
    #351705 0%,
    #4b220c 45%,
    #683113 75%,
    #7f3e18 100%
  );
}
/* anneaux d'état (survol, aperçu, prise) */
.mcl-case::after,
.mcl-grenier::after {
  content: "";
  position: absolute;
  inset: calc(var(--u) * -0.05);
  border-radius: inherit;
  border: 2px solid transparent;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
  pointer-events: none;
}
.mcl-case.jouable {
  cursor: pointer;
}
.mcl-case.jouable::after {
  border-color: rgba(246, 196, 83, 0.22);
}
.mcl-case.jouable:hover::after,
.mcl-case.jouable:focus-visible::after {
  border-color: var(--mcl-or);
  box-shadow: 0 0 calc(var(--u) * 0.18) rgba(246, 196, 83, 0.55);
}
.mcl-case.trace::after {
  border: 2px dashed rgba(255, 230, 180, 0.45);
}
.mcl-case.arrivee::after,
.mcl-grenier.arrivee::after {
  border: 3px solid #fff1c4;
  box-shadow: 0 0 calc(var(--u) * 0.22) rgba(255, 236, 180, 0.7);
  animation: mcl-cible 0.9s ease-in-out infinite;
}
@keyframes mcl-cible {
  50% {
    transform: scale(1.06);
  }
}
.mcl-case.proie-prevue::after {
  border: 3px solid var(--mcl-corail);
  box-shadow: 0 0 calc(var(--u) * 0.25) rgba(255, 122, 89, 0.75);
}
.mcl-case.proie::after {
  animation: mcl-proie 0.45s ease-in-out 2;
  border: 3px solid var(--mcl-corail);
}
@keyframes mcl-proie {
  50% {
    box-shadow: 0 0 calc(var(--u) * 0.45) rgba(255, 122, 89, 0.95);
    transform: scale(1.1);
  }
}
.mcl-case.astuce::after {
  inset: calc(var(--u) * -0.08);
  border: 3px solid #7ef0c0;
  box-shadow: 0 0 calc(var(--u) * 0.3) rgba(126, 240, 192, 0.8), inset 0 0 calc(var(--u) * 0.15) rgba(126, 240, 192, 0.45);
  animation: mcl-astuce 1.1s ease-in-out infinite;
}
@keyframes mcl-astuce {
  50% { transform: scale(1.08); box-shadow: 0 0 calc(var(--u) * 0.5) rgba(126, 240, 192, 0.95), inset 0 0 calc(var(--u) * 0.2) rgba(126, 240, 192, 0.6); }
}
.mcl-case.dernier::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 0.1);
  height: calc(var(--u) * 0.1);
  margin: calc(var(--u) * -0.05);
  border-radius: 50%;
  background: rgba(246, 196, 83, 0.5);
  box-shadow: 0 0 calc(var(--u) * 0.12) rgba(246, 196, 83, 0.6);
}
.mcl-case.refus {
  animation: mcl-refus 0.35s;
}
@keyframes mcl-refus {
  25% {
    translate: -4px 0;
  }
  75% {
    translate: 4px 0;
  }
}

/* nombres gravés dans le bois */
.mcl-nb {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: max(10px, calc(var(--u) * 0.2));
  color: rgba(255, 232, 196, 0.78);
  text-shadow:
    0 -1px 0 rgba(50, 18, 4, 0.7),
    0 1px 0 rgba(255, 226, 186, 0.25);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.mcl-nb.vide {
  color: rgba(255, 232, 196, 0.3);
}
.mcl-nb.pop {
  animation: mcl-pop 0.25s ease-out;
}
@keyframes mcl-pop {
  50% {
    transform: translate(-50%, -50%) scale(1.35);
    color: #fff;
  }
}
.mcl-nb.gros {
  font-size: max(12px, calc(var(--u) * 0.26));
  font-weight: 900;
  color: var(--mcl-or);
  padding: 0.05em 0.55em;
  border-radius: 999px;
  background: rgba(50, 18, 4, 0.45);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 226, 186, 0.25);
}

/* ---------- Graines : perles de verre ---------- */
.mcl-graines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mcl-graine {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 0.245);
  height: calc(var(--u) * 0.2);
  margin: calc(var(--u) * -0.1) 0 0 calc(var(--u) * -0.1225);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 30%,
      rgba(255, 255, 255, 0.95) 0 6%,
      rgba(255, 255, 255, 0.35) 14%,
      transparent 32%
    ),
    radial-gradient(circle at 62% 72%, var(--c2), var(--c) 58%, var(--c3) 100%);
  box-shadow:
    0 calc(var(--u) * 0.025) calc(var(--u) * 0.03) rgba(0, 0, 0, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.35);
  will-change: transform;
}
.mcl-graine.en-main {
  box-shadow:
    0 calc(var(--u) * 0.12) calc(var(--u) * 0.1) rgba(0, 0, 0, 0.45),
    inset 0 -1px 2px rgba(0, 0, 0, 0.35);
}

/* gains flottants et aperçu */
.mcl-gain {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: max(16px, calc(var(--u) * 0.36));
  color: var(--mcl-or);
  text-shadow:
    0 2px 0 #5a2509,
    0 0 18px rgba(246, 196, 83, 0.6);
  pointer-events: none;
  white-space: nowrap;
  z-index: 900;
  animation: mcl-monte 1.5s ease-out forwards;
}
@keyframes mcl-monte {
  0% {
    opacity: 0;
    translate: 0 20%;
    scale: 0.6;
  }
  18% {
    opacity: 1;
    scale: 1.1;
  }
  30% {
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: 0 -120%;
  }
}
.mcl-prevu {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0.2em 0.6em;
  border-radius: 999px;
  background: var(--mcl-corail);
  color: #fff;
  font-family: Outfit, system-ui, sans-serif;
  font-weight: 700;
  font-size: max(11px, calc(var(--u) * 0.15));
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  white-space: nowrap;
  z-index: 950;
}
.mcl-prevu.rejoue {
  background: #2f9e74;
}

/* ---------- Fenêtres (réglages, fin de partie) ---------- */
.mcl-voile {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(24, 9, 3, 0.62);
  backdrop-filter: blur(3px);
  animation: mcl-fondu 0.25s ease-out;
}
@keyframes mcl-fondu {
  from {
    opacity: 0;
  }
}
.mcl-carte {
  position: relative;
  width: min(520px, 100%);
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 24px 28px 20px;
  border-radius: 20px;
  color: #3b1a0a;
  font-family: Outfit, system-ui, sans-serif;
  background:
    radial-gradient(
      ellipse at 20% 0%,
      rgba(255, 255, 255, 0.7),
      transparent 60%
    ),
    linear-gradient(180deg, #fbf0da, #efd9b0);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 0 0 5px rgba(160, 82, 31, 0.12);
  animation: mcl-entree 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes mcl-entree {
  from {
    transform: translateY(16px) scale(0.94);
    opacity: 0;
  }
}
.mcl-carte h2 {
  margin: 0 0 14px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  font-size: 1.7em;
  color: #6b2f12;
  text-align: center;
}
.mcl-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.mcl-ligne-lib {
  font-weight: 600;
}
.mcl-ligne.inactif {
  opacity: 0.4;
  pointer-events: none;
}
.mcl-choix {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(107, 47, 18, 0.12);
  box-shadow: inset 0 1px 3px rgba(80, 30, 5, 0.25);
}
.mcl-choix button {
  border: 0;
  background: transparent;
  color: #6b2f12;
  font: inherit;
  font-size: 0.92em;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.mcl-choix button:hover {
  background: rgba(107, 47, 18, 0.1);
}
.mcl-choix button.choisi {
  background: linear-gradient(180deg, #b45d25, #7c3914);
  color: #fff4dc;
  box-shadow: 0 2px 5px rgba(80, 30, 5, 0.35);
}
.mcl-aide {
  margin: -2px 0 6px;
  font-size: 0.86em;
  color: #7a4a2c;
  line-height: 1.35;
}
.mcl-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.mcl-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 24px;
  font: inherit;
  font-weight: 700;
  color: #3b1a0a;
  background: linear-gradient(180deg, #ffd977, #f0a83a);
  box-shadow:
    0 3px 0 #a4621c,
    0 6px 14px rgba(120, 50, 10, 0.3);
  cursor: pointer;
  transition:
    transform 0.1s,
    filter 0.15s;
}
.mcl-btn:hover {
  filter: brightness(1.06);
}
.mcl-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #a4621c;
}
.mcl-btn-doux {
  background: rgba(107, 47, 18, 0.1);
  box-shadow: inset 0 0 0 1.5px rgba(107, 47, 18, 0.3);
}
.mcl-btn-doux:active {
  box-shadow: inset 0 0 0 1.5px rgba(107, 47, 18, 0.3);
}

/* fin de partie */
.mcl-carte-fin {
  text-align: center;
  width: min(400px, 100%);
}
.mcl-fin-graines {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}
.mcl-fin-graines i {
  width: 18px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 30%,
      rgba(255, 255, 255, 0.95) 0 6%,
      transparent 30%
    ),
    radial-gradient(circle at 62% 72%, #ffffff, #f3eee4 58%, #a39882);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  animation: mcl-saut 1.2s ease-in-out infinite;
}
.mcl-fin-graines i:nth-child(2) {
  animation-delay: 0.1s;
}
.mcl-fin-graines i:nth-child(3) {
  animation-delay: 0.2s;
}
.mcl-fin-graines i:nth-child(4) {
  animation-delay: 0.3s;
}
.mcl-fin-graines i:nth-child(5) {
  animation-delay: 0.4s;
}
@keyframes mcl-saut {
  0%,
  60%,
  100% {
    transform: none;
  }
  30% {
    transform: translateY(-9px);
  }
}
.mcl-fin-score {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  font-size: 3em;
  line-height: 1;
  color: #6b2f12;
  display: flex;
  justify-content: center;
  gap: 0.35em;
}
.mcl-fin-score em {
  font-style: normal;
  color: rgba(107, 47, 18, 0.35);
}
.mcl-fin-noms {
  display: flex;
  justify-content: center;
  gap: 2.4em;
  margin: 6px 0 12px;
  font-size: 0.85em;
  color: #7a4a2c;
}
.mcl-fin-texte {
  margin: 0 0 6px;
}
.mcl-fin-bilan {
  margin: 0;
  font-size: 0.85em;
  color: #7a4a2c;
}
.mcl-fin-bilan:empty {
  display: none;
}

@media (max-width: 600px) {
  .mcl-tag-info {
    display: none;
  }
  .mcl-carte {
    padding: 18px 16px 16px;
  }
  .mcl-choix button {
    padding: 6px 9px;
  }
}
.mcl-choix button:focus-visible {
  outline: 2px solid #b45d25;
  outline-offset: 1px;
}