/* Styles personnalisés supplémentaires pour WoL.gg */

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgb(var(--gold-rgb) / 0.25); }
    50%      { box-shadow: 0 0 40px rgb(var(--gold-rgb) / 0.5); }
}

.fade-in { animation: fadeIn 0.6s ease-out both; }
.pulse-glow { animation: pulse-glow 2.4s ease-in-out infinite; }

/* Scrollbar personnalisée */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgb(var(--ink-rgb) / 0.6); }
::-webkit-scrollbar-thumb {
    background: rgb(var(--gold-rgb) / 0.45);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--gold-rgb) / 0.75); background-clip: padding-box; }

/* Badges de médaille (top 3) */
.badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.8rem; border-radius: 0.6rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
}
.badge-gold    { background: rgba(251, 191, 36, 0.16); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); }
.badge-silver  { background: rgba(203, 213, 225, 0.16); color: #cbd5e1; border: 1px solid rgba(203, 213, 225, 0.3); }
.badge-bronze  { background: rgba(205, 127, 50, 0.16); color: #cd7f32; border: 1px solid rgba(205, 127, 50, 0.3); }
.badge-veteran { background: rgba(251, 191, 36, 0.16); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); }

/* Cartes de statistiques : liseré or au survol */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgb(var(--gold-rgb)), transparent);
    opacity: 0; transition: opacity 0.3s ease;
}
.stat-card:hover::before { opacity: 1; }

/* Loading spinner */
.spinner {
    border: 3px solid rgb(var(--gold-rgb) / 0.15);
    border-radius: 50%;
    border-top-color: rgb(var(--gold-rgb));
    width: 40px; height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Barre de progression (temps perdu) */
.progress-bar { transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); }

/* Coupe de texte sur N lignes */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Typo responsive */
@media (max-width: 640px) {
    .text-responsive-xl  { font-size: 2rem; }
    .text-responsive-2xl { font-size: 2.5rem; }
}

/* Soulignement de lien */
.link-underline { position: relative; display: inline-block; }
.link-underline::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0;
    background-color: rgb(var(--gold-rgb)); transition: width 0.3s ease;
}
.link-underline:hover::after { width: 100%; }

/* Tooltip */
.tooltip { position: relative; }
.tooltip::after {
    content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 0.5rem 0.9rem; background: rgb(var(--ink-rgb)); color: rgb(var(--text-rgb));
    font-size: 0.72rem; border-radius: 0.5rem; white-space: nowrap;
    border: 1px solid rgb(var(--gold-rgb) / 0.25);
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.tooltip:hover::after { opacity: 1; }

/* Grille de statistiques */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }

/* Effet de brillance sur les boutons */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgb(var(--text-rgb) / 0.18), transparent);
    transition: left 0.5s ease;
}
.btn-shine:hover::before { left: 100%; }