/* =====================================================================
   FLUIDITÉ — transitions/animations uniquement. Aucune règle, timing de
   jeu, durée de tween ou trajectoire n'est modifiée ici.

   Constat technique avant d'écrire quoi que ce soit : plusieurs éléments
   ciblés par cette mission (panneau contextuel, badge "GARDIEN ACTIF",
   boutons d'action) sont détruits et recréés à chaque appel de
   renderHand() (els.hand.innerHTML = ""), pas juste re-stylés. Un simple
   `transition` sur une classe qui change ne joue donc jamais : l'élément
   "avant" n'existe plus quand l'élément "après" apparaît. Pour ceux-là,
   la seule approche qui fonctionne sans toucher au rendu JS est une
   animation @keyframes qui se déclenche à l'insertion (comme le fait déjà
   .v64-mini-card.deal-card plus haut dans le projet — même idiome, repris
   ici pour les éléments qui ne l'avaient pas). Pour les éléments qui, eux,
   persistent et changent seulement de classe (.turn-context, #endTurnBtn,
   .island-choice, .kaykit-control-btn), un vrai `transition` suffit.
   ===================================================================== */

/* ---------- Éléments persistants : transition classique ----------
   hover-feedback.css pose déjà `transition: transform/filter/box-shadow/
   border-color ... !important` sur .primary-btn/.small-btn/.kaykit-control-
   btn/.island-choice/.v60-action-btn (avec #gameScreen ou :is() + :not(),
   donc plus spécifique que ces règles-ci sans le préfixe #gameScreen).
   `transition` est un raccourci : une seconde déclaration ne s'ADDITIONNE
   pas, elle remplace toute la liste. On reprend donc ici l'intégralité
   des propriétés déjà transitionnées par hover-feedback.css, en ajoutant
   juste `background`/`color` qui n'y étaient pas — pour ne pas perdre au
   passage le polish transform/filter déjà en place au survol. */
body[data-visual-mode="alternative"] .turn-context {
  transition: background .18s ease-out, border-left-color .18s ease-out, box-shadow .18s ease-out !important;
}

body[data-visual-mode="alternative"] #gameScreen #endTurnBtn {
  transition:
    transform 140ms cubic-bezier(.2, .75, .25, 1), filter 140ms ease,
    box-shadow .18s ease-out, border-color .16s ease-out,
    background .16s ease-out, color .16s ease-out !important;
}

body[data-visual-mode="alternative"] #gameScreen #cancelCardBtn {
  transition:
    transform 140ms cubic-bezier(.2, .75, .25, 1), filter 140ms ease,
    box-shadow 140ms ease, border-color .14s ease-out,
    background .14s ease-out, color .14s ease-out !important;
}

body[data-visual-mode="alternative"] #gameScreen .island-choice {
  transition:
    transform 160ms cubic-bezier(.2, .75, .25, 1), filter 160ms ease,
    box-shadow .16s ease-out, border-color .16s ease-out,
    background .16s ease-out !important;
}

body[data-visual-mode="alternative"] #gameScreen .kaykit-control-btn {
  transition:
    transform 140ms cubic-bezier(.2, .75, .25, 1), filter 140ms ease,
    box-shadow 140ms ease, border-color .14s ease-out,
    background .14s ease-out, color .14s ease-out !important;
}

body[data-visual-mode="alternative"] #gameScreen .v60-action-btn {
  transition:
    transform 160ms cubic-bezier(.2, .75, .25, 1), filter 160ms ease,
    box-shadow .16s ease-out, border-color .16s ease-out,
    background .16s ease-out !important;
}

/* ---------- Éléments recréés à chaque render : animation à l'insertion ---------- */

@keyframes ilyos-panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

body[data-visual-mode="alternative"] .v60-context-options {
  animation: ilyos-panel-in .16s ease-out both;
}

/* Le bandeau "GARDIEN ACTIF" mérite une entrée un peu plus marquée : c'est
   le signal principal qu'une sélection vient de se produire. */
body[data-visual-mode="alternative"] .smart-char-badge {
  animation: ilyos-panel-in .20s cubic-bezier(.2, .8, .25, 1) both;
}

@keyframes ilyos-btn-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Volontairement très court : la barre d'action se reconstruit à chaque
   interaction (hover compris) — une animation longue ou marquée finirait
   par clignoter plutôt qu'apparaître en douceur. */
body[data-visual-mode="alternative"] .v60-action-btn {
  animation: ilyos-btn-in .10s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  body[data-visual-mode="alternative"] .v60-context-options,
  body[data-visual-mode="alternative"] .smart-char-badge,
  body[data-visual-mode="alternative"] .v60-action-btn {
    animation: none !important;
  }
}