/* Custom styling & animations for Bitefight Target Checker PWA */

@keyframes pulseRed {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.6);
        border-color: #ef4444;
    }
    50% {
        box-shadow: 0 0 20px 4px rgba(229, 57, 53, 0.4);
        border-color: #f87171;
    }
}

.hot-card {
    animation: pulseRed 2s infinite ease-in-out;
    background: linear-gradient(145deg, #221217 0%, #141721 100%) !important;
}

/* Multi-tier Protection Progress Bar */
.progress-track {
    position: relative;
    width: 100%;
    height: 18px;
    background: #0c0e14;
    border-radius: 9999px;
    overflow: visible;
    border: 1px solid #282d3d;
}

.progress-fill-safe {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #059669 0%, #10b981 70%, #d97706 100%);
    transition: width 0.4s ease;
}

.progress-fill-danger {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #10b981 0%, #f59e0b 50%, #ef4444 100%);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
    transition: width 0.4s ease;
}

.marker-pin {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    z-index: 10;
}

.marker-pin::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: -4px;
    width: 10px;
    height: 6px;
    border-radius: 2px;
}

.filter-chip.active {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

.server-chip.active {
    background-color: #374151 !important;
    color: #fbbf24 !important;
    border-color: #f59e0b !important;
    font-weight: 700 !important;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 5px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: #0c0e14;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #232736;
    border-radius: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #374151;
}