/* Commun à tous les jeux. Chaque jeu a son propre fichier dans ce dossier (css/jeux/<id>.css). */

/* Une courte secousse quand on touche la mauvaise réponse (désactivée en mouvement réduit par chaque jeu). */
@keyframes secousse {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Le panneau d'affichage du studio : un creux sombre où apparaît ce qu'il faut regarder. */
.panneau {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 132px;
  padding: var(--e-5);
  border-radius: var(--r-grand);
  background: var(--studio-950);
  box-shadow: inset 0 0 0 1px var(--studio-800), inset 0 14px 28px -18px rgb(0 0 0 / 0.9);
}

/* Les grandes réponses à toucher : des cartons à l'encre, comme les fiches, sous le pouce. */
.reponses {
  display: grid;
  grid-template-columns: repeat(var(--colonnes, 2), minmax(0, 1fr));
  gap: var(--e-2);
  width: 100%;
}

.reponse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 64px;
  padding: 0 var(--e-3);
  border-radius: var(--r-moyen);
  background: var(--fiche);
  box-shadow: var(--ombre-tuile);
  color: var(--encre);
  font-family: var(--police-titre);
  font-stretch: var(--nom-jeu-largeur);
  font-weight: 800;
  font-size: var(--t-sous);
  transition: transform var(--d-appui) var(--ease-out), box-shadow var(--d-court) ease;
}

.reponse svg {
  flex: none;
  width: 24px;
  height: 24px;
}

.reponse:active:not(:disabled) {
  transform: scale(0.96);
}

.reponse.juste {
  box-shadow: inset 0 0 0 3px var(--fam-encre), var(--ombre-tuile);
}

.reponse.faux {
  box-shadow: inset 0 0 0 3px var(--erreur), var(--ombre-tuile);
  animation: secousse 220ms var(--ease-out);
}

/* La rangée d'outils des casse-tête : annuler, recommencer, voir la solution. */
.outils {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  width: 100%;
}

.outils .bouton-secondaire {
  min-height: 48px;
  padding: 0 var(--e-3);
  font-size: var(--t-petit);
}

.outils .solution {
  grid-column: 1 / -1;
  border-style: dashed;
  color: var(--texte-2);
}

@media (prefers-reduced-motion: reduce) {
  .reponse.faux {
    animation: none;
  }
}