@media print {
  .noprint {
    display: none;
  }
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

:root {
  --grisoff: #999;
  --griscadre: #7a7a7a;
  --grisfonce: #2e3133;
  --grisfonce2: #35383e;
  --gristitre: #69696a;
  --grisbackground: rgb(243, 242, 242);
  /* Anciens « bleus » : alignés sur le violet du site (default.css, --mg-violet) */
  --bleubackground: #e2dbff;
  --bleuligne: #efebff;
  --bleutitre: #7c5cff;
  --bleusurvol: #5f3ff0;
  --bleucadre: #4a2fc4;
  --vertbackgroundleger: rgb(229, 255, 250);
  --vertbackground: rgb(197, 238, 230);
  --verttitre: rgb(109, 183, 170);
  --vertsurvol: rgb(77, 157, 146);
  --vertcadre: rgb(49, 107, 92);
  --rougebackground: rgb(238, 197, 197);
  --rougetitre: rgb(183, 109, 109);
  --rougesurvol: rgb(157, 77, 77);
  --rougecadre: rgb(107, 49, 49);
  --orangebackground: rgb(255, 196, 68);
  --orangetitre: rgb(255, 158, 68);
  --orangesurvol: rgb(255, 130, 68);
  --orangecadre: rgb(255, 118, 68);
}

table {
  border-spacing: 0px;
  border-collapse: collapse;
  margin: 10px 0px 30px 0px;
}

b {
  color: var(--bleusurvol);
}

.b-h2 {
  font-size: 16px;
}

.centrer {
  text-align: center;
}

.gauche {
  text-align: left;
}

.droite {
  text-align: right;
}

h2,
h1.titre-page {
  font-family: "Madimi One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  color: var(--vertsurvol);
  margin-bottom: 10px;
}

/* Nom du jeu ou de la catégorie : h1 pour les moteurs de recherche, même aspect qu'un h2 */
h1.titre-page {
  margin-top: 0.83em;
}

h3 {
  font-size: 20px;
  color: var(--vertcadre);
  margin: 10px 0px;
}

a {
  color: var(--bleutitre);
  text-decoration: none;
  transition: 0.5s;
}

a:hover {
  color: var(--bleusurvol);
  text-decoration: underline;
}

form {
  margin-bottom: 35px;
  padding: 10px;
  border: 1px solid var(--bleucadre);
  background: var(--grisbackground);
}

.nodeco {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Bouton neutre : chaque jeu l'habille (plus de fond bleu au survol) */
button {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 3px;
  color: #fff;
}

/* ---------- Boutons des jeux, dans l'esprit du site (default.css) ----------
   .btn-bleu : action principale (violet), .btn-vert : valider / jouer,
   .btn-rouge : quitter / annuler (contour rose) */
.btn-bleu,
.btn-vert,
.btn-rouge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px;
  margin: 5px 5px 2px 5px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s,
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.btn-bleu {
  background: #7c5cff;
  box-shadow: 0 10px 22px -12px rgba(124, 92, 255, 0.9);
}

.btn-bleu:hover {
  background: #6a48f5;
  box-shadow: 0 14px 26px -12px rgba(124, 92, 255, 0.95);
}

.btn-vert {
  background: #17142e;
  box-shadow: 0 10px 22px -12px rgba(23, 20, 46, 0.75);
}

.btn-vert:hover {
  background: #2c2660;
  box-shadow: 0 14px 26px -12px rgba(255, 79, 154, 0.6);
}

.btn-rouge {
  background: #fff;
  border-color: rgba(255, 79, 154, 0.45);
  color: #e0307c;
  box-shadow: 0 1px 2px rgba(23, 20, 46, 0.06), 0 8px 20px -12px rgba(23, 20, 46, 0.25);
}

.btn-rouge:hover {
  background: #fff0f6;
  border-color: #ff4f9a;
  color: #c81f68;
}

.btn-bleu:hover,
.btn-vert:hover,
.btn-rouge:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.btn-bleu:active,
.btn-vert:active,
.btn-rouge:active {
  transform: scale(0.97);
}

.btn-bleu:focus-visible,
.btn-vert:focus-visible,
.btn-rouge:focus-visible {
  outline: 3px solid #7c5cff;
  outline-offset: 3px;
}

.btn-bleu:disabled,
.btn-vert:disabled,
.btn-rouge:disabled {
  background: #ecebf3;
  border-color: transparent;
  color: #9d9bb4;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

p {
  margin-bottom: 5px;
}

.espace {
  margin-top: 15px;
}

.espace2 {
  margin-top: 30px;
}

.cadre {
  border: 1px solid var(--bleucadre);
}

.carte-jeu {
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.carte-jeu img {
  max-width: 100%;
  transition: transform 0.3s ease;
}
.carte-jeu h4 {
  transition: color 0.2s ease;
}
.carte-jeu:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  border-color: var(--vertcadre);
  background-color: var(--vertbackgroundleger);
}
.carte-jeu:hover img {
  transform: scale(1.05);
}
.carte-jeu:hover h4 {
  color: var(--vertsurvol);
}

/* Fiche de description d'un jeu, au survol de son aperçu (js/fiche-jeu.js) */
.fiche-jeu {
  position: fixed;
  z-index: 1100;
  width: 320px;
  max-width: calc(100vw - 16px);
  padding: 14px 16px 12px;
  background: #fff;
  border: 1px solid var(--vertcadre);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  color: #333;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.fiche-jeu.visible {
  opacity: 1;
  transform: none;
}
.fiche-jeu.droite {
  transform: translateX(-6px);
}
.fiche-jeu.gauche {
  transform: translateX(6px);
}
.fiche-jeu.visible.droite,
.fiche-jeu.visible.gauche {
  transform: none;
}
/* Flèche vers la carte survolée */
.fiche-jeu.droite::before,
.fiche-jeu.gauche::before {
  content: "";
  position: absolute;
  top: var(--fleche, 50%);
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: #fff;
  border: 1px solid var(--vertcadre);
  transform: rotate(45deg);
}
.fiche-jeu.droite::before {
  left: -7px;
  border-top: none;
  border-right: none;
}
.fiche-jeu.gauche::before {
  right: -7px;
  border-bottom: none;
  border-left: none;
}
.fiche-cat {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--vertbackground);
  color: var(--vertcadre);
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.fiche-titre {
  margin: 6px 0 4px;
  font-family: "Madimi One", sans-serif;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--vertsurvol);
}
.fiche-desc {
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-line;
}
.fiche-jouer[hidden] {
  display: none;
}
.fiche-jouer {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--vertbackground);
  font-size: 0.8rem;
  color: var(--vertcadre);
  text-align: right;
}

.pad {
  padding: 10px;
}

.highlight {
  background: #ffe416;
  color: var(--bleucadre);
}

.vert {
  color: var(--verttitre);
}

.orange {
  color: rgb(216, 147, 55);
}

.rouge {
  color: var(--rougetitre);
}

fieldset {
  padding: 10px;
  border: 1px solid var(--bleucadre);
  background: var(--grisbackground);
  margin-bottom: 25px;
}

legend {
  background: var(--bleutitre);
  border: 1px solid var(--bleucadre);
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
}

legend a,
legend b {
  color: white;
}

legend a:hover {
  color: var(--bleucadre);
}

legend.rouge {
  background: var(--rougetitre);
  border: 1px solid var(--rougecadre);
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
}

hr {
  border: 0;
  border-top: 1px solid var(--bleucadre);
  margin: 10px 0px;
}

ol {
  padding-left: 15px;
  margin-left: 20px;
  margin-bottom: 10px;
}

ol li {
  margin-bottom: 5px;
}

select {
  width: 300px;
  font-size: 18px;
  margin-bottom: 10px;
  margin-right: 20px;
}

.input-txt {
  width: 300px;
  font-size: 18px;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 2px;
}

textarea {
  width: 100%;
  height: 200px;
  font-size: 18px;
  margin-bottom: 10px;
  padding: 2px;
}

label {
  margin-left: 8px;
  margin-right: 30px;
  cursor: pointer;
}

.pt {
  cursor: pointer;
}

.grille5colonnes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
}

