/* ── BattleSDR Custom Styles ─────────────────────────────────── */

/* Card entrance animation */
@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cardOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.97);
    }
}

.card-enter {
    animation: cardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.card-exit {
    animation: cardOut 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Tag button pulse on selection */
@keyframes tagPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.tag-pulse {
    animation: tagPulse 0.5s ease-out;
}

/* Importance bar shimmer */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.importance-bar {
    background: linear-gradient(
        90deg,
        rgba(37, 99, 235, 0.6) 0%,
        rgba(96, 165, 250, 0.9) 50%,
        rgba(37, 99, 235, 0.6) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

/* Smooth range input styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 9999px;
    background: linear-gradient(to right, #1e3a8a, #2563eb, #60a5fa);
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border: none;
}

/* Battle card text emphasize */
.battle-text {
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}