.vlx-leaderboard-popup{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;opacity:0;visibility:hidden;transition:opacity .3s ease , visibility .3s ease}.vlx-leaderboard-popup.show{opacity:1;visibility:visible}.vlx-leaderboard-popup .popup-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);cursor:pointer}.vlx-leaderboard-popup .popup-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);background:#fff;border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.3);width:90%;height:65%;overflow-y:auto;transition:transform .3s ease;box-sizing:border-box}.vlx-leaderboard-popup.show .popup-content{transform:translate(-50%,-50%) scale(1)}.vlx-leaderboard-popup .popup-close{position:absolute;top:15px;right:20px;width:30px;height:30px;background:#f44336;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold;z-index:10;transition:background-color .2s ease}.vlx-leaderboard-popup .popup-close:hover{background:#d32f2f}.vlx-leaderboard-popup .popup-content.loading{width:90%;height:65%;padding:40px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}.loading-spinner{width:60px;height:60px;border:6px solid #f3f3f3;border-top:6px solid #2196f3;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}.vlx-leaderboard-popup .popup-content.error{width:90%;height:65%;padding:30px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}.error-content h3{color:#f44336;margin-bottom:15px}.error-content .btn{background:#2196f3;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;margin-top:15px}.leaderboard-content{padding:30px;min-width:500px}.leaderboard-content h2{text-align:center;margin-bottom:30px;color:#333;font-size:28px;font-weight:bold}.leaderboard-table{background:#f9f9f9;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1)}.leaderboard-header{display:grid;grid-template-columns:60px 1fr 120px;gap:15px;padding:15px 20px;background:#2196f3;color:#fff;font-weight:bold;font-size:14px;text-transform:uppercase}.leaderboard-row{display:grid;grid-template-columns:60px 1fr 120px;gap:15px;padding:15px 20px;border-bottom:1px solid #eee;transition:background-color .2s ease}.leaderboard-row:hover{background:#f0f0f0}.leaderboard-row:last-child{border-bottom:none}.leaderboard-row .rank{font-weight:bold;color:#666;text-align:center}.leaderboard-row:nth-child(2) .rank {color:#ffd700;font-size:16px}.leaderboard-row:nth-child(3) .rank {color:silver;font-size:16px}.leaderboard-row:nth-child(4) .rank {color:#cd7f32;font-size:16px}.leaderboard-row .name{display:flex;align-items:center;gap:8px;font-weight:500}.leaderboard-row .avatar{display:inline-block;width:24px;height:24px;background:#4caf50;color:#fff;border-radius:50%;text-align:center;line-height:24px;font-size:14px;flex-shrink:0}.leaderboard-row .score{text-align:right;font-weight:bold;color:#2196f3}.user-position{margin-top:30px;padding-top:20px;border-top:2px solid #ddd}.user-position h3{text-align:center;margin-bottom:15px;color:#666;font-size:18px}.user-position .user-row{background:#e3f2fd;border:2px solid #2196f3;border-radius:8px;font-weight:bold}.user-position .user-row .rank{color:#2196f3}.no-scores{text-align:center;padding:40px 20px;color:#666;font-style:italic;font-size:16px}@media (max-width:768px){.leaderboard-content{min-width:auto;padding:20px}.leaderboard-header,.leaderboard-row{grid-template-columns:50px 1fr 100px;gap:10px;padding:12px 15px;font-size:14px}.leaderboard-content h2{font-size:24px;margin-bottom:20px}.vlx-leaderboard-popup .popup-content{width:95%;height:70%;margin:0}}@media (max-width:480px){.leaderboard-header,.leaderboard-row{grid-template-columns:40px 1fr 80px;gap:8px;padding:10px 12px;font-size:13px}.leaderboard-row .avatar{width:20px;height:20px;line-height:20px;font-size:12px}.leaderboard-content h2{font-size:20px}}@keyframes slideInUp {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}.vlx-leaderboard-popup.show .popup-content{animation:slideInUp .3s ease-out}