/* Estilos de nombre (plugins/web/core/name-styles.php). El CSS de cada estilo
   se añade en línea a esta hoja; aquí van las animaciones y la muestra. */

@keyframes ht-name-slide {
    from { background-position: 0% 0; }
    to { background-position: 200% 0; }
}

@keyframes ht-name-shine {
    0%, 20% { background-position: 100% 0; }
    80%, 100% { background-position: 0% 0; }
}

@keyframes ht-name-neon {
    0%, 100% {
        text-shadow: 1px 1px 0 var(--ht-name-outline), -1px 1px 0 var(--ht-name-outline), 1px -1px 0 var(--ht-name-outline), -1px -1px 0 var(--ht-name-outline),
            0 0 5px var(--ht-name-glow), 0 0 10px var(--ht-name-glow);
    }
    50% {
        text-shadow: 1px 1px 0 var(--ht-name-outline), -1px 1px 0 var(--ht-name-outline), 1px -1px 0 var(--ht-name-outline), -1px -1px 0 var(--ht-name-outline),
            0 0 8px var(--ht-name-glow), 0 0 16px var(--ht-name-glow);
    }
}

/* Muestra del estilo: colección, tienda, premios y fichas. */
.ht-name-sample {
    display: inline-block;
    max-width: 100%;
    padding: 2px 4px;
    overflow: hidden;
    font-size: 1rem;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La colección y la ficha reservan 80x120 para el avatar de los efectos;
   los nombres usan el ancho de la casilla. */
.ht-col[data-type="names"] .ht-col-render,
.ht-item[data-type="names"] .ht-item-render {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 40px;
}

.ht-item[data-type="names"] .ht-name-sample {
    font-size: 1.15rem;
}

.ht-shop-visual.kind-names .ht-name-sample,
.ht-shop-detail-visual.kind-names .ht-name-sample {
    font-size: 0.95rem;
}

/* En el chat hay muchos nombres a la vez: se animan solo al pasar el ratón. */
#ht-chat-drawer n.ht-name {
    animation-play-state: paused;
}

#ht-chat-drawer .ht-msg:hover n.ht-name,
#ht-chat-drawer n.ht-name:hover {
    animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
    n.ht-name {
        animation: none !important;
    }
}