kbd {
  background-color: #bbbbbb;
  border: 1px solid #444444;
  border-radius: 4px;
  color: #444444;
  padding: 2px 5px;
}

kbd:hover {
  background-color: #999999;
  border: 1px solid #000000;
  color: #000000;
}

/* Cases à cocher et boutons radio : interrupteurs dans l'esprit du site (violet) */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  flex-shrink: 0;
  width: 40px;
  height: 20px;
  background: #dcd8ec;
  border: 1px solid rgba(23, 20, 46, 0.12);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(23, 20, 46, 0.15);
  transition:
    background-color 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
  cursor: pointer;
  margin-bottom: -4px;
}

input[type="checkbox"]::before,
input[type="radio"]::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 1px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(23, 20, 46, 0.3);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 2px rgba(23, 20, 46, 0.15),
    0 0 0 4px rgba(124, 92, 255, 0.15);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 3px solid #7c5cff;
  outline-offset: 2px;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: #7c5cff;
  border-color: #6a48f5;
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
  transform: translateX(20px);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

details {
  cursor: pointer;
}

summary {
  list-style: none;
}

iframe {
  border: none;
  margin: 0;
  padding: 0;
}

.popup {
  margin-left: auto;
  margin-right: auto;
  z-index: 10;
  background-color: transparent;
  border: 0;
  padding: 20px;
}

