/* static/css/leaderboard_page.css */

.leaderboard-wrapper {
    width: 100%;
    max-width: 420px;
    min-height: 100vh;
    background-color: #0a2d3e;
    color: white;
    display: flex;
    flex-direction: column;
}

.leaderboard-header {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #004d40;
    position: relative;
    justify-content: center;
}
.leaderboard-header h1 { font-size: 1.2em; margin: 0; }
.leaderboard-header .back-btn { position: absolute; left: 15px; color: white; font-size: 1.2em; text-decoration: none; }

.leaderboard-main {
    padding: 20px;
    padding-bottom: 80px; /* बॉटम नैव के लिए जगह */
    flex-grow: 1;
}

.tournament-info {
    text-align: center;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}
.tournament-info h3 { margin: 0 0 5px 0; color: #ffd700; }
.tournament-info p { margin: 0; color: #ccc; }

.leaderboard-list { display: flex; flex-direction: column; gap: 10px; }

.leaderboard-entry {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    padding: 10px;
    border-radius: 8px;
    transition: transform 0.2s ease;
}
.leaderboard-entry:hover { transform: scale(1.02); }

.rank {
    font-size: 1.2em;
    font-weight: bold;
    width: 40px;
    text-align: center;
}
.rank.gold { color: #ffd700; }
.rank.silver { color: #c0c0c0; }
.rank.bronze { color: #cd7f32; }

.player-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
}
.player-info img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #4db6ac;
}
.player-info .name {
    font-weight: 600;
}

.score-info { text-align: right; }
.score { font-size: 1.1em; font-weight: bold; color: #4caf50; }
.guesses { font-size: 0.8em; color: #ccc; }

/* बॉटम नैव के लिए स्टाइल (प्रोफाइल पेज से कॉपी किया गया) */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; max-width: 420px; margin: 0 auto; display: flex; justify-content: space-around; background: #004d40; padding: 10px 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.3); }
.bottom-nav-item { color: #ccc; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0.8em; }
.bottom-nav-item.active { color: white; }
.bottom-nav-item i { font-size: 1.5em; }




.previous-winners-section {
    margin-bottom: 30px;
    text-align: center;
}
.previous-winners-section h3 {
    color: #ffd700;
    font-size: 1.3em;
    margin-bottom: 20px;
}

.winners-grid {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* ताकि वे नीचे से अलाइन हों */
    gap: 15px;
}

.winner-card {
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
    width: 100px;
}

.winner-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.winner-card .name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.winner-card .rank-badge {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 5px;
}

/* रैंक के अनुसार अलग-अलग स्टाइल */
.winner-card.rank-1 {
    transform: scale(1.1); /* रैंक 1 को बड़ा दिखाएं */
    border: 2px solid #ffd700;
}
.winner-card.rank-1 .rank-badge { color: #ffd700; }
.winner-card.rank-1 img { border: 3px solid #ffd700; }

.winner-card.rank-2 { border: 2px solid #c0c0c0; }
.winner-card.rank-2 .rank-badge { color: #c0c0c0; }
.winner-card.rank-2 img { border: 2px solid #c0c0c0; }

.winner-card.rank-3 { border: 2px solid #cd7f32; }
.winner-card.rank-3 .rank-badge { color: #cd7f32; }
.winner-card.rank-3 img { border: 2px solid #cd7f32; }