/* --- GLOBAL --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Biar tidak ada scroll saat animasi */
}

.hidden { display: none !important; }

/* --- LEADERBOARD SCREEN --- */
.leaderboard-bg {
    /* Pastikan path gambar benar */
    background: url('/media/bg-loreal.png') no-repeat center center;
    background-size: cover; 
    background-attachment: fixed;
    width: auto;
    height: auto;
    display: block;
    position: relative; 
}

/* Container dengan sedikit overlay gelap biar teks terbaca */
.leaderboard-container {
    position: fixed;
    
    /* UBAH KE KIRI */
    left: 80px; 
    right: auto; /* Reset properti right */
    
    /* UBAH KE TENGAH VERTIKAL */
    top: 25%; 
    transform: translateY(-50%);
    
    width: 600px; /* Lebar container disesuaikan */
    max-width: 90vw;
    text-align: left; /* Rata kiri agar rapi */
    z-index: 50;
}

h1 {
    font-size: 3.5rem;
    font-weight: 900;
    color: #ffffff; /* Warna Putih agar kontras */
    text-transform: uppercase;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Shadow agar kebaca di background apapun */
    margin: 0 0 20px 10px; /* Margin bawah 20px, kiri 10px sejajar list */
    letter-spacing: 4px;
    font-family: 'Montserrat', sans-serif; /* Pastikan font sesuai tema */
}

/* --- LIST ITEM ADJUSTMENT --- */
ul {
    list-style: none;
    padding: 0;
}

li {
    /* Tetap sama seperti sebelumnya */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    padding: 20px 30px;
    
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    
    border-radius: 15px; /* Sedikit lebih kotak tapi tumpul modern */
    
    font-size: 1.8rem; /* Font agak diperbesar */
    font-weight: 700;
    color: #fff; /* Text list jadi putih biar elegan */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    
    opacity: 0;
    animation: slideRightFade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes slideRightFade {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

li .rank { font-weight: 900; color: #ffeb3b; width: 50px; }
li .name { flex-grow: 1; text-align: left; padding-left: 20px; text-transform: capitalize; }
li .score { color: #fff; }
/* --- KHUSUS JUARA 1, 2, 3 (OUTLINE & PULSE) --- */

/* Juara 1: Emas */
li.rank-1 { color: #000; text-shadow: none; }
li.rank-1 .rank, li.rank-1 .score { color: #000; }

li.rank-2 { color: #000; text-shadow: none; }
li.rank-2 .rank, li.rank-2 .score { color: #000; }

li.rank-3 { color: #000; text-shadow: none; }
li.rank-3 .rank, li.rank-3 .score { color: #000; }

/* --- KEYFRAMES ANIMASI --- */

/* Animasi List Muncul dari bawah */
@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Pulse Emas */
@keyframes pulseGold {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

/* Pulse Perak */
@keyframes pulseSilver {
    0% { box-shadow: 0 0 0 0 rgba(192, 192, 192, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(192, 192, 192, 0); }
    100% { box-shadow: 0 0 0 0 rgba(192, 192, 192, 0); }
}

/* Pulse Perunggu */
@keyframes pulseBronze {
    0% { box-shadow: 0 0 0 0 rgba(205, 127, 50, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(205, 127, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(205, 127, 50, 0); }
}

/* --- OVERLAY METER & LOTTIE (Tetap sama, dirapikan dikit) --- */
.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); /* Lebih gelap utk fokus */
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

/* Bar unik loudness */
.meter-wrapper {
    display: flex; flex-direction: column; gap: 6px;
    width: 120px; height: 50vh; justify-content: flex-end;
}
.bar {
    width: 100%; height: 8%;
    background: #222; border-radius: 10px;
    transition: 0.1s; opacity: 0.2;
}
.bar.active { opacity: 1; box-shadow: 0 0 15px currentColor; transform: scaleX(1.1); }

/* Warna Bar */
.bar-1.active, .bar-2.active { background: #ffe600; box-shadow: 0 0 20px #ffe600; }
.bar-3.active, .bar-4.active { background: #ffaa00; }
.bar-5.active, .bar-6.active { background: #ff7b00; }
.bar-7.active, .bar-8.active { background: #ff4000; }
.bar-9.active { background: #ff0000; box-shadow: 0 0 20px #ff0000; }
.bar-10.active { background: #d300ff; box-shadow: 0 0 30px #d300ff; border: 2px solid white; height: 12%; }