/* --- Definizione Font Personalizzati --- */
body {
    font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .display-4, .display-5 {
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #f0f2f5;
    /* Aggiungiamo spazio in basso per non far coprire il footer dal banner */
    padding-bottom: 150px; 
}

/* Colore personalizzato per i pulsanti e link "Twitch" */
.btn-twitch {
    background-color: #6441a5;
    color: #fff;
}

.btn-twitch:hover {
    background-color: #523485;
    color: #fff;
}

.twitch-brand {
    color: #9146ff !important;
}

/* Stile per il badge LIVE */
.live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #e91916;
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10;
}

/* Stile per i filtri */
.filters .btn {
    border-radius: 20px;
}

.filters .btn.active {
    background-color: #6441a5;
    color: #fff;
}

/* Stile per il saldo punti nella navbar */
.points-balance {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-right: 1rem;
}

/* STILI PER IL BANNER DEI COOKIE */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #212529; /* Un grigio scuro, coerente con il tema */
    color: #f8f9fa;
    padding: 1.2rem 0;
    z-index: 1050; /* Sopra quasi tutto il resto */
    display: none; /* Nascosto di default, lo mostra il JS */
    border-top: 1px solid #495057;
}

.cookie-text {
    font-size: 0.85rem;
    margin-right: 1rem;
}

.cookie-text a {
    color: #fff;
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    gap: 0.75rem;
    min-width: 170px; /* Evita che i pulsanti vadano a capo */
    justify-content: center;
}

/* Stile per le notifiche a comparsa (Toast) */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #9146ff; /* Colore viola Twitch */
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1050; /* Sopra la maggior parte degli elementi */
    font-size: 1.1rem;
    font-weight: bold;
    border-left: 5px solid #6441a5; /* Viola più scuro */
    animation: slideIn 0.5s ease-out forwards;
}

.toast-notification.fade-out {
    animation: fadeOut 0.5s ease-in forwards;
}

