@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&display=swap');

body { font-family: 'Rajdhani', sans-serif; }
.font-arcade { font-family: 'Orbitron', sans-serif; }

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #0f172a; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #06b6d4; }

/* --- ROLURI CHAT & FRAMES --- */

/* Frame Base */
.role-frame {
    position: relative;
    padding: 2px;
    border-radius: 50%;
    display: inline-block;
}

/* OWNER: Roșu Pulse */
.frame-owner {
    background: linear-gradient(45deg, #ef4444, #7f1d1d);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    animation: pulse-red 2s infinite;
}
.text-role-owner { color: #ef4444; text-shadow: 0 0 5px rgba(239,68,68,0.5); font-weight: 900; }
.badge-owner::after { content: 'O'; background: #ef4444; }

/* ADMIN: Portocaliu */
.frame-admin {
    background: linear-gradient(45deg, #f97316, #c2410c);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
}
.text-role-admin { color: #f97316; font-weight: 800; }
.badge-admin::after { content: 'A'; background: #f97316; }

/* MODERATOR: Verde */
.frame-moderator {
    background: linear-gradient(45deg, #22c55e, #15803d);
}
.text-role-moderator { color: #22c55e; font-weight: 700; }
.badge-moderator::after { content: 'M'; background: #22c55e; }

/* VIP: Auriu */
.frame-vip {
    background: linear-gradient(45deg, #eab308, #a16207);
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}
.text-role-vip { color: #eab308; font-weight: 700; }
.badge-vip::after { content: 'V'; background: #eab308; }

/* BADGE LETTER (Colțul dreapta jos) */
.role-badge::after {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    color: black;
    font-size: 9px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #0f172a;
    z-index: 10;
}

/* VIP BLURRED NAME */
.vip-blurred {
    filter: blur(4px);
    opacity: 0.7;
    user-select: none;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* --- NOUL STIL: SCOR OVERLAY --- */
/* Wrapper-ul pentru avatar și scor. Am adăugat flex-grow la părintele acestui element în PHP */
.leaderboard-podium-item {
    display: inline-block; 
    /* Am eliminat 'display: inline-block;' de pe wrapper și l-am mutat în HTML (clasele Tailwind).
       Mă asigur că este un container de bază pentru elementele absolute. */
    position: relative; 
    /* Elimin orice decalaj implicit */
    margin: 0;
    padding: 0;
}

/* Scor overlay - vizibil la hover/click (sau active-score clasa adăugată de JS) */
.score-overlay {
    /* Asigură că overlay-ul se suprapune perfect pe imagine */
    z-index: 30;
}

.leaderboard-podium-item:hover .score-overlay,
.leaderboard-podium-item:focus .score-overlay,
.score-overlay.active-score {
    opacity: 1;
    pointer-events: none; /* Am trecut pe 'none' pentru a putea ascunde elementul, dar JavaScript-ul îl gestionează */
}

/* Ascunderea imaginii la hover/click pentru a arăta scorul */
.leaderboard-podium-item:hover img,
.leaderboard-podium-item:focus img,
.leaderboard-podium-item img.opacity-0 {
    /* Am eliminat selectorul '+ img' și am folosit clasa adăugată de JS pentru a gestiona tranziția */
    opacity: 0 !important;
}

/* Coroana: Am asigurat că este în fața overlay-ului */
.leaderboard-podium-item > div:first-child { 
    z-index: 40; 
}