/* Page solo du Mastermind. Le plateau lui-même est dans mastermind-jeu.css,
   partagé avec l'embed des articles : ne rien redéfinir ici qui concerne les
   pions, les indices ou le sélecteur de couleurs.

   L'habillage de page (body, #app, top-bar, boutons, overlay, footer) vient de
   fichiers-partages-des-jeux/css/jeu.css, chargé avant ce fichier. Il ne reste
   ici que ce qui est propre à la page solo. */

/* Plateau plus étroit que la largeur commune : 4 à 5 pions par ligne seulement */
#app {
  max-width: 560px;
}

/* Overlay de fin : le cadre est dans jeu.css, ici le verdict et le code révélé */
.overlay-box .win {
  color: #64ab7c;
}

.overlay-box .lose {
  color: #d07070;
}

.overlay-box p {
  color: var(--texte-doux);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.secret-reveal {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}

.secret-reveal .pion {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--line-forte);
}

/* CTA inscription affiché en fin de partie aux visiteurs sans compte */
#cta-inscription {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--color-mid);
  border-radius: 4px;
  padding: 16px;
  margin: 16px 0;
  text-align: left;
}

.cta-rang {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #f0f3f6;
  margin-bottom: 6px;
}

.cta-rang .rang-nombre {
  color: var(--color-light);
}

.cta-score-msg {
  color: var(--texte-doux) !important;
  font-size: 0.85rem !important;
  margin-bottom: 12px !important;
}

.cta-auth-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.cta-auth-btns .btn {
  font-size: 0.85rem;
  padding: 8px 18px;
}

.confetti {
  position: fixed;
  top: -10px;
  z-index: 200;
  pointer-events: none;
  font-size: 1.2rem;
  animation: confetti-fall 3s ease-in forwards;
}

@keyframes confetti-fall {

  to {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}

footer {
  font-size: 0.78rem;
  color: var(--texte-faible);
  margin-top: 8px;
}

footer a {
  color: var(--texte-doux);
  text-decoration: none;
}

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