/* css/lexique.css
   Lexique interactif : surlignage "surligneur" des termes définis (fond cyan,
   soulignement plein, halo + flash à la pression d'ALT). Visible uniquement
   quand ALT est maintenu + petit indicateur en bas d'écran. */

.lexique-terme {
    border-bottom: 2px solid #34ccff;
    border-radius: 4px;
    cursor: help;
    /* Ne casse pas l'espacement du texte environnant. */
    text-decoration: none;
    transition: background-color .12s ease, box-shadow .12s ease, color .12s ease;
}

/* Style "surligneur" : fond cyan translucide, soulignement plein, léger halo. */
.lexique-active .lexique-terme {
    color: #eafaff;
    background: rgba(52, 204, 255, 0.18);
    box-shadow: 0 0 10px rgba(52, 204, 255, 0.32);
    padding: 1px 4px;
    /* Flash au moment où les mots apparaissent (à la pression d'ALT). */
    animation: lexiqueFlash 0.8s ease;
}

.lexique-active .lexique-terme:hover {
    color: #ffffff;
    background: rgba(52, 204, 255, 0.30);
    box-shadow: 0 0 14px rgba(120, 240, 255, 0.55);
}

@keyframes lexiqueFlash {
    0% {
        background: rgba(120, 240, 255, 0.55);
        box-shadow: 0 0 20px rgba(120, 240, 255, 0.80);
        color: #ffffff;
    }
    100% {
        background: rgba(52, 204, 255, 0.18);
        box-shadow: 0 0 10px rgba(52, 204, 255, 0.32);
        color: #eafaff;
    }
}

/* Respecte la préférence "réduire les animations". */
@media (prefers-reduced-motion: reduce) {
    .lexique-active .lexique-terme {
        animation: none;
    }
}

/* Indicateur "Maintenez ALT…" en bas de l'écran quand le lexique est actif. */
#lexique-indicator {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translate(-50%, 12px);
    z-index: 100001;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(96, 230, 255, 0.28);
    background: linear-gradient(180deg, rgba(5, 27, 39, 0.96), rgba(3, 16, 24, 0.96));
    color: rgba(214, 245, 255, 0.95);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 0 18px rgba(39, 214, 255, 0.12);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

#lexique-indicator.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Pendant que le lexique est actif, l'infobulle d'objet/module devient
   survolable pour pouvoir atteindre un terme situé à l'intérieur. */
body.lexique-active #itemDetails.is-visible {
    pointer-events: auto !important;
}

/* La définition du terme passe au-dessus de l'infobulle d'objet. */
body.lexique-active .character-stat-tooltip {
    z-index: 100002 !important;
}