dialog::backdrop {
  backdrop-filter: contrast(40%) grayscale(100%) blur(1px);
}

blockquote {
  border: 1px solid var(--bleucadre);
  padding: 15px;
  margin-bottom: 15px;
  background: white;
}

.w15 {
  width: 15%;
}

.centrer-content {
  margin-left: auto;
  margin-right: auto;
}

::placeholder {
  font-style: italic;
}

sub {
  color: var(--bleucadre);
  font-weight: bold;
}

.aff-score {
  text-align: center;
  background: var(--grisbackground);
  font-size: 24px;
  border: 1px solid #634b30;
  border-radius: 5px;
  color: var(--bleucadre);
  width: 160px;
}

.table-game {
  border-spacing: 0;
  /* border-collapse: collapse; */
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1100px) {
  .grille5colonnes {
    display: block;
    margin-bottom: 10px;
  }

  h1 {
    font-size: 28px;
  }
}

/* ---------- Page d'accueil (liens et texte lus par les moteurs de recherche) ---------- */
a.carte-jeu,
a.carte-jeu:hover {
  display: block;
  color: inherit;
  text-decoration: none;
}

.lien-categorie {
  color: inherit;
  font-family: inherit;
}

.lien-categorie:hover {
  color: inherit;
  text-decoration: underline;
}

.intro-accueil {
  margin: 18px 0 4px 0;
  color: #555;
  font-size: 1.05em;
  text-align: center;
}

/* ===========================================================================
   Fenêtre « Comment jouer » commune aux jeux (ouverte par js/site.js).
   Dans la page du jeu :
     <button type="button" data-regles>Règles</button>
     <dialog id="mg-regles" class="mg-regles" aria-labelledby="mg-regles-titre">
       <div class="mg-regles-tete"><h2 id="mg-regles-titre">Comment jouer</h2>
         <button type="button" class="mg-regles-fermer" data-fermer aria-label="Fermer">✕</button></div>
       <div class="mg-regles-corps"><h3>But du jeu</h3><p>…</p> …</div>
       <div class="mg-regles-actions"><button type="button" class="btn-vert" data-fermer>C'est parti !</button></div>
     </dialog>
   Le texte est écrit dans la page (et non créé par le jeu) : les moteurs de
   recherche le lisent.
   =========================================================================== */
