/**
 * SELECTEUR DE CIBLE EN COMBAT - habillage des boutons et halo de la cible visee.
 * File: modules/combat/target_select.css
 * Documentation: Documentations/Combat/selection_de_cible.md
 *
 * Des CLASSES NOMMEES, et pas des utilitaires Tailwind fabriques en JS : Tailwind est
 * purge STATIQUEMENT dans ce projet, une classe jamais vue dans les sources n'existe
 * pas dans la feuille finale. C'est la meme raison qui fait que les boutons de
 * competence sont habilles en styles inline (voir modules/combat/ulti_charge.css).
 */

/* ── LES BOUTONS DE CIBLE ─────────────────────────────────────────────────── */

.combat-target-btn {
    border: 2px solid rgba(0, 0, 0, 0.35);
    text-shadow: none;
}

/* L'adversaire garde le rouge de l'action offensive : c'est le choix par defaut et le
   plus frequent, il doit se reperer sans lire. */
.combat-target-btn-adversaire {
    background-color: rgb(235, 96, 96);
    border-color: rgb(170, 50, 50);
}
.combat-target-btn-adversaire:hover:not(:disabled) {
    background-color: rgb(250, 120, 120);
}

/* Vous et votre compagnon partagent le vert du camp allie. Viser un allie reste une
   action inhabituelle : la couleur dit « attention, c'est de ton cote ». */
.combat-target-btn-allie {
    background-color: rgb(0, 220, 130);
    border-color: rgb(0, 160, 95);
}
.combat-target-btn-allie:hover:not(:disabled) {
    background-color: rgb(0, 245, 150);
}

/* Meme rouge sombre que le RETOUR du sous-menu de competences, pour que le geste
   d'annulation soit au meme endroit et de la meme couleur partout. */
.combat-target-btn-retour {
    background-color: rgb(200, 100, 100);
    border-color: rgb(150, 50, 50);
}
.combat-target-btn-retour:hover:not(:disabled) {
    background-color: rgb(220, 120, 120);
}

/* Cible hors de combat : le bouton reste AFFICHE, et desactive.
   Le retirer ferait sauter la rangee d'un tour a l'autre, et la navigation manette
   inclut volontairement les boutons desactives pour garder la grille stable. */
.combat-target-btn-inactif {
    background-color: rgb(80, 80, 80) !important;
    border-color: rgb(60, 60, 60) !important;
    color: rgb(150, 150, 150) !important;
    cursor: not-allowed;
}

/* ── LE HALO DE LA CIBLE VISEE ────────────────────────────────────────────── */

/**
 * Un ELEMENT AUTONOME, jamais une classe posee sur un avatar.
 *
 * Les `<img>` d'avatar ont `transition: none` pose en dur par le moteur, leur
 * `transform` est sature (entree, recul, bonds, respiration inline) et leur `filter`
 * est reecrit par `animateDamageRecul`. Le sprite du compagnon, lui, a sa propriete
 * `animation` prise par `capture-companion-breathe`. Aucune de ces trois proprietes
 * n'est disponible : le halo vit donc a cote, dans le conteneur de combat.
 *
 * Il est place par `viser()` au changement de focus et a rien d'autre : pas de boucle
 * requestAnimationFrame, pas de mesure continue. La marge autour de la boite absorbe
 * le leger va-et-vient de la respiration.
 */
#combat-cible-halo {
    position: absolute;
    pointer-events: none;
    border-radius: 14px;
    border: 2px solid rgba(120, 255, 190, 0.85);
    background: radial-gradient(
        ellipse at center,
        rgba(120, 255, 190, 0.16) 0%,
        rgba(120, 255, 190, 0.06) 55%,
        rgba(120, 255, 190, 0) 100%
    );
    /* `opacity` et `box-shadow` uniquement. Surtout PAS `transform` : il est deja pris
       par la mise en page du conteneur de combat et par les animations d'avatar. */
    animation: combat-cible-respire 1.6s ease-in-out infinite;
}

/* L'adversaire est vise en rouge : la lecture reste coherente avec la couleur de son
   bouton, et un halo vert sur un ennemi se lirait comme un soin. */
#combat-cible-halo[data-cible="opponent"] {
    border-color: rgba(255, 140, 140, 0.9);
    background: radial-gradient(
        ellipse at center,
        rgba(255, 140, 140, 0.18) 0%,
        rgba(255, 140, 140, 0.07) 55%,
        rgba(255, 140, 140, 0) 100%
    );
    animation-name: combat-cible-respire-adverse;
}

/* Nom sans collision possible avec `pulse`, `spin` ou `ping`, que Tailwind definit
   deja et qui ont provoque une collision documentee dans systems/game_styles.css. */
@keyframes combat-cible-respire {
    from {
        opacity: 0.55;
        box-shadow: 0 0 10px rgba(120, 255, 190, 0.45), inset 0 0 12px rgba(120, 255, 190, 0.25);
    }
    to {
        opacity: 1;
        box-shadow: 0 0 28px rgba(120, 255, 190, 0.85), inset 0 0 22px rgba(120, 255, 190, 0.45);
    }
}

@keyframes combat-cible-respire-adverse {
    from {
        opacity: 0.55;
        box-shadow: 0 0 10px rgba(255, 140, 140, 0.45), inset 0 0 12px rgba(255, 140, 140, 0.25);
    }
    to {
        opacity: 1;
        box-shadow: 0 0 28px rgba(255, 140, 140, 0.85), inset 0 0 22px rgba(255, 140, 140, 0.45);
    }
}

/* Une respiration infinie est exactement le genre de mouvement que ce reglage vise.
   Le halo reste, a mi-intensite : c'est lui qui porte l'information, pas son
   battement. */
@media (prefers-reduced-motion: reduce) {
    #combat-cible-halo {
        animation: none !important;
        opacity: 0.9;
        box-shadow: 0 0 18px rgba(120, 255, 190, 0.7);
    }
    #combat-cible-halo[data-cible="opponent"] {
        box-shadow: 0 0 18px rgba(255, 140, 140, 0.7);
    }
}

/* EOF: modules/combat/target_select.css */