/* ===================================================
   KURO ARCANA — Mini Jeux (classes .mj-* uniquement)
   Construit sur les variables :root de style.css.
   =================================================== */

.mj-intro {
  margin: -8px 0 24px;
  font-family: 'Raleway', sans-serif;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 1px;
}

/* ---------- GRILLE DE TUILES ---------- */
.mj-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
}

.mj-grille[hidden] {
  display: none;
}

.mj-tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 230px;
  padding: 24px 18px;
  border-radius: 14px;
  border: 1px solid var(--or-pale);
  background:
    radial-gradient(circle at 50% 0%, rgba(153, 50, 204, 0.25), transparent 65%),
    linear-gradient(160deg, var(--noir-fonce), var(--noir-teinte-rouge));
  color: #fff;
  text-align: center;
  font: inherit;
  overflow: hidden;
}

.mj-tuile-icone {
  font-size: 2.6rem;
  line-height: 1;
}

.mj-tuile-nom {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 2px;
  color: var(--or-dore);
  text-shadow: 0 0 10px var(--glow-or);
}

.mj-tuile-desc {
  font-family: 'Raleway', sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 26ch;
}

.mj-tuile-badge {
  margin-top: 6px;
  padding: 5px 16px;
  border-radius: 20px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 2px;
}

/* Tuile jouable */
.mj-tuile-jouable {
  cursor: pointer;
  box-shadow: 0 0 18px var(--glow-violet);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.mj-tuile-jouable:hover,
.mj-tuile-jouable:focus-visible {
  transform: translateY(-4px);
  border-color: var(--or-dore);
  box-shadow: 0 0 28px var(--glow-or), 0 0 40px var(--glow-violet);
  outline: none;
}

.mj-tuile-jouable:focus-visible {
  outline: 2px solid var(--or-dore);
  outline-offset: 3px;
}

.mj-tuile-jouable .mj-tuile-badge {
  background: var(--rouge-sang);
  border: 1px solid var(--or-dore);
  color: var(--or-dore);
}

/* Grandes tuiles des trois jeux : une teinte par jeu */
.mj-grille {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.mj-grille .mj-tuile {
  --mj-teinte: var(--or-dore);
  --mj-fond: rgba(153, 50, 204, 0.3);
  gap: 12px;
  min-height: 360px;
  padding: 32px 22px 26px;
  border: 1px solid color-mix(in srgb, var(--mj-teinte) 65%, transparent);
  border-radius: 20px;
  outline: 1px solid color-mix(in srgb, var(--mj-teinte) 20%, transparent);
  outline-offset: -8px;
  background:
    radial-gradient(circle at 50% 22%, var(--mj-fond), transparent 60%),
    linear-gradient(170deg, #1d0812, var(--noir-extreme));
  box-shadow: 0 0 22px color-mix(in srgb, var(--mj-teinte) 25%, transparent), inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.mj-grille .mj-tuile-blackjack { --mj-teinte: var(--rouge-lumineux); --mj-fond: rgba(220, 20, 60, 0.32); }
.mj-grille .mj-tuile-poker { --mj-teinte: var(--violet-orchidee); --mj-fond: rgba(153, 50, 204, 0.38); }

.mj-grille .mj-tuile:hover,
.mj-grille .mj-tuile:focus-visible {
  border-color: var(--mj-teinte);
  box-shadow: 0 0 34px color-mix(in srgb, var(--mj-teinte) 45%, transparent), inset 0 0 40px rgba(0, 0, 0, 0.6);
}

/* Médaillon de l'icône */
.mj-grille .mj-tuile-icone {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border: 2px solid color-mix(in srgb, var(--mj-teinte) 70%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--mj-teinte) 22%, transparent), rgba(10, 5, 5, 0.9) 70%);
  box-shadow: 0 0 24px color-mix(in srgb, var(--mj-teinte) 40%, transparent);
  font-size: 3.4rem;
}

.mj-grille .mj-tuile-nom {
  font-size: 1.5rem;
  color: var(--mj-teinte);
  text-shadow: 0 0 12px color-mix(in srgb, var(--mj-teinte) 55%, transparent);
}

.mj-grille .mj-tuile-yams .mj-tuile-nom { color: var(--or-dore); }

.mj-grille .mj-tuile-desc { font-size: 0.95rem; max-width: 30ch; }

.mj-tuile-plafond {
  padding: 6px 12px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 10px;
  background: rgba(10, 5, 5, 0.75);
  color: var(--or-lumineux);
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
}

.mj-tuile-plafond-atteint {
  border-color: rgba(255, 56, 96, 0.5);
  color: var(--rouge-lumineux);
}

.mj-grille .mj-tuile-badge {
  margin-top: auto;
  padding: 9px 28px;
  border: 1px solid #fff1b0;
  background: linear-gradient(180deg, #ffe27a, var(--or-dore) 45%, var(--or-pale));
  color: var(--noir-fonce);
  font-size: 0.95rem;
  box-shadow: 0 0 14px var(--glow-or);
}

.mj-de-svg {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 10px var(--glow-or));
}

.mj-de-svg rect {
  fill: var(--noir-extreme);
  stroke: var(--or-dore);
  stroke-width: 4;
}

.mj-de-svg circle {
  fill: var(--or-dore);
}

/* ---------- ZONE DE JEU ---------- */
.mj-zone {
  margin-top: 28px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .mj-grille { grid-template-columns: 1fr; }
  .mj-grille .mj-tuile { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mj-tuile-jouable {
    transition: none;
  }
  .mj-tuile-jouable:hover,
  .mj-tuile-jouable:focus-visible {
    transform: none;
  }
}


/* ===================================================
   YAMS — plateau, dés, feuille de score (étape 3)
   =================================================== */

.mj-yams {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- BANDEAU DE TOUR ---------- */
.mj-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 18px;
  border: 1px solid var(--or-pale);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(139, 0, 0, 0.45), rgba(75, 0, 130, 0.45));
  box-shadow: 0 0 18px var(--glow-rouge);
}

.mj-bandeau-tour {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: var(--or-dore);
  text-shadow: 0 0 12px var(--glow-or);
  font-variant-numeric: tabular-nums;
}

.mj-bandeau-mode {
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- TABLE : TAPIS + FEUILLE ---------- */
.mj-table {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.mj-tapis {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 40px 20px 28px;
  border-radius: 18px;
  border: 2px solid var(--violet-royal);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(107, 0, 128, 0.55), transparent 70%),
    radial-gradient(circle at 15% 85%, rgba(139, 0, 0, 0.35), transparent 45%),
    linear-gradient(160deg, #1a0526, var(--noir-fonce));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8), 0 0 24px var(--glow-violet);
  overflow: hidden;
}

/* Runes discrètes sur le pourtour du tapis */
.mj-tapis::before,
.mj-tapis::after {
  position: absolute;
  left: 0;
  right: 0;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: 1.2em;
  text-align: center;
  color: var(--or-pale);
  opacity: 0.18;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.mj-tapis::before {
  content: "ᚠ ᚱ ᛟ ᛉ ᚦ ᛗ ᚨ ᛞ ᛊ ᚲ ᛏ ᛇ ᚹ ᛃ";
  top: 10px;
}

.mj-tapis::after {
  content: "ᛇ ᛏ ᚲ ᛊ ᛞ ᚨ ᛗ ᚦ ᛉ ᛟ ᚱ ᚠ ᚹ ᛃ";
  bottom: 8px;
}

/* ---------- DÉS ---------- */
.mj-des {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding-top: 12px;
}

.mj-de {
  position: relative;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid var(--or-pale);
  border-radius: 14px;
  background: radial-gradient(circle at 30% 25%, #2a1a2e, var(--noir-extreme) 70%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(153, 50, 204, 0.25);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.mj-de:disabled {
  cursor: default;
}

.mj-de:focus-visible {
  outline: 2px solid var(--or-dore);
  outline-offset: 3px;
}

.mj-de-face {
  position: absolute;
  inset: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.mj-point {
  width: 12px;
  height: 12px;
  margin: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--or-lumineux), var(--or-pale));
  box-shadow: 0 0 6px var(--glow-or);
}

.mj-point-1 { grid-area: 1 / 1; }
.mj-point-3 { grid-area: 1 / 3; }
.mj-point-4 { grid-area: 2 / 1; }
.mj-point-5 { grid-area: 2 / 2; }
.mj-point-6 { grid-area: 2 / 3; }
.mj-point-7 { grid-area: 3 / 1; }
.mj-point-9 { grid-area: 3 / 3; }

/* Dé pas encore lancé */
.mj-de-vide {
  opacity: 0.45;
  border-style: dashed;
}

/* Dé gardé : soulevé, lueur dorée, libellé */
.mj-de-est-garde {
  transform: translateY(-12px);
  border-color: var(--or-dore);
  box-shadow: 0 0 18px var(--glow-or), 0 0 34px var(--glow-or), 0 14px 18px rgba(0, 0, 0, 0.6);
}

.mj-de-garde {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: var(--or-dore);
  text-shadow: 0 0 8px var(--glow-or);
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.mj-de-est-garde .mj-de-garde {
  opacity: 1;
}

/* Lancer : rotation et bref flou */
.mj-de-roule {
  animation: mj-roule 0.65s cubic-bezier(0.3, 0.7, 0.4, 1);
}

@keyframes mj-roule {
  0%   { transform: rotate(0deg) scale(1); filter: blur(0); }
  25%  { transform: rotate(200deg) scale(0.85) translateY(-10px); filter: blur(2px); }
  60%  { transform: rotate(520deg) scale(1.08); filter: blur(1.5px); }
  100% { transform: rotate(720deg) scale(1); filter: blur(0); }
}

.mj-consigne {
  margin: 8px 0 0;
  min-height: 1.4em;
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- BOUTONS ---------- */
.mj-btn {
  padding: 12px 26px;
  border: 1px solid var(--or-dore);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--rouge-sang), var(--violet-royal));
  color: var(--or-dore);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 0 16px var(--glow-rouge);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.mj-btn:hover:not(:disabled),
.mj-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 24px var(--glow-or);
}

.mj-btn:focus-visible {
  outline: 2px solid var(--or-dore);
  outline-offset: 3px;
}

.mj-btn:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.mj-btn-lancer {
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.mj-btn-secondaire {
  background: transparent;
  box-shadow: none;
}

/* ---------- FEUILLE DE SCORE ---------- */
.mj-feuille {
  padding: 16px;
  border: 1px solid var(--or-pale);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(26, 10, 10, 0.92), rgba(42, 10, 10, 0.92));
  box-shadow: 0 0 18px var(--glow-violet);
}

.mj-feuille-titre {
  margin: 0 0 10px;
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  letter-spacing: 2px;
  color: var(--or-dore);
  text-align: center;
}

.mj-score {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.mj-score th {
  padding: 5px 6px;
  text-align: left;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.mj-score td {
  padding: 3px 0;
  width: 72px;
  text-align: right;
}

.mj-score tr + tr {
  border-top: 1px solid rgba(218, 165, 32, 0.12);
}

.mj-case {
  width: 64px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px dashed rgba(218, 165, 32, 0.35);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: right;
}

.mj-case:disabled {
  cursor: default;
}

/* Aperçu des points possibles sur une case libre */
.mj-case-apercu {
  cursor: pointer;
  border-style: solid;
  border-color: var(--violet-orchidee);
  color: var(--or-lumineux);
  background: rgba(153, 50, 204, 0.15);
}

.mj-case-apercu:hover,
.mj-case-apercu:focus-visible {
  background: rgba(255, 215, 0, 0.18);
  border-color: var(--or-dore);
  box-shadow: 0 0 10px var(--glow-or);
  outline: none;
}

.mj-case-zero {
  color: rgba(255, 255, 255, 0.45);
  border-color: rgba(153, 50, 204, 0.5);
}

/* Case remplie : verrouillée */
.mj-case-remplie {
  border: 1px solid rgba(218, 165, 32, 0.4);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.mj-case-remplie::before {
  content: "🔒 ";
  font-size: 0.7em;
  opacity: 0.6;
}

/* Jauge du bonus 63 */
.mj-bonus {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 10px;
  padding: 8px 6px;
  border-top: 1px solid rgba(218, 165, 32, 0.25);
  border-bottom: 1px solid rgba(218, 165, 32, 0.25);
}

.mj-bonus-ligne {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
}

.mj-jauge {
  height: 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(218, 165, 32, 0.3);
  overflow: hidden;
}

.mj-jauge-remplie {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--violet-orchidee), var(--or-dore));
  box-shadow: 0 0 10px var(--glow-or);
  transition: width var(--transition-smooth);
}

.mj-jauge-atteinte .mj-jauge-remplie {
  background: linear-gradient(90deg, var(--or-pale), var(--or-lumineux));
}

/* Totaux */
.mj-totaux {
  margin-top: 6px;
}

.mj-totaux td {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #fff;
  padding-right: 8px;
}

.mj-total th,
.mj-total td {
  padding-top: 8px;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--or-dore);
  text-shadow: 0 0 10px var(--glow-or);
}

/* ---------- CALQUES (confirmation, fin de partie) ---------- */
.mj-calque {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.75);
}

.mj-calque[hidden] {
  display: none;
}

.mj-calque-boite {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 22px;
  text-align: center;
  border: 2px solid var(--or-pale);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(153, 50, 204, 0.35), transparent 70%),
    linear-gradient(160deg, var(--noir-fonce), var(--noir-teinte-rouge));
  box-shadow: 0 0 40px var(--glow-violet);
  animation: mj-apparition 0.3s ease-out;
}

.mj-calque-titre {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--or-dore);
  text-shadow: 0 0 10px var(--glow-or);
}

.mj-calque-texte {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  color: rgba(255, 255, 255, 0.85);
}

.mj-calque-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.mj-fin-surtitre {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.mj-fin-score {
  font-size: 2.2rem;
  font-weight: 900;
}

@keyframes mj-apparition {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .mj-table {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .mj-bandeau-tour {
    font-size: 1.1rem;
  }
  .mj-tapis {
    padding: 34px 10px 22px;
  }
  .mj-des {
    gap: 6px;
    flex-wrap: nowrap;
  }
  .mj-de {
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }
  .mj-de-face {
    inset: 7px;
  }
  .mj-point {
    width: 9px;
    height: 9px;
  }
  .mj-de-garde {
    font-size: 0.55rem;
    letter-spacing: 1px;
    bottom: -22px;
  }
  .mj-btn-lancer {
    width: 100%;
    padding: 12px 10px;
    font-size: 0.95rem;
    letter-spacing: 1px;
  }
  .mj-feuille {
    padding: 12px 10px;
  }
}

/* ---------- MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion: reduce) {
  .mj-de,
  .mj-de-garde,
  .mj-btn,
  .mj-jauge-remplie {
    transition: none;
  }
  .mj-de-roule,
  .mj-calque-boite {
    animation: none;
  }
  .mj-btn:hover:not(:disabled),
  .mj-btn:focus-visible {
    transform: none;
  }
}

/* ===================================================
   YAMS CONTRE LE ROBOT (étape 4)
   =================================================== */

/* ---------- CHOIX DU NIVEAU ---------- */
.mj-choix {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.mj-choix-titre {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  letter-spacing: 3px;
  color: var(--or-dore);
  text-shadow: 0 0 12px var(--glow-or);
  text-align: center;
}

.mj-niveaux {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.mj-niveau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  border-radius: 14px;
  border: 1px solid var(--or-pale);
  background:
    radial-gradient(circle at 50% 0%, var(--mj-niveau-halo), transparent 70%),
    linear-gradient(160deg, var(--noir-fonce), var(--noir-teinte-rouge));
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 16px var(--glow-violet);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.mj-niveau-facile { --mj-niveau-halo: rgba(153, 50, 204, 0.25); }
.mj-niveau-normal { --mj-niveau-halo: rgba(220, 20, 60, 0.3); }
.mj-niveau-difficile { --mj-niveau-halo: rgba(255, 215, 0, 0.25); }

.mj-niveau:hover,
.mj-niveau:focus-visible {
  transform: translateY(-4px);
  border-color: var(--or-dore);
  box-shadow: 0 0 28px var(--glow-or);
}

.mj-niveau:focus-visible {
  outline: 2px solid var(--or-dore);
  outline-offset: 3px;
}

.mj-niveau-nom {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: 2px;
  color: var(--or-dore);
}

.mj-niveau-titre {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: var(--rouge-lumineux);
  letter-spacing: 1px;
}

.mj-niveau-desc {
  font-family: 'Raleway', sans-serif;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 28ch;
}

.mj-niveau .mj-tuile-badge {
  background: var(--rouge-sang);
  border: 1px solid var(--or-dore);
  color: var(--or-dore);
}

/* ---------- BANDEAU : qui joue, vitesse ---------- */
.mj-bandeau-gauche,
.mj-bandeau-droite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.mj-bandeau-qui {
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid var(--or-dore);
  background: rgba(255, 215, 0, 0.12);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--or-dore);
}

.mj-bandeau-qui.mj-qui-robot {
  border-color: var(--violet-orchidee);
  background: rgba(153, 50, 204, 0.2);
  color: #e9c6ff;
}

.mj-btn-petit {
  padding: 6px 14px;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.mj-btn-petit[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--or-pale), var(--rouge-sang));
  color: #fff;
}

/* ---------- TABLE : tapis + deux feuilles ---------- */
.mj-table {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}

.mj-feuilles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.mj-feuilles-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mj-feuille {
  min-width: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Feuille du joueur qui a la main */
.mj-feuille-active {
  border-color: var(--or-dore);
  box-shadow: 0 0 22px var(--glow-or);
}

.mj-feuilles .mj-score td {
  width: 60px;
}

.mj-feuilles .mj-case {
  width: 56px;
}

/* Onglets Joueur / Robot : mobile uniquement */
.mj-onglets {
  display: none;
  gap: 8px;
}

.mj-onglet {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--or-pale);
  border-radius: 10px;
  background: rgba(26, 10, 10, 0.8);
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}

.mj-onglet-actif {
  border-color: var(--or-dore);
  background: linear-gradient(135deg, var(--rouge-sang), var(--violet-royal));
  color: var(--or-dore);
}

.mj-onglet:focus-visible {
  outline: 2px solid var(--or-dore);
  outline-offset: 2px;
}

/* Case choisie par le robot : clignote avant de se verrouiller */
.mj-case-clignote {
  border: 1px solid var(--or-dore);
  color: var(--or-dore);
  background: rgba(255, 215, 0, 0.2);
  animation: mj-clignote 0.35s ease-in-out infinite alternate;
}

@keyframes mj-clignote {
  from { box-shadow: 0 0 4px var(--glow-or); background: rgba(255, 215, 0, 0.08); }
  to   { box-shadow: 0 0 16px var(--glow-or); background: rgba(255, 215, 0, 0.35); }
}

/* ---------- ÉCRAN DE FIN ---------- */
.mj-fin-titre {
  font-size: 2rem;
}

.mj-fin-victoire { color: var(--or-dore); }
.mj-fin-defaite { color: var(--rouge-lumineux); text-shadow: 0 0 12px var(--glow-rouge); }
.mj-fin-egalite { color: #e9c6ff; text-shadow: 0 0 12px var(--glow-violet); }

.mj-fin-scores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.mj-fin-score-bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mj-fin-score-nom {
  font-family: 'Raleway', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.mj-fin-score-val {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 2rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.mj-fin-contre {
  font-family: 'Raleway', sans-serif;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .mj-table {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .mj-niveaux {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .mj-onglets {
    display: flex;
  }
  .mj-feuilles-grille {
    grid-template-columns: 1fr;
  }
  .mj-feuille-masquee-mobile {
    display: none;
  }
  .mj-bandeau {
    padding: 10px 12px;
  }
}

/* ---------- MOUVEMENT RÉDUIT : pas de clignotement ---------- */
@media (prefers-reduced-motion: reduce) {
  .mj-case-clignote {
    animation: none;
    box-shadow: 0 0 12px var(--glow-or);
  }
  .mj-niveau,
  .mj-feuille {
    transition: none;
  }
  .mj-niveau:hover,
  .mj-niveau:focus-visible {
    transform: none;
  }
}

/* ===================================================
   MISE, GAINS ET PLAFOND (étape 5)
   =================================================== */

.mj-enjeu {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--or-pale);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(26, 10, 10, 0.92), rgba(75, 0, 130, 0.35));
  box-shadow: 0 0 20px var(--glow-violet);
  text-align: center;
}

.mj-enjeu-info {
  border-color: var(--violet-orchidee);
}

.mj-enjeu-titre {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: var(--or-dore);
}

.mj-enjeu-texte,
.mj-enjeu-plafond {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
}

.mj-enjeu-plafond strong,
.mj-enjeu-texte strong {
  color: var(--or-lumineux);
}

.mj-mise {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mj-mise .mj-btn-petit {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.3rem;
}

.mj-mise-valeur {
  min-width: 5ch;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--or-dore);
  text-shadow: 0 0 12px var(--glow-or);
  font-variant-numeric: tabular-nums;
}

.mj-mise-curseur {
  width: min(320px, 100%);
  accent-color: var(--or-dore);
}

.mj-mise-curseur:focus-visible {
  outline: 2px solid var(--or-dore);
  outline-offset: 4px;
}

/* Multiplicateur et gain sur chaque carte de niveau */
.mj-niveau-mult {
  padding: 2px 12px;
  border-radius: 20px;
  border: 1px solid var(--or-dore);
  background: rgba(255, 215, 0, 0.15);
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--or-dore);
  font-variant-numeric: tabular-nums;
}

.mj-niveau-mult-inactif {
  opacity: 0.4;
  text-decoration: line-through;
}

.mj-niveau-gain {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--or-lumineux);
  font-variant-numeric: tabular-nums;
}

.mj-niveau-alerte {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px dashed var(--rouge-vif);
  background: rgba(139, 0, 0, 0.35);
  font-family: 'Raleway', sans-serif;
  font-size: 0.78rem;
  color: #ffd2d2;
}

.mj-niveau-alerte[hidden] {
  display: none;
}

/* Écran de fin : pièces gagnées / perdues et nouveau solde */
.mj-fin-argent,
.mj-fin-solde,
.mj-fin-plafond {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}

.mj-fin-argent {
  font-size: 1rem;
}

.mj-fin-gain,
.mj-fin-perte,
.mj-fin-neutre {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.5rem;
}

.mj-fin-gain { color: var(--or-dore); text-shadow: 0 0 12px var(--glow-or); }
.mj-fin-perte { color: var(--rouge-lumineux); text-shadow: 0 0 10px var(--glow-rouge); }
.mj-fin-neutre { color: #e9c6ff; }

.mj-fin-solde strong {
  color: var(--or-lumineux);
  font-size: 1.1rem;
}

.mj-fin-plafond {
  font-size: 0.85rem;
  color: #ffd2d2;
}

/* ---------- ZONES TACTILES (mobile et tablette) ---------- */
@media (pointer: coarse), (max-width: 900px) {
  .mj-case {
    min-height: 40px;
  }
  #mj-accelerer {
    min-height: 40px;
  }
  .mj-mise-curseur {
    height: 32px;
  }
}