.mg-regles {
  box-sizing: border-box;
  width: min(94vw, 980px);
  max-height: 92vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #25233d;
  box-shadow: 0 2px 6px rgba(23, 20, 46, 0.08), 0 28px 56px -20px rgba(23, 20, 46, 0.45);
  overflow: auto;
  overscroll-behavior: contain;
  text-align: left;
  line-height: 1.5;
}
.mg-regles,
.mg-regles * {
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.mg-regles::backdrop {
  background: rgba(23, 20, 46, 0.55);
  backdrop-filter: blur(2px);
}
.mg-regles-tete {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px 24px;
  background: #fff;
  border-bottom: 1px solid rgba(35, 33, 61, 0.09);
}
.mg-regles h2 {
  margin: 0;
  font-size: 1.3em;
  font-weight: 700;
  color: #17142e;
}
.mg-regles-fermer {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f0eff7;
  color: #6c6a88;
  font-size: 16px;
  cursor: pointer;
}
.mg-regles-fermer:focus:not(:focus-visible) {
  outline: none;
}
.mg-regles-fermer:hover {
  background: #e4e2f2;
  color: #17142e;
}
/* Rubriques sur deux colonnes quand la place le permet (évite l'ascenseur) */
.mg-regles-corps {
  columns: 2 340px;
  column-gap: 36px;
  column-fill: balance;
  padding: 14px 24px 0 24px;
}
/* Premier titre collé en haut, comme celui qui ouvre la 2e colonne */
.mg-regles-corps > h3:first-child {
  margin-top: 0;
}
/* Les listes peuvent passer d'une colonne à l'autre (colonnes équilibrées),
   mais un titre reste avec ce qui le suit et un élément n'est jamais coupé */
.mg-regles-corps p,
.mg-regles-corps li {
  break-inside: avoid;
}
.mg-regles:focus {
  outline: none;
}
.mg-regles h3 {
  break-after: avoid;
  margin: 14px 0 6px 0;
  font-size: 1.02em;
  font-weight: 700;
  color: #7c5cff;
}
.mg-regles p,
.mg-regles ul {
  margin: 0 0 8px 0;
  font-size: 0.95em;
}
.mg-regles ul {
  padding-left: 20px;
}
.mg-regles li {
  margin: 3px 0;
}
.mg-regles kbd {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid #d6d4e6;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #f7f6fc;
  font-size: 0.88em;
}
.mg-regles-astuce {
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff6e5;
  color: #6b4b00;
}
.mg-regles-actions {
  display: flex;
  justify-content: center;
  padding: 10px 24px 20px 24px;
}
.mg-regles-actions .btn-vert {
  padding: 10px 28px;
  font-size: 1em;
}

/* ===========================================================================
   Barre de jeu commune (modèle : Éprouvettes)
   Structure, identique pour tous les jeux :
     <div class="mg-jeu" id="xx-jeu">
       <div class="mg-barre">
         <h1 class="mg-barre-titre">Nom du jeu</h1>
         <div class="mg-barre-infos">
           <div class="mg-stat"><span class="mg-stat-lib">Score</span><b>0</b></div> …
         </div>
         <div class="mg-barre-outils">
           … boutons-icônes propres au jeu (.mg-barre-btn) …
           <span class="mg-barre-sep"></span>
           <?= mg_outils_barre() ?>   (son · aide · plein écran, toujours dans cet ordre)
         </div>
       </div>
       <div class="mg-commandes"> … boutons avec texte, options … </div>   (facultatif)
       … plateau …
     </div>
   Chaque jeu l'habille à ses couleurs en redéfinissant les variables --mgb-…
   sur son conteneur. Comportements (son, plein écran, infobulles data-bulle,
   touches M et F) : js/tools.js.
   =========================================================================== */
.mg-jeu {
  /* Barre */
  --mgb-fond: radial-gradient(120% 160% at 0% 0%, rgba(124, 92, 255, 0.28), transparent 55%),
    linear-gradient(120deg, #1b1840, #2e2466);
  --mgb-texte: #eeeaff;
  --mgb-doux: #a9a3d6;
  --mgb-valeur: #fff;
  --mgb-accent: #a891ff;
  --mgb-titre: linear-gradient(100deg, #c7b8ff, #a891ff 45%, #ff8ad8);
  --mgb-police-titre: "Madimi One", sans-serif;
  --mgb-filet: rgba(255, 255, 255, 0.14);
  --mgb-btn: rgba(255, 255, 255, 0.1);
  --mgb-btn-survol: rgba(255, 255, 255, 0.22);
  --mgb-btn-texte: var(--mgb-texte);
  --mgb-btn-texte-survol: var(--mgb-accent);
  --mgb-ombre: 0 4px 18px rgba(20, 16, 60, 0.28);
  --mgb-rayon: 16px;
  /* Rangée des commandes (boutons avec texte) */
  --mgc-fond: #fff;
  --mgc-bord: var(--mg-bord, rgba(35, 33, 61, 0.09));
  --mgc-texte: #4b4870;
  --mgc-ombre: var(--mg-ombre, 0 10px 28px -12px rgba(23, 20, 46, 0.18));
  /* Plein écran */
  --mg-fs-fond: #0c0a1e;
  /* Infobulles */
  --mg-bulle-fond: #17142e;
  --mg-bulle-texte: #fff;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: var(--mg-jeu-largeur, 1240px);
  margin: 14px auto 16px auto;
  padding: 0 12px;
}

/* Barre et commandes : même largeur dans tous les jeux (hors plein écran),
   centrées, même si le plateau du jeu est plus étroit ou plus large */
.mg-jeu > .mg-barre,
.mg-jeu > .mg-commandes {
  box-sizing: border-box;
  flex-shrink: 0;
  align-self: center;
  width: min(var(--mg-barre-largeur, 1180px), calc(100vw - 24px));
}

/* ---------- Barre ---------- */
.mg-barre {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 10px 8px 16px;
  background: var(--mgb-fond);
  color: var(--mgb-texte);
  border-radius: var(--mgb-rayon);
  box-shadow: var(--mgb-ombre);
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
}

.mg-jeu .mg-barre-titre {
  flex-shrink: 0;
  margin: 0;
  padding: 0 18px 0 0;
  border-right: 1px solid var(--mgb-filet);
  /* !important : beaucoup de jeux imposent leur police à tous leurs éléments */
  font-family: var(--mgb-police-titre) !important;
  font-weight: 400;
  font-style: normal;
  font-size: 1.65em;
  line-height: 1.1;
  white-space: nowrap;
  background: var(--mgb-titre);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Textes des cases alignés en haut : une ligne de plus dans une case
   (ex. sous-titre) ne décale pas les autres */
.mg-barre-infos {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 26px;
  min-width: 0;
}

/* Titre sans infos à côté (ou infos masquées) : pas de filet, outils à droite */
.mg-barre-titre:has(+ .mg-barre-outils),
.mg-barre-titre:has(+ .mg-barre-infos[hidden]) {
  border-right: none;
}

.mg-barre-titre + .mg-barre-outils,
.mg-barre-infos[hidden] + .mg-barre-outils {
  margin-left: auto;
}

.mg-barre-infos[hidden] {
  display: none;
}

/* Largeur fixe : la case ne bouge pas quand sa valeur change */
.mg-stat {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  line-height: 1.1;
  min-width: var(--mg-stat-largeur, 5.5em);
}

.mg-stat[hidden] {
  display: none;
}

.mg-stat-lib {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mgb-doux);
  white-space: nowrap;
}

.mg-stat b,
.mg-stat-val {
  font-size: 1.35em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mgb-valeur);
  white-space: nowrap;
}

.mg-stat-val b {
  font-size: 1em;
}

.mg-stat small {
  margin-left: 2px;
  font-size: 0.66em;
  font-weight: 500;
  color: var(--mgb-doux);
}

/* Pastille d'information (niveau, manche, objectif…) */
.mg-puce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--mgb-btn);
  color: var(--mgb-texte);
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
}

