@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.animate-fade-in { animation: fadeIn 0.6s ease-in-out; }
.animate-slide-up { animation: slideUp 0.4s ease-out; }
.animate-pulse-subtle { animation: pulseSubtle 2s infinite; }
.glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.9); }
.gradient-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.gradient-danger { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.gradient-warning { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
.gradient-success { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
.hover-scale { transition: transform 0.2s ease; }
.hover-scale:hover { transform: scale(1.02); }
.shadow-elegant { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-elegant-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseSubtle { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }

/* 🟡 Gold shimmer animation for Legitimate Score bar */
@keyframes goldShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.gold-shine {
  background: linear-gradient(120deg, #e6c547 0%, #ffd700 25%, #fff4b1 50%, #ffd700 75%, #e6c547 100%, #e6c547 125%, #ffd700 150%, #fff4b1 175%, #ffd700 200%, #e6c547 225%);
  background-size: 400% 100%;
  animation: goldShimmer 15s linear infinite;
}

/* 🟡 Gold text shimmer (more exaggerated) */
@keyframes goldTextShimmer {
  0% { background-position: -400% 0; }
  100% { background-position: 400% 0; }
}
.gold-text-shine {
  background: linear-gradient(90deg, #e6c547 0%, #ffd700 12.5%, #fff4b1 25%, #ffd700 37.5%, #e6c547 50%, #e6c547 62.5%, #ffd700 75%, #fff4b1 87.5%, #ffd700 100%);
  background-size: 800% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldTextShimmer 15s linear infinite;
}

/* 🟡 Gold shimmer animation for small elements (bars, badges) */
@keyframes goldShimmerSmall {
  0% { background-position: -300% 0; }
  100% { background-position: 300% 0; }
}
.gold-shine-small {
  background: linear-gradient(120deg, #e6c547 0%, #ffd700 16.67%, #fff4b1 33.33%, #ffd700 50%, #e6c547 66.67%, #e6c547 83.33%, #ffd700 100%);
  background-size: 600% 100%;
  animation: goldShimmerSmall 12s linear infinite;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Wikipedia Entity Linking Styles */
.entity-badge {
    position: relative;
    display: inline-block;
}

.entity-tooltip {
    position: absolute;
    z-index: 1000;
    width: 320px;
    max-width: 90vw;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 1rem;
    margin-top: 0.5rem;
    pointer-events: auto;
}

.entity-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 1rem;
    width: 12px;
    height: 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}

.entity-wikipedia-link {
    position: relative;
    z-index: 1;
}

.entity-wikipedia-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Responsive tooltip positioning */
@media (max-width: 640px) {
    .entity-tooltip {
        width: 280px;
        left: 50%;
        transform: translateX(-50%);
    }

    .entity-tooltip::before {
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
    }
}

/* 🥈 Silver shimmer animation (uses same keyframes) */
.silver-shine {
  background: linear-gradient(120deg, #c0c0c0 0%, #e0e0e0 25%, #ffffff 50%, #e0e0e0 75%, #c0c0c0 100%, #c0c0c0 125%, #e0e0e0 150%, #ffffff 175%, #e0e0e0 200%, #c0c0c0 225%);
  background-size: 400% 100%;
  animation: goldShimmer 15s linear infinite;
}

/* 🥉 Bronze shimmer animation (uses same keyframes) */
.bronze-shine {
  background: linear-gradient(120deg, #cd7f32 0%, #d88f4f 25%, #e8b07d 50%, #d88f4f 75%, #cd7f32 100%, #cd7f32 125%, #d88f4f 150%, #e8b07d 175%, #d88f4f 200%, #cd7f32 225%);
  background-size: 400% 100%;
  animation: goldShimmer 15s linear infinite;
}

/* 🥈 Silver text shimmer */
.silver-text-shine {
  background: linear-gradient(90deg, #c0c0c0 0%, #e0e0e0 12.5%, #ffffff 25%, #e0e0e0 37.5%, #c0c0c0 50%, #c0c0c0 62.5%, #e0e0e0 75%, #ffffff 87.5%, #e0e0e0 100%);
  background-size: 800% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldTextShimmer 15s linear infinite;
}

/* 🥉 Bronze text shimmer */
.bronze-text-shine {
  background: linear-gradient(90deg, #cd7f32 0%, #d88f4f 12.5%, #e8b07d 25%, #d88f4f 37.5%, #cd7f32 50%, #cd7f32 62.5%, #d88f4f 75%, #e8b07d 87.5%, #d88f4f 100%);
  background-size: 800% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldTextShimmer 15s linear infinite;
}

/* 🥈 Silver shimmer for small bars/badges */
.silver-shine-small {
  background: linear-gradient(120deg, #c0c0c0 0%, #e0e0e0 16.67%, #ffffff 33.33%, #e0e0e0 50%, #c0c0c0 66.67%, #c0c0c0 83.33%, #e0e0e0 100%);
  background-size: 600% 100%;
  animation: goldShimmerSmall 12s linear infinite;
}

/* 🥉 Bronze shimmer for small bars/badges */
.bronze-shine-small {
  background: linear-gradient(120deg, #cd7f32 0%, #d88f4f 16.67%, #e8b07d 33.33%, #d88f4f 50%, #cd7f32 66.67%, #cd7f32 83.33%, #d88f4f 100%);
  background-size: 600% 100%;
  animation: goldShimmerSmall 12s linear infinite;
}