/* ============================================================
   SKIN ANIMASI BARIS LEADERBOARD (FULL ROW SEAMLESS)
   ============================================================ */

/* Reset posisi pada TD & transparansi background agar TR terlihat menyatu */
.leaderboard-table tbody tr td {
    position: relative;
    z-index: 2;
    background: transparent !important; /* Membuat semua cell transparan */
}

/* Matikan pseudo-element default pada TD agar gambar GIF TR tidak tertutup */
.leaderboard-table tbody tr td::before,
.leaderboard-table tbody tr td::after {
    display: none !important;
}

/* ------------------------------------------------------------
   INDIKATOR BORDER KIRI (AKSEN WARNA TIPE SKIN)
   ------------------------------------------------------------ */
.skin-1 td:first-child { box-shadow: inset 4px 0 0 #ff4500 !important; }
.skin-2 td:first-child { box-shadow: inset 4px 0 0 #22c55e !important; }
.skin-3 td:first-child { box-shadow: inset 4px 0 0 #c084fc !important; }
.skin-4 td:first-child { box-shadow: inset 4px 0 0 #38bdf8 !important; }
.skin-5 td:first-child { box-shadow: inset 4px 0 0 #d97706 !important; }
.skin-6 td:first-child { box-shadow: inset 4px 0 0 #e11d48 !important; }
.skin-7 td:first-child { box-shadow: inset 4px 0 0 #eab308 !important; }
.skin-8 td:first-child { box-shadow: inset 4px 0 0 #06b6d4 !important; }
.skin-neowolf td:first-child { box-shadow: inset 4px 0 0 #8b5cf6 !important; } /* Aksen Ungu Neon */
.skin-dexter td:first-child  { box-shadow: inset 4px 0 0 #ef4444 !important; } /* Aksen Merah Dexter */
.skin-tude td:first-child  { box-shadow: inset 4px 0 0 #ef4444 !important; }


/* ============================================================
   PEMANGGILAN GAMBAR GIF PADA TR (BARIS 1 - 8 & KHUSUS)
   Overlay gelap (rgba) digunakan agar teks tabel tetap terbaca jelas.
   ============================================================ */

/* Skin 1 (1.gif) */
.leaderboard-table tbody tr.skin-1 {
    background: linear-gradient(rgba(20, 5, 5, 0.65), rgba(20, 5, 5, 0.65)), 
                url('1.gif') center/cover no-repeat !important;
}

/* Skin 2 (2.gif) */
.leaderboard-table tbody tr.skin-2 {
    background: linear-gradient(rgba(5, 20, 10, 0.65), rgba(5, 20, 10, 0.65)), 
                url('2.gif') center/cover no-repeat !important;
}

/* Skin 3 (3.gif) */
.leaderboard-table tbody tr.skin-3 {
    background: linear-gradient(rgba(17, 10, 31, 0.65), rgba(17, 10, 31, 0.65)), 
                url('3.gif') center/cover no-repeat !important;
}

/* Skin 4 (4.gif) */
.leaderboard-table tbody tr.skin-4 {
    background: linear-gradient(rgba(3, 20, 36, 0.65), rgba(3, 20, 36, 0.65)), 
                url('4.gif') center/cover no-repeat !important;
}

/* Skin 5 (5.gif) */
.leaderboard-table tbody tr.skin-5 {
    background: linear-gradient(rgba(28, 14, 5, 0.65), rgba(28, 14, 5, 0.65)), 
                url('5.gif') center/cover no-repeat !important;
}

/* Skin 6 (6.gif) */
.leaderboard-table tbody tr.skin-6 {
    background: linear-gradient(rgba(25, 5, 10, 0.65), rgba(25, 5, 10, 0.65)), 
                url('6.gif') center/cover no-repeat !important;
}

/* Skin 7 (7.gif) */
.leaderboard-table tbody tr.skin-7 {
    background: linear-gradient(rgba(25, 20, 5, 0.65), rgba(25, 20, 5, 0.65)), 
                url('7.gif') center/cover no-repeat !important;
}

/* Skin 8 (8.gif) */
.leaderboard-table tbody tr.skin-8 {
    background: linear-gradient(rgba(5, 25, 25, 0.65), rgba(5, 25, 25, 0.65)), 
                url('8.gif') center/cover no-repeat !important;
}


/* ============================================================
   SKIN KHUSUS KUSTOM (NEOWOLF & DEXTER)
   ============================================================ */

/* Skin Neowolf (neowolf.gif) */
.leaderboard-table tbody tr.skin-neowolf {
    background: linear-gradient(rgba(15, 10, 25, 0.65), rgba(15, 10, 25, 0.65)), 
                url('neowolf.gif') center/cover no-repeat !important;
}

/* Skin Dexter (dexter.gif) */
.leaderboard-table tbody tr.skin-dexter {
    background: linear-gradient(rgba(25, 5, 5, 0.65), rgba(25, 5, 5, 0.65)), 
                url('dexter.gif') center/cover no-repeat !important;
}

/* Skin Dexter (dexter.gif) */
.leaderboard-table tbody tr.skin-tude {
    background: linear-gradient(rgba(25, 5, 5, 0.65), rgba(25, 5, 5, 0.65)), 
                url('tude.gif') center/cover no-repeat !important;
}