.mg-puce[hidden] {
  display: none;
}

/* Toujours à droite, même quand les infos sont masquées */
.mg-barre-outils {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Groupe de boutons propres au jeu, masquable d'un coup (ex. : hors partie) */
.mg-barre-groupe {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mg-barre-groupe[hidden],
.mg-barre-groupe[hidden] + .mg-barre-sep,
.mg-barre-btn[hidden]:first-child + .mg-barre-sep {
  display: none;
}

.mg-barre-sep {
  width: 1px;
  height: 24px;
  margin: 0 2px;
  background: var(--mgb-filet);
}

.mg-barre-sep:first-child {
  display: none;
}

/* ---------- Boutons-icônes de la barre ---------- */
.mg-barre-btn {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--mgb-btn);
  color: var(--mgb-btn-texte);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.1s,
    opacity 0.15s;
}

.mg-barre-btn:hover:not(:disabled) {
  background: var(--mgb-btn-survol);
  color: var(--mgb-btn-texte-survol);
}

.mg-barre-btn:active:not(:disabled) {
  transform: scale(0.92);
}

.mg-barre-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.mg-barre-btn[hidden] {
  display: none;
}

.mg-barre-btn:focus-visible {
  outline: 3px solid var(--mgb-accent);
  outline-offset: 2px;
}

.mg-barre-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bouton qui attire l'œil (ex. : plus aucun coup possible, annuler) */
.mg-barre-btn.mg-attire {
  animation: mg-attire 1s ease-in-out infinite;
}

@keyframes mg-attire {
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--mgb-accent) 40%, transparent);
  }
}

