/* Aides de jeu communes aux trois plateaux du Mastermind : solo (et articles),
   défi du jour, multijoueur. À charger APRÈS le CSS propre à chaque page :
   les sélecteurs à deux classes l'emportent sur `.couleur-btn` seul (défi,
   multi) et, à égalité avec `.mm-jeu .couleur-btn` (solo), par l'ordre. */

/* Règle des doublons, sous la barre d'infos */
.regle-doublons {
  margin: -8px 0 12px;
  font-size: 0.75rem;
  color: var(--texte-faible, #6c7683);
  text-align: center;
}

.regle-doublons strong {
  color: var(--texte-doux, #98a1ad);
}

/* Lignes des essais restants : un point par colonne, aligné sous les pions */
.plateau .ligne-vide {
  padding: 3px 0;
  border-bottom: none;
}

.plateau .ligne-vide::after {
  content: '';
  width: 38px;
  flex-shrink: 0;
}

.ligne-vide .pion-vide {
  width: 36px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ligne-vide .pion-vide::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px dashed var(--line-forte, #39404a);
}

/* Palette : couleur barrée par le joueur (clic droit ou appui long) */
.selecteur-couleurs .couleur-btn {
  position: relative;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.selecteur-couleurs .couleur-btn.barree {
  opacity: 0.3;
}

.selecteur-couleurs .couleur-btn.barree::after {
  content: '';
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #f0f3f6;
  transform: rotate(45deg);
  pointer-events: none;
}

.astuce-barrage {
  margin: -8px 0 12px;
  font-size: 0.7rem;
  color: var(--texte-faible, #6c7683);
  text-align: center;
}

.astuce-barrage .astuce-tactile {
  display: none;
}

/* Écran tactile : les raccourcis clavier ne servent à rien, l'astuce parle d'appui long */
@media (hover: none) and (pointer: coarse) {

  .selecteur-couleurs .couleur-btn .raccourci {
    display: none;
  }

  .astuce-barrage .astuce-souris {
    display: none;
  }

  .astuce-barrage .astuce-tactile {
    display: inline;
  }
}

@media (max-width: 480px) {

  .plateau .ligne-vide::after {
    width: 32px;
  }

  .ligne-vide .pion-vide {
    width: 28px;
  }

  /* Boutons à la taille d'un doigt. Au-delà de 6 couleurs, deux rangées :
     --mm-colonnes est posé par la page selon le nombre de couleurs. */
  .selecteur-couleurs.selecteur-couleurs {
    display: grid;
    grid-template-columns: repeat(var(--mm-colonnes, 6), 44px);
    justify-content: center;
    gap: 8px 10px;
    padding: 10px;
  }

  .selecteur-couleurs .couleur-btn {
    width: 44px;
    height: 44px;
  }

  .ligne-active .pion-actif {
    width: 40px;
    height: 40px;
  }

  /* Trois boutons (Effacer, Reprendre, Valider) sur 330 px de large */
  .zone-saisie .actions-bar {
    gap: 8px;
  }

  .zone-saisie .actions-bar .btn {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Saisie collée en bas de l'écran : le plateau défile dessous, les couleurs
     et le bouton Valider restent sous le pouce jusqu'au 12e essai. */
  .zone-saisie-collante {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -12px;
    padding: 10px 12px 2px;
    background: var(--surface-1, #16191f);
    border-top: 1px solid var(--line-forte, #39404a);
    box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.35);
  }

  .zone-saisie-collante .ligne-active {
    padding: 8px 0;
    margin-bottom: 8px;
  }

  .zone-saisie-collante .selecteur-couleurs {
    margin-bottom: 8px;
  }

  .zone-saisie-collante .astuce-barrage {
    margin: -4px 0 8px;
  }

  .zone-saisie-collante .actions-bar {
    margin-bottom: 8px;
  }
}

/* Sur écran large (plateau et saisie côte à côte), les lignes des essais restants ont
   déjà la hauteur d'une ligne jouée : le plateau ne grandit plus en cours de partie. */
@media (min-width: 600px) {

  .mm-deux-colonnes .plateau .ligne-vide {
    padding: 5px 0;
    border-bottom: 1px solid var(--line, #2a2f37);
  }

  .mm-deux-colonnes .ligne-vide .pion-vide {
    width: 32px;
    height: 32px;
  }

  .mm-deux-colonnes .plateau .ligne-vide::after {
    width: 45px;
  }
}

/* Option « chiffres dans les pions » : chaque couleur porte le chiffre de sa touche.
   Pour qui distingue mal les teintes (rouge et vert, orange et marron). La classe est
   posée sur <html> par mastermind-aides.js, d'après le choix mémorisé du joueur. */
.mm-chiffres [data-c] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mm-chiffres [data-c]::before {
  content: attr(data-c);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 2px #000, 0 1px 1px #000;
  pointer-events: none;
}

.mm-chiffres .selecteur-couleurs .couleur-btn .raccourci {
  display: none;
}

/* Bouton qui bascule l'option, dans la barre de titre */
.mm-btn-chiffres {
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-forte, #39404a);
  border-radius: 999px;
  background: transparent;
  color: var(--texte-doux, #98a1ad);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.mm-btn-chiffres:hover {
  border-color: var(--color-light, #fda4af);
  color: var(--texte, #dde2e8);
}

.mm-btn-chiffres[aria-pressed="true"] {
  background: var(--color-btn1, #e11d48);
  border-color: var(--color-btn1, #e11d48);
  color: #fff;
}
/* Écran tactile : le bouton des chiffres à la taille d'un doigt */
@media (pointer: coarse) {

  .mm-btn-chiffres {
    height: 44px;
  }
}

/* Très petit écran : six boutons de 44 px ne tiennent pas avec 10 px d'écart */
@media (max-width: 400px) {

  .selecteur-couleurs.selecteur-couleurs {
    gap: 8px 4px;
    padding: 10px 6px;
  }
}

/* Écran large, plateau et saisie côte à côte : la palette tient en rangées égales.
   En flex, 8 couleurs donnaient 7 + 1 et 10 couleurs 7 + 3. --mm-colonnes est posé par
   colonnesPalette() : toutes sur une rangée jusqu'à 6, deux rangées égales au-delà
   (4 + 4, 5 + 5). L'écart vertical laisse la place du chiffre écrit sous chaque couleur. */
@media (min-width: 600px) {

  .mm-deux-colonnes .selecteur-couleurs.selecteur-couleurs {
    display: grid;
    grid-template-columns: repeat(var(--mm-colonnes, 6), 40px);
    justify-content: center;
    gap: 20px 12px;
    padding: 14px 12px 20px;
  }

  .mm-deux-colonnes .selecteur-couleurs .couleur-btn {
    width: 40px;
    height: 40px;
  }
}

/* Téléphone : la page défile pour garder le dernier essai au-dessus de la saisie, et la
   barre d'infos (essais joués, chrono, manche) sortait de l'écran vers le 7e essai.
   Elle reste collée en haut, sous la barre de compte du site. */
@media (max-width: 599px) {

  .mm-jeu .info-bar {
    position: sticky;
    top: 50px;
    z-index: 6;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
  }
}

/* Bouton des sons : même gabarit que celui des chiffres, sans l'aplat « enfoncé »
   (l'icône dit déjà si le son est là). Les deux boutons vivent dans .top-bar-outils. */
.mm-btn-sons {
  padding: 0 8px;
  font-size: 0.95rem;
  letter-spacing: 0;
}

.top-bar-outils {
  gap: 6px;
}

/* Téléphone : deux boutons à droite du titre. Le titre cède de la place (il passe sur
   deux lignes, en plus petit) au lieu de glisser sous les boutons. */
@media (max-width: 480px) {

  .top-bar-outils {
    flex-shrink: 0;
  }

  .page-partie .top-bar h1,
  .page-defi .top-bar h1 {
    flex: 1 1 0;
    min-width: 0;
    font-size: 1.15rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .page-partie .top-bar .back-link,
  .page-defi .top-bar .back-link {
    flex-shrink: 0;
  }
}