/* Animazione di entrata */
@keyframes slideIn {
    from {
        transform: translateX(110%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animazione di uscita */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Stile per il pulsante Donazione nella navbar */
.btn-donate {
    background-color: #ffc107; /* Giallo 'warning' di Bootstrap, ricorda PayPal */
    color: #000;
    font-weight: bold;
    border: none;
    transition: all 0.2s ease-in-out;
}

.btn-donate:hover {
    background-color: #ffca2c;
    color: #000;
    transform: scale(1.05); /* Leggero ingrandimento al passaggio del mouse */
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

/* --- Stili per Tema Chiaro/Scuro --- */

/* Stile per l'interruttore del tema */
.theme-toggle {
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.2s ease-in-out;
}
.theme-toggle:hover {
    transform: scale(1.1) rotate(15deg);
}

/* Stili specifici per il tema scuro, attivati da Bootstrap */
[data-bs-theme="dark"] {
    /* Sovrascriviamo il colore del brand Twitch per il tema scuro */
    .twitch-brand, .btn-twitch {
        background-color: #9146ff;
        color: #fff;
    }
    .btn-twitch:hover {
        background-color: #a46eff;
    }

    /* Miglioriamo la leggibilità dei punti nella navbar */
    .points-balance {
        background-color: #4a4a4a;
        color: #fff;
    }
}

/* Fix per lo sfondo in tema scuro */
[data-bs-theme="dark"] body {
  background-color: #212529; /* Grigio scuro standard di Bootstrap */
  color: #dee2e6; /* Testo grigio chiaro standard di Bootstrap */
}

/* Fix per il brand nella navbar in tema scuro */
[data-bs-theme="dark"] .navbar-brand.twitch-brand {
    background-color: transparent; /* Rimuove lo sfondo */
    color: #9146ff !important; /* Mantiene il colore del testo viola */
}

/* --- Effetto Hover per le Card Streamer --- */
.streamer-card {
    /* Definiamo la durata e lo stile della transizione */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.streamer-card:hover {
    /* Sposta la card verso l'alto di 5 pixel */
    transform: translateY(-5px);
    /* Aumenta l'ombra per dare un effetto di profondità */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

/* --- Stili per i Bordi Profilo (Flair) --- */
.flair-wrapper {
    /* Contenitore che si adatta all'immagine */
    display: inline-block;
    border-radius: 50%; /* Rende il bordo circolare */
    padding: 4px; /* Spaziatura tra il bordo e l'immagine */
    transition: border-color 0.3s ease;
}

.flair-wrapper.flair-bronze {
    border: 4px solid #cd7f32;
}

.flair-wrapper.flair-silver {
    border: 4px solid #c0c0c0;
}

.flair-wrapper.flair-gold {
    border: 4px solid #ffd700;
}

/* --- Effetto Hover per le Card Streamer --- */
.streamer-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.streamer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

/* Stile per il badge LIVE */
.live-badge {
    position: absolute;
    top: 10px;
    left: 10px; /* Modificato da 'right' per non sovrapporsi al bordo flair */
    background-color: red;
    color: white;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 10;
}

/* --- Stili per la pagina Guida (Home) --- */
.section-shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    padding: 2.5rem !important; /* Aumenta il padding interno */
    margin-bottom: 3rem; /* Spazio sotto la sezione */
    border-radius: 0.75rem; /* Bordi leggermente più arrotondati */
}

.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem; /* Dimensione emoji */
    margin-bottom: 1rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08); /* Ombra leggera */
}

/* Colori più specifici per i cerchi delle icone */
.icon-circle.bg-success-subtle { background-color: rgba(25, 135, 84, 0.1); } /* Verde più chiaro */
.icon-circle.bg-primary-subtle { background-color: rgba(13, 110, 253, 0.1); } /* Blu più chiaro */
.icon-circle.bg-warning-subtle { background-color: rgba(255, 193, 7, 0.1); } /* Giallo più chiaro */


/* Centratura specifica per il testo nelle colonne su mobile */
@media (max-width: 767.98px) {
    .row.g-5 .col-lg-4 ul {
        text-align: center; /* Centra le liste puntate su mobile */
    }
}

/* --- Stili per la Pagina Obiettivi --- */
.achievement-icon {
    font-size: 3.5rem;
    line-height: 1;
}

.locked-achievement {
    opacity: 0.5;
    filter: grayscale(80%);
    transition: all 0.3s ease;
}

.locked-achievement:hover {
    opacity: 0.8;
    filter: grayscale(0);
}

.unlocked-achievement {
    border: 2px solid var(--bs-warning);
}

.unlocked-achievement .achievement-icon {
    transform: scale(1.1);
}

/* --- Stili per il Negozio Temi --- */
.theme-preview {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: transform 0.2s ease;
}
.theme-preview:hover {
    transform: scale(1.05);
}
.theme-preview.theme-cyberpunk-preview {
    background: linear-gradient(45deg, #0d1a26, #f02a77);
}
.theme-preview.theme-forest-preview {
    background: linear-gradient(45deg, #234d20, #8fbc8f);
}

/* --- Stili dei Temi per la Pagina Profilo --- */

/* Tema Cyberpunk */
.profile-theme-cyberpunk {
    background: linear-gradient(135deg, #0d1a26 0%, #2a0a2e 100%);
    color: #e0e0e0;
}
.profile-theme-cyberpunk .card {
    background-color: rgba(20, 20, 40, 0.7);
    border: 1px solid #f02a77;
    backdrop-filter: blur(5px);
}
.profile-theme-cyberpunk .card-header,
.profile-theme-cyberpunk .card-footer {
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid #f02a77;
    border-top: 1px solid #f02a77;
}
.profile-theme-cyberpunk h1, .profile-theme-cyberpunk h2, .profile-theme-cyberpunk h4, .profile-theme-cyberpunk h5 {
    color: #ff79c6;
    text-shadow: 0 0 5px #ff79c6;
}
.profile-theme-cyberpunk .text-muted {
    color: #6272a4 !important;
}

/* Tema Foresta Incantata */
.profile-theme-forest {
    background: linear-gradient(135deg, #234d20 0%, #3e8d4a 100%);
    color: #f0fff0;
}
.profile-theme-forest .card {
    background-color: rgba(10, 30, 10, 0.6);
    border: 1px solid #8fbc8f;
    backdrop-filter: blur(5px);
}
.profile-theme-forest .card-header,
.profile-theme-forest .card-footer {
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid #8fbc8f;
    border-top: 1px solid #8fbc8f;
}
.profile-theme-forest h1, .profile-theme-forest h2, .profile-theme-forest h4, .profile-theme-forest h5 {
    color: #adff2f;
    text-shadow: 0 0 5px #adff2f;
}
.profile-theme-forest .text-muted {
    color: #98fb98 !important;
}

/* --- Stili per il Negozio Temi --- */
.theme-preview { width: 100%; height: 50px; border-radius: 5px; border: 1px solid var(--bs-border-color); }
.theme-preview.theme-cyberpunk-preview { background: linear-gradient(45deg, #0d1a26, #f02a77); }
.theme-preview.theme-forest-preview { background: linear-gradient(45deg, #234d20, #8fbc8f); }

/* --- Stili dei Temi per la Pagina Profilo --- */
.profile-theme-cyberpunk { background: linear-gradient(135deg, #0d1a26 0%, #2a0a2e 100%); color: #e0e0e0; }
.profile-theme-cyberpunk .card { background-color: rgba(20, 20, 40, 0.7); border: 1px solid #f02a77; backdrop-filter: blur(5px); }
.profile-theme-cyberpunk h1, .profile-theme-cyberpunk h2, .profile-theme-cyberpunk h4, .profile-theme-cyberpunk h5 { color: #ff79c6; text-shadow: 0 0 5px #ff79c6; }

.profile-theme-forest { background: linear-gradient(135deg, #234d20 0%, #3e8d4a 100%); color: #f0fff0; }
.profile-theme-forest .card { background-color: rgba(10, 30, 10, 0.6); border: 1px solid #8fbc8f; backdrop-filter: blur(5px); }
.profile-theme-forest h1, .profile-theme-forest h2, .profile-theme-forest h4, .profile-theme-forest h5 { color: #adff2f; text-shadow: 0 0 5px #adff2f; }

/* === Stile per la lista annunci sulla Home Page === */
.home-announcement-list .list-group-item {
  /* Aggiunge una transizione fluida al passaggio del mouse */
  transition: background-color 0.2s ease-in-out;
}

/* Stile specifico per il tema chiaro */
[data-bs-theme="light"] .home-announcement-list .list-group-item {
  background-color: #fff;
}

/* Stile specifico per il tema scuro */
[data-bs-theme="dark"] .home-announcement-list .list-group-item {
  background-color: #2b3035; /* Un grigio leggermente più chiaro dello sfondo per creare contrasto */
  border-color: #495057;
}

/* Effetto al passaggio del mouse per entrambi i temi */
.home-announcement-list .list-group-item:hover {
  background-color: var(--bs-tertiary-bg);
}

/* === Identity & Theme Vars ============================================= */
:root{
  --color-primary:#9146FF;         /* Twitch violet */
  --color-accent:#00FFE0;          /* neon cyan accent */
  --color-bg-soft:#F5F5F7;         /* light section background */
  --color-card:#FFFFFF;
  --radius-lg:14px;
  --shadow-sm:0 4px 14px rgba(17,17,17,.08);
  --shadow-md:0 10px 30px rgba(145,70,255,.15);
  --shadow-glow:0 0 0 0 rgba(145,70,255,.0);
}

html[data-bs-theme="dark"]{
  --color-bg-soft:#141418;
  --color-card:#17171c;
  --shadow-sm:0 6px 16px rgba(0,0,0,.35);
  --shadow-md:0 14px 36px rgba(145,70,255,.18);
}

/* Smooth theme transition */
body{ transition: background-color .35s ease, color .35s ease; }

/* === Global polish ====================================================== */
.section-title{ letter-spacing:.2px }
.section-shadow{ box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }

/* Buttons */
.btn-twitch{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color:#fff;
}
.btn-twitch:hover{ filter: brightness(1.05); box-shadow: 0 6px 18px rgba(145,70,255,.25); }

/* Navbar logo spacing */
.navbar-brand img{ filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }

/* Streamer cards: hover + subtle lift */
.streamer-card{ transition: transform .25s ease, box-shadow .25s ease; }
.streamer-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

/* LIVE badge più leggibile */
.live-badge{
  position:absolute; left:12px; top:12px; z-index:2;
  background: #e11937; color:#fff; font-weight:700; font-size:.8rem;
  padding:6px 10px; border-radius:999px;
  box-shadow: 0 6px 12px rgba(225,25,55,.35);
}

/* Anteprime live */
.twitch-placeholder img{ border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.play-embed{ border-radius:999px; padding:.4rem .8rem; }

/* Avatar + flair */
.flair-wrapper img{ border:3px solid transparent; }
.flair-bronze img{ border-color:#cd7f32; box-shadow: 0 0 12px rgba(205,127,50,.35); }
.flair-silver img{ border-color:#c0c0c0; box-shadow: 0 0 14px rgba(192,192,192,.35); }
.flair-gold img{ border-color:#FFD700; box-shadow: 0 0 18px rgba(255,215,0,.45); }

/* Tema profilo (wrapper presente in profilo.html) */
.profile-theme-default{ background: linear-gradient(180deg, rgba(145,70,255,.07), transparent); }
.profile-theme-cyberpunk{ background: radial-gradient(1200px 400px at 10% -10%, rgba(0,255,224,.08), transparent); }
.profile-theme-forest{ background: radial-gradient(1200px 400px at 90% -10%, rgba(0,255,136,.08), transparent); }

/* Sezioni statistiche */
.list-group-item{ background: transparent; }

/* === Flash “toast-like” (Base) ========================================= */
.alert{
  border:0; border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  animation: alertPop .3s ease;
}
@keyframes alertPop{ from{ transform:translateY(-6px); opacity:0 } to{ transform:none; opacity:1 } }
/* Bonus: i messaggi “+punti” già taggati con 'points-gain' (presenti in base/app) */
.alert.points-gain{
  background: linear-gradient(90deg, rgba(145,70,255,.15), transparent);
  border-left: 4px solid var(--color-primary);
}

/* === Footer polish ===================================================== */
footer{ border-top:1px solid rgba(255,255,255,.06); }
footer a:hover{ text-decoration: underline; }

/* === Small helpers ===================================================== */
.badge.rounded-pill i{ vertical-align: -1px; }

#filtersWrap{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--color-card) 82%, transparent);
  border-bottom:1px solid rgba(145,70,255,.12);
  padding: .6rem .2rem;
}

/* Stile per il pulsante attivo */
.filters .filter-btn.active {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    border-color: var(--bs-primary);
}

/* Stile al passaggio del mouse */
.filters .filter-btn:not(.active):hover {
    background-color: var(--bs-tertiary-bg);
}

/* — Vetrina: chip dei tag compatti e a prova di override — */
#filtersWrap .filters{
  display:flex;
  flex-wrap: wrap;         /* usa più righe; se vuoi lo scroll orizzontale rimetti nowrap */
  gap: .5rem;
  overflow: visible;       /* evita trucchi di altezza */
  padding-bottom: .2rem;
}

#filtersWrap .filters .btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: .25rem .6rem !important;   /* tag piccoli */
  font-size: .875rem !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  white-space: nowrap !important;     /* niente capo su due righe */
}

#filtersWrap .filters .filter-btn{
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
}

#filtersWrap .filters .filter-btn.active{
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* --- PATCH PER BLOG E DARK MODE --- */

/* 1. Gestione sfondo "bg-light" in Dark Mode */
[data-bs-theme="dark"] .bg-light {
    background-color: #2b3035 !important; /* Grigio scuro invece che bianco */
    color: #e0e0e0 !important; /* Testo chiaro */
}

/* 2. Gestione testo "text-dark" in Dark Mode (il colpevole del nero su nero) */
[data-bs-theme="dark"] .text-dark {
    color: #f8f9fa !important; /* Forza il bianco */
}

/* 3. Gestione Cards del Blog in Dark Mode */
[data-bs-theme="dark"] .card {
    background-color: #212529; /* Sfondo scuro per le card */
    border-color: #373b3e;     /* Bordo sottile grigio */
}

/* 4. Gestione testo muto (date, autori) per renderlo leggibile */
[data-bs-theme="dark"] .text-muted {
    color: #adb5bd !important; /* Grigio chiaro leggibile su scuro */
}

/* 5. Gestione specifica per gli articoli (article-content) */
[data-bs-theme="dark"] .article-content {
    color: #d1d1d1; /* Testo generale dell'articolo grigio chiaro riposante */
}

/* 6. Fix per i bordi e le linee orizzontali */
[data-bs-theme="dark"] hr {
    border-color: #dee2e6;
    opacity: 0.2;
}

/* 7. Drop Cap (la lettera grande iniziale) in Dark Mode */
[data-bs-theme="dark"] .drop-cap::first-letter {
    color: #ffc107; /* Giallo oro per contrasto su scuro */
}

/* 8. Hover sui link nel box "Approfondimenti" */
[data-bs-theme="dark"] .hover-bg-white:hover {
    background-color: #343a40 !important; /* Grigio scuro all'hover, non bianco flash */
    color: #fff !important;
}

/* =========================================
   VETRINA 2.0 - NUOVO DESIGN MODERNO
   ========================================= */

/* 1. Card Streamer "Premium" (Senza bordi, con ombra) */
.streamer-card {
    border: none !important;              /* Rimuove il vecchio bordo grigio */
    border-radius: 16px !important;       /* Angoli molto arrotondati */
    background-color: var(--bs-body-bg);  /* Si adatta al tema (bianco/scuro) */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Ombra leggera di base */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;                     /* Serve per lo zoom dell'immagine */
}

/* Effetto quando passi il mouse sulla card */
.streamer-card:hover {
    transform: translateY(-8px) !important;   /* La card sale verso l'alto */
    box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important; /* L'ombra diventa profonda */
    z-index: 10;
}

/* 2. Header dei Filtri "Glassmorphism" (Effetto Vetro Sfocato) */
#filtersWrap {
    /* Usa le variabili RGB di Bootstrap per la trasparenza corretta */
    background: rgba(var(--bs-body-bg-rgb), 0.85) !important; 
    backdrop-filter: blur(12px) !important;       /* Sfocatura stile iOS/Windows */
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    
    /* Reset delle vecchie impostazioni flex che rompevano il layout */
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding: 15px 0 !important;
    margin-bottom: 20px !important;
    z-index: 1020; /* Assicura che stia sopra le card */
}

/* 3. Pulsante "Filtri & Tag" */
.btn-filter-toggle {
    border-radius: 50px;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

/* 4. Badge LIVE pulsante (Migliorato) */
.live-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #e91916;
    color: white;
    padding: 4px 12px;
    font-weight: 800;
    border-radius: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(233, 25, 22, 0.5);
    z-index: 20;
    animation: pulse-red 2s infinite;
}

/* 5. Immagine Thumbail e Zoom */
.streamer-card .card-img-top, 
.streamer-card .twitch-placeholder img {
    transition: transform 0.5s ease;
}

.streamer-card:hover .card-img-top,
.streamer-card:hover .twitch-placeholder img {
    transform: scale(1.05); /* Leggero zoom dell'immagine all'hover */
}

/* 6. Pulsante Play (Guarda Live) */
.play-embed {
    opacity: 0;
    transform: translate(-50%, -40%); /* Parte leggermente più in alto */
    transition: all 0.3s ease;
}

/* Mostra il tasto play solo quando vai sulla card */
.twitch-placeholder:hover .hover-show {
    opacity: 1 !important;
}
.twitch-placeholder:hover .play-embed {
    opacity: 1;
    transform: translate(-50%, -50%); /* Scende al centro perfetto */
}

/* 7. Flair Profilo (Immagine tonda) */
.flair-wrapper img {
    border: 4px solid var(--bs-body-bg); /* Bordo color sfondo per stacco pulito */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
.streamer-card:hover .flair-wrapper img {
    transform: scale(1.1); /* Zoom logo all'hover */
}

/* 8. Fix per il tema scuro specifico */
[data-bs-theme="dark"] .streamer-card {
    border: 1px solid rgba(255,255,255,0.05) !important; /* Un bordo sottilissimo per definire meglio sul nero */
}

/* === MODERN UI UPGRADE === */

/* 1. Sfumature Twitch (Brand Identity) */
.bg-gradient-twitch {
    background: linear-gradient(135deg, #6441a5 0%, #9146ff 100%);
    color: white;
}
.text-gradient {
    background: linear-gradient(45deg, #6441a5, #ff0055);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* 2. Card "Widget" (Per le statistiche in Home) */
.stats-card {
    border: none;
    border-radius: 16px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
}
.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(100, 65, 165, 0.15) !important;
}
.stats-icon {
    position: absolute;
    right: -10px;
    bottom: -10px;
    font-size: 5rem;
    opacity: 0.1;
    transform: rotate(-15deg);
}

/* 3. Titoli di sezione più belli */
.section-header {
    border-left: 5px solid #9146ff;
    padding-left: 15px;
    margin-bottom: 25px;
}

/* 4. Avatar con anello colorato (Story style) */
.avatar-ring {
    padding: 3px;
    background: linear-gradient(45deg, #6441a5, #e91916);
    border-radius: 50%;
    display: inline-block;
}
.avatar-ring img {
    border: 2px solid var(--bs-body-bg); /* Crea lo stacco */
    border-radius: 50%;
    display: block;
}

/* === SISTEMA PRESTIGIO & BADGE === */

/* 1. Badge Icone (Verificato e Supporter) */
.badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-left: 4px;
    font-size: 10px;
    vertical-align: middle;
}

/* Spunta Blu (Verificato) */
.badge-verified {
    background-color: #1da1f2; /* Blu Twitter/Social */
    color: white;
}

/* Cuore Ko-fi (Supporter) */
.badge-supporter {
    background-color: #ff5f5f; /* Rosso Ko-fi */
    color: white;
    box-shadow: 0 0 5px rgba(255, 95, 95, 0.5);
    animation: heartbeat 2s infinite;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    10% { transform: scale(1.1); }
    20% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* 2. Livelli VIP (Effetti sul Nome) */
.vip-diamond {
    color: #00d2ff !important;
    text-shadow: 0 0 5px rgba(0, 210, 255, 0.3);
    font-weight: 800;
    background: -webkit-linear-gradient(45deg, #00d2ff, #007bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vip-gold {
    color: #ffc107 !important;
    text-shadow: 0 0 3px rgba(255, 193, 7, 0.3);
    font-weight: 700;
}

.vip-silver {
    color: #aeb5bc !important; /* Argento chiaro per leggibilità */
    font-weight: 600;
}

.vip-bronze {
    color: #cd7f32 !important;
    font-weight: 600;
}

.backdrop-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.bg-gradient-twitch {
    background: linear-gradient(90deg, #9146ff 0%, #00d2ff 100%);
}