/* ---------- Duel (jeux à deux) : « ● Vous 12   12 Ordinateur ● » ---------- */
.mg-duel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mg-duel-joueur {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 6px;
  border-radius: 999px;
  min-width: 0;
  white-space: nowrap;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}

.mg-duel-joueur.droite {
  padding: 4px 6px 4px 12px;
}

/* Joueur dont c'est le tour */
.mg-duel-joueur.actif {
  background: var(--mgb-btn-survol);
  box-shadow: inset 0 0 0 1px var(--mgb-filet);
}

.mg-duel-nom {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mg-duel-nb {
  font-size: 1.25em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mgb-valeur);
}

.mg-duel-vs {
  color: var(--mgb-doux);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Rangée des commandes : boutons avec texte, options ---------- */
.mg-commandes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: var(--mgc-fond);
  color: var(--mgc-texte);
  border: 1px solid var(--mgc-bord);
  border-radius: var(--mgb-rayon);
  box-shadow: var(--mgc-ombre);
  user-select: none;
  -webkit-user-select: none;
}

.mg-commandes[hidden] {
  display: none;
}

.mg-commandes-sep {
  width: 1px;
  height: 26px;
  background: var(--mgc-bord);
}

/* Pousse ce qui suit à droite de la rangée */
.mg-commandes-ressort {
  flex: 1;
}

.mg-commandes label,
.mg-option {
  margin: 0; /* annule la marge globale des label */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92em;
  color: var(--mgc-texte);
  cursor: pointer;
}

/* Bouton avec texte, au choix des jeux (sinon chacun garde le sien) */
.mg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  margin: 0;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--mgb-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.95em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.1s,
    filter 0.15s,
    opacity 0.15s,
    background 0.15s;
}

