/* Interacciones universales */
.interactable {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.interactable:hover {
    background-color: rgba(209, 164, 84, 0.08);
    transform: translateX(4px);
}

.interactable:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Hover en iconos list-item */
.icon-list-item:hover .icon-box svg {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Opacidad para habilidades deshabilitadas por falta de maná */
.disabled-action {
    opacity: 0.4;
    filter: grayscale(100%);
    pointer-events: none;
}

/* Fade In de carga */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn 0.6s ease-out forwards; opacity: 0; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }