/* =============================================================
   emoji.css — Styles exclusifs au Mode Emoji
   Contient : affichage des emojis, animation popEmoji,
   responsive emojis.
   ============================================================= */

/* =====================================================
   1. UNITÉS EMOJI
   Chaque emoji révélé est un span.emoji-unit créé
   dynamiquement par emojiMode.js dans #emojiDisplay.
   ===================================================== */

.emoji-unit {
  font-size: 4rem;
  margin: 0 12px;
  /* Démarre invisible et petit, animé vers l'état normal */
  opacity: 0;
  transform: scale(0.5);
  animation: popEmoji 0.3s forwards ease-out;
  display: inline-block;
  cursor: default;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.4));
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.3s ease;
}

/* Effet de zoom lumineux au survol d'un emoji */
.emoji-unit:hover {
  transform: scale(1.35);
  filter: drop-shadow(0 0 18px rgb(255, 234, 234)) drop-shadow(0 0 12px rgb(4, 255, 255));
}

/* =====================================================
   2. ANIMATION D'APPARITION DES EMOJIS
   ===================================================== */

@keyframes popEmoji {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =====================================================
   3. RESPONSIVE — SPÉCIFIQUE EMOJI
   ===================================================== */

/* Zone d'affichage : flex à toutes tailles pour un centrage correct */
#emojiDisplay {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 10px;
}

/* -----------------------------------------------
   TABLETTE (≤ 768px)
   Emojis légèrement réduits, retour à la ligne autorisé
   si plusieurs emojis sont révélés.
----------------------------------------------- */
@media (max-width: 768px) {
  /* Réduit l'espacement sur tablette */
  #emojiDisplay {
    gap: 4px;
  }

  .emoji-unit {
    font-size: 2.5rem;
    margin: 4px 6px;
  }

  /* Hover réduit sur tablette (doigt, pas souris) */
  .emoji-unit:hover {
    transform: scale(1.15);
  }
}

/* -----------------------------------------------
   MOBILE (≤ 480px)
   Emojis plus petits, espacement minimal.
----------------------------------------------- */
@media (max-width: 480px) {
  #emojiDisplay {
    gap: 2px;
    padding: 8px;
  }

  .emoji-unit {
    font-size: 2rem;
    margin: 2px 4px;
  }

  /* Réduit le gap de la rangée Replay|Input|Submit sur mobile */
  .input-wrapper > div {
    gap: 8px;
    width: min(340px, 95vw);
    box-sizing: border-box;
  }
}