.mg-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.mg-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.mg-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.mg-btn.clair {
  background: color-mix(in srgb, var(--mgb-accent) 12%, #fff);
  color: color-mix(in srgb, var(--mgb-accent) 70%, #000);
}

.mg-btn.clair:hover:not(:disabled) {
  filter: none;
  background: color-mix(in srgb, var(--mgb-accent) 22%, #fff);
}

/* Choix sélectionné (niveau, mode…) */
.mg-btn.clair.actif,
.mg-btn.clair[aria-checked="true"],
.mg-btn.clair[aria-pressed="true"] {
  background: var(--mgb-accent);
  color: #fff;
}

.mg-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mg-btn:focus-visible {
  outline: 3px solid var(--mgb-accent);
  outline-offset: 2px;
}

/* ---------- Plein écran (natif, ou simulé sur iPhone) ---------- */
.mg-jeu.mg-fs {
  position: fixed;
  inset: 0;
  z-index: 2000;
  max-width: none;
  margin: 0;
  padding: 10px;
  background: var(--mg-fs-fond);
  overflow: auto;
}

/* Plein écran : barre (et commandes) en haut, sur toute la largeur ;
   le jeu est centré dans la place restante (deux cales qui se partagent
   l'espace libre, sans prendre la place d'un plateau qui s'étire) */
.mg-jeu.mg-fs {
  justify-content: flex-start !important;
}

.mg-jeu.mg-fs > .mg-barre,
.mg-jeu.mg-fs > .mg-commandes {
  align-self: stretch !important;
  width: auto !important;
  order: 0;
}

.mg-jeu.mg-fs > * {
  order: 2;
}

.mg-jeu.mg-fs::before,
.mg-jeu.mg-fs::after {
  content: "";
  flex: 0.0001 1 0;
  order: 1;
}

.mg-jeu.mg-fs::after {
  order: 3;
}

body.mg-noscroll {
  overflow: hidden;
}

/* ---------- Infobulles (attribut data-bulle, dans un .mg-jeu) ---------- */
.mg-bulle {
  position: fixed;
  z-index: 4000;
  max-width: min(280px, calc(100vw - 16px));
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--mg-bulle-fond, #17142e);
  color: var(--mg-bulle-texte, #fff);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(10, 20, 50, 0.3);
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 0.15s,
    transform 0.15s;
}

.mg-bulle.dessus {
  transform: translateY(3px);
}

.mg-bulle.visible {
  opacity: 1;
  transform: none;
}

.mg-bulle[hidden] {
  display: none;
}

.mg-bulle::before {
  content: "";
  position: absolute;
  top: -5px;
  left: var(--pointe, 50%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
}

.mg-bulle.dessus::before {
  top: auto;
  bottom: -5px;
}

/* ---------- Jeu étroit (plateau en hauteur) : barre sur deux lignes ---------- */
/* <div class="mg-jeu mg-etroit"> : titre et outils, puis les infos dessous */
.mg-etroit .mg-barre {
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 12px;
}

.mg-jeu.mg-etroit .mg-barre-titre {
  flex: 1;
  min-width: 0;
  border-right: none;
  padding-right: 0;
  font-size: 1.45em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mg-etroit .mg-barre-infos {
  order: 3;
  flex-basis: 100%;
  justify-content: space-between;
  gap: 10px;
}

.mg-etroit .mg-barre-titre + .mg-barre-outils,
.mg-etroit .mg-barre-infos[hidden] + .mg-barre-outils {
  margin-left: 0;
}

/* ---------- Petits écrans ---------- */
@media (max-width: 1100px) {
  .mg-barre-infos {
    gap: 16px;
  }
}

@media (max-height: 760px) {
  .mg-jeu {
    margin-top: 8px;
    gap: 8px;
  }

  .mg-barre,
  .mg-commandes {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* Titre et outils sur la 1re ligne, infos sur la 2e */
@media (max-width: 760px) {
  .mg-jeu {
    padding: 0;
  }

  .mg-barre {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .mg-jeu .mg-barre-titre {
    flex: 1;
    min-width: 0;
    border-right: none;
    padding-right: 0;
    font-size: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mg-barre-infos {
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .mg-barre-titre + .mg-barre-outils,
  .mg-barre-infos[hidden] + .mg-barre-outils {
    margin-left: 0;
  }

  .mg-stat b,
  .mg-stat-val {
    font-size: 1.15em;
  }

  .mg-barre-btn {
    width: 34px;
    height: 34px;
  }

  .mg-commandes {
    justify-content: center;
  }

  .mg-commandes-sep,
  .mg-commandes-ressort {
    display: none;
  }
}

@media (max-width: 480px) {
  .mg-barre-outils {
    gap: 4px;
  }

  .mg-barre-btn {
    width: 32px;
    height: 32px;
  }

  .mg-barre-btn svg {
    width: 18px;
    height: 18px;
  }

  .mg-barre-sep {
    display: none;
  }

  .mg-commandes {
    gap: 6px 8px;
    padding: 6px 8px;
  }

  .mg-commandes label,
  .mg-option {
    gap: 6px;
    font-size: 0.85em;
  }
}

@media print {
  .mg-barre-outils,
  .mg-commandes {
    display: none;
  }
}