/* Ranking Page Styles */

/* Font imports and base typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Base Body Styles - Ajustado para o gradiente global do body em HTML */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Removido background-color fixo, o body do HTML cuida do gradiente */
    color: #333; /* Cor de texto padrão para o body, será sobrescrita pelos elementos com fundo transparente */
}

/* Reutiliza o quiz-main-wrapper do quiz.css para consistência de layout */
.quiz-main-wrapper {
    width: 75%;
    max-width: 75%; /* 75% da largura da viewport */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 20px; /* Adiciona um padding ao redor do conteúdo principal */
}

/* Reutiliza o quiz-header do quiz.css para consistência */
.quiz-header {
    background: rgba(255, 255, 255, 0.1); /* Transparente como o landing */
    backdrop-filter: blur(10px); /* Efeito de vidro fosco */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda suave */
    border-radius: 15px; /* Bordas arredondadas */
    color: white;
    padding: 0; /* O header-content define o padding interno */
    margin-bottom: 20px; /* Espaço abaixo do header */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Sombra mais pronunciada */
    height: auto;
    position: relative;
    transition: all 0.3s ease;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Para logo+título à esquerda e navegação à direita */
    padding: 15px 25px; /* Ajusta o padding */
    height: auto;
}

.header-left {
    display: flex; /* Para alinhar logo e título juntos */
    align-items: center;
    gap: 10px; /* Espaço entre logo e título */
}

.header-brand { /* Usado para o link que engloba logo e título */
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 1.3rem; /* Um pouco maior */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* Sombra no texto */
    transition: all 0.3s ease;
}

.header-brand:hover {
    transform: translateY(-2px);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.header-logo {
    width: 60px; /* Um pouco maior para consistência */
    height: 60px; /* Um pouco maior para consistência */
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra para o logo */
    transition: all 0.3s ease;
}

.header-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.header-title {
    font-size: 1.8rem; /* Consistente com outros títulos de header */
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    margin: 0;
}

.header-nav {
    display: flex;
    gap: 20px;
}

.nav-link {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 25px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.nav-link:hover {
    background-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.25); /* Mais destaque para o link ativo */
    font-weight: 600 !important;
}

/* Main content area - reutiliza quiz-main */
.ranking-main.quiz-main {
    padding: 0; /* Removido padding extra */
    min-height: auto;
    background: transparent;
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Para empilhar as seções */
    justify-content: flex-start;
    align-items: center; /* Centraliza horizontalmente o conteúdo principal */
    gap: 20px; /* Espaço entre as seções */
    margin-bottom: 20px;
}


/* Reutiliza quiz-content para os "cards" principais da página */
.quiz-content {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    padding: 0; /* Padding interno definido por sub-elementos */
    margin-bottom: 0; /* Removido margin-bottom aqui para o gap do quiz-main cuidar */
}

/* Seção do Título do Ranking - AGORA ESTILIZADO COMO UM CARD E COM ALTURA FIXA */
.ranking-title-section {
    text-align: center;
    padding: 15px; /* Reduzido o padding vertical para caber na altura */
    margin-bottom: 0; /* Controlado pelo gap do quiz-main */
    
    background: rgba(255, 255, 255, 0.1); /* Fundo transparente */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    
    height: 180px; /* ALTURA FIXA DEFINIDA AQUI */
    display: flex; /* Transforma em flex para centralizar o conteúdo verticalmente */
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente o conteúdo */
    align-items: center; /* Centraliza horizontalmente o conteúdo */
}

.ranking-title {
    font-size: 2.2rem; /* Reduzido para caber melhor em 120px */
    color: white !important; /* Força a cor branca do texto */
    
    /* Anula as propriedades de background-clip do base.css */
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
    background-clip: unset !important;
    
    margin-bottom: 0.5rem; /* Reduzido para caber melhor */
    font-weight: 800 !important;
    font-family: 'Inter', sans-serif !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.ranking-subtitle {
    font-size: 1.1rem; /* Reduzido para caber melhor */
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0; /* Removido para economizar espaço */
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Estados de Carregamento, Erro e Vazio - AGORA COMO CARDS */
.loading-section,
.error-section,
.empty-state {
    text-align: center;
    padding: 30px; /* Padding interno do card */
    /* Usa estilos do .quiz-content para background/border/shadow */
    color: white; /* Cor do texto padrão para o conteúdo dentro dessas seções */
    margin-top: 0; /* Controlado pelo gap do quiz-main */
    margin-bottom: 0; /* Controlado pelo gap do quiz-main */
}

.loading-section i,
.error-section i,
.empty-state i {
    font-size: 4rem; /* Ícones maiores */
    margin-bottom: 1.5rem;
    color: #ffed4e; /* Amarelo dourado para ícones de loading/empty */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

.error-section i {
    color: #ff6b6b; /* Vermelho para erro */
}

.empty-state i {
    color: #a9d4ff; /* Azul claro para empty */
}

.empty-state h3 {
    color: white;
    font-size: 1.8rem;
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

.empty-state p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}


/* Estilos da Seção do Pódio */
.podium-section {
    margin-bottom: 3rem; /* Espaço após o pódio */
    width: 100%; /* Ocupa a largura do wrapper */
}

.podium {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Alinha os itens na parte inferior */
    gap: 30px; /* Mais espaço entre os pódios */
    margin: 2rem 0; /* Espaçamento vertical */
    padding: 20px; /* Padding para o container do pódio */
}

.podium-place { 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-end; 
    height: 100%; 
    width: 100%; 
}

.podium-item-wrapper-first { order: 2; }
.podium-item-wrapper-second { order: 1; }
.podium-item-wrapper-third { order: 3; }

.podium-item {
    text-align: center;
    padding: 25px 20px; /* Padding interno ajustado */
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1); /* Fundo transparente padrão do card */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3); /* Sombra padrão do card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-width: 200px;
    color: white; /* Texto branco padrão */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 10px; /* Pequena margem superior para o item, se múltiplos na mesma posição */
    min-height: 200px; /* Altura base para todos os itens do pódio */
}

.podium-item:hover {
    transform: translateY(-8px); /* Efeito de elevação mais pronunciado */
    box-shadow: 0 12px 35px rgba(0,0,0,0.5);
}

/* Estilos Específicos dos Itens do Pódio (1º, 2º, 3º) */
.podium-item.first { 
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); /* Dourado */
    color: #333; /* Texto escuro para o ouro */
    z-index: 3;
    min-height: 280px; /* Altura maior para o 1º lugar */
    transform: translateY(-20px); /* Eleva o 1º lugar */
    border-color: rgba(255, 255, 255, 0.5);
}

.podium-item.second {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%); /* Prata */
    color: #333; /* Texto escuro para a prata */
    z-index: 2;
    min-height: 240px; /* Altura para o 2º lugar */
    transform: translateY(-10px); /* Eleva o 2º lugar */
    border-color: rgba(255, 255, 255, 0.4);
}

.podium-item.third {
    background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%); /* Bronze */
    color: white; /* Texto branco para o bronze */
    z-index: 1;
    min-height: 200px; /* Altura para o 3º lugar */
    border-color: rgba(255, 255, 255, 0.3);
}

.podium-photo-container {
    margin-bottom: 20px; /* Mais espaço abaixo da foto */
    position: relative;
}

.podium-photo {
    width: 100px; /* Foto maior no pódio */
    height: 100px; /* Foto maior no pódio */
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid rgba(255,255,255,0.9); /* Borda da foto mais grossa e clara */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.podium-name {
    font-weight: 700 !important; /* Mais negrito */
    font-size: 1.3rem; /* Nome maior */
    margin-bottom: 8px;
    color: inherit;
    font-family: 'Inter', sans-serif !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.podium-score {
    font-size: 1.4rem; /* Pontuação maior */
    font-weight: 800 !important; /* Mais negrito */
    color: inherit;
    font-family: 'Inter', sans-serif !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Badge de Posição no Pódio (e.g., "1º") */
.podium-rank-badge {
    position: absolute;
    top: -15px; /* Ajustado para melhor visualização */
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 15px; /* Padding maior */
    border-radius: 20px; /* Mais arredondado */
    font-size: 1rem; /* Tamanho da fonte maior */
    font-weight: 800; /* Mais negrito */
    color: white;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Sombra para o badge */
}

.podium-rank-badge.gold {
    background: #ffd700;
    color: #333;
}
.podium-rank-badge.silver {
    background: #c0c0c0;
    color: #333;
}
.podium-rank-badge.bronze {
    background: #cd7f32;
    color: white;
}

/* Medalha do Pódio */
.podium-medal {
    position: absolute;
    bottom: -15px; /* Posição ajustada */
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.2rem; /* Medalha maior */
    text-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Sombra mais forte */
    z-index: 5;
}
.podium-medal.gold-medal { color: #ffd700; }
.podium-medal.silver-medal { color: #c0c0c0; }
.podium-medal.bronze-medal { color: #cd7f32; }


/* Estilos de Badges Gerais (não do pódio) */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600 !important;
    text-align: center;
    color: white;
    font-family: 'Inter', sans-serif !important;
}

.badge-gold {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #333; 
}

.badge-silver {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #333; 
}

.badge-bronze {
    background: linear-gradient(135deg, #cd7f32, #daa520);
    color: white;
}

.badge-general {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

/* Estilos da Seção da Tabela do Ranking - AGORA COMO UM CARD */
.ranking-table-section {
    /* Usa estilos do .quiz-content para background/border/shadow */
    overflow: hidden; /* Para cantos arredondados da tabela */
    margin-top: 0; /* Controlado pelo gap do quiz-main */
}

.section-title {
    background: linear-gradient(135deg, #4834d4 0%, #686de0 100%); /* Gradiente azul/roxo */
    color: white;
    padding: 1.5rem;
    margin: 0;
    font-size: 1.6rem; /* Título da seção maior */
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

/* Tabela Desktop */
.desktop-table { 
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.05); /* Fundo leve para a tabela */
}

.desktop-table th {
    background: rgba(255, 255, 255, 0.1); /* Fundo um pouco mais escuro para o cabeçalho */
    padding: 18px; /* Padding maior */
    text-align: center;
    font-weight: 600 !important;
    color: white; /* Texto branco */
    border-bottom: 2px solid rgba(255, 255, 255, 0.2); /* Borda mais suave */
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.desktop-table td {
    padding: 18px; /* Padding maior */
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Borda mais suave */
    vertical-align: middle;
    font-family: 'Inter', sans-serif !important;
    color: rgba(255, 255, 255, 0.9); /* Texto mais claro */
}

.desktop-table tr:last-child td {
    border-bottom: none; 
}

.desktop-table tr:hover {
    background-color: rgba(255, 255, 255, 0.08); /* Fundo leve no hover */
}

.ranking-photo {
    width: 55px; /* Foto um pouco maior na tabela */
    height: 55px; /* Foto um pouco maior na tabela */
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.5); /* Borda mais visível */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.participant-info {
    font-weight: 600 !important; /* Mais negrito */
    color: white; /* Texto branco */
    font-family: 'Inter', sans-serif !important;
}

.score-display {
    font-weight: 800 !important; /* Pontuação mais negrita */
    font-size: 1.2rem; /* Pontuação maior */
    color: #ffed4e; /* Amarelo dourado */
    font-family: 'Inter', sans-serif !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Badges de Rank na Tabela e Cards Móveis */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px; /* Um pouco maior para caber o ícone e texto */
    padding: 6px 10px; /* Padding ajustado */
    border-radius: 20px; /* Mais arredondado */
    font-weight: 700; /* Mais negrito */
    font-size: 0.95rem; /* Fonte maior */
    gap: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.rank-badge i {
    font-size: 1.1em; /* Ícones ligeiramente maiores nos badges */
}

.rank-badge.gold {
    background: #ffd700;
    color: #333;
}
.rank-badge.silver {
    background: #c0c0c0;
    color: #333;
}
.rank-badge.bronze {
    background: #cd7f32;
    color: white;
}
.rank-badge:not(.gold):not(.silver):not(.bronze) {
    background-color: rgba(255, 255, 255, 0.2); /* Cor transparente padrão */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Cards Móveis */
.mobile-ranking {
    display: none;
    padding: 15px; 
}

.mobile-ranking-card { 
    background: rgba(255, 255, 255, 0.08); /* Fundo mais escuro para mobile cards */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 15px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    transition: transform 0.2s ease;
    display: flex; 
    align-items: center;
    gap: 15px;
    color: white; /* Cor do texto padrão para mobile cards */
}

.mobile-ranking-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.mobile-card-content {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.mobile-badge { /* Usado rank-badge para estilo, mas com overrides se necessário */
    /* Estilos herdados de .rank-badge */
    font-size: 1rem; /* Um pouco maior no mobile */
}

.mobile-photo {
    width: 55px; 
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.5); /* Borda mais visível */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.mobile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
}

.mobile-name {
    font-weight: 700; /* Mais negrito */
    font-size: 1.1rem; /* Nome maior */
    color: white; /* Texto branco */
    margin-bottom: 5px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 100%; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.mobile-stats {
    display: flex;
    gap: 15px; 
    font-size: 0.95rem; /* Stats um pouco maiores */
    color: rgba(255, 255, 255, 0.8); /* Texto mais claro */
}

.mobile-duration, .mobile-score {
    display: flex;
    align-items: center;
    gap: 5px;
}
.mobile-duration i, .mobile-score i {
    color: #ffed4e; /* Ícones em amarelo */
}

.mobile-score {
    font-weight: 700; /* Pontuação mais negrita */
    color: #ffed4e; /* Amarelo dourado */
}

/* Rodapé - Reutiliza quiz-footer */
.ranking-footer.quiz-footer {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    color: white;
    padding: 20px;
    margin-top: 3rem; /* Mantém o espaçamento com o conteúdo acima */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.ranking-footer.quiz-footer p {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Classes de Utilidade */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

/* Design Responsivo */
@media (max-width: 768px) {
    .quiz-main-wrapper { /* Ajuste do padding para mobile */
        width: 90%;
        padding: 10px;
    }

    .header-content {
        flex-direction: column;
        text-align: center;
        gap: 15px; /* Espaçamento menor em mobile */
    }
    .header-brand {
        font-size: 1.1rem; /* Ajuste para mobile */
        text-align: center;
        margin-bottom: 0;
    }
    .header-logo {
        width: 50px;
        height: 50px;
    }
    .header-title {
        font-size: 1.5rem; /* Ajuste para mobile */
    }
    .header-nav {
        justify-content: center;
        gap: 10px; /* Espaçamento menor para links de navegação */
    }
    .nav-link {
        padding: 8px 15px;
        font-size: 0.9rem;
    }

    .ranking-title {
        font-size: 2rem;
    }
    .ranking-subtitle {
        font-size: 1.1rem;
    }

    .podium {
        flex-direction: column; /* Pódio empilhado em mobile */
        align-items: center;
        gap: 20px; /* Espaço entre itens do pódio empilhados */
        padding: 10px; /* Padding menor */
    }

    .podium-item {
        min-width: auto;
        width: 100%;
        max-width: 280px; /* Largura máxima para itens do pódio mobile */
        min-height: 180px; /* Altura base para pódio mobile */
        padding: 15px;
        margin-top: 0 !important; /* Remove margin-top se for empilhado */
        transform: none !important; /* Remove transform para evitar bug visual ao empilhar */
    }
    .podium-item.first, .podium-item.second, .podium-item.third {
        order: initial; /* Reseta a ordem em mobile para a ordem natural do DOM */
        min-height: auto !important; /* Reseta altura mínima específica para pódio */
        transform: none !important; /* Reseta transform para evitar bug visual */
    }
    .podium-item.first { order: 1; } /* Força a ordem 1, 2, 3 em mobile */
    .podium-item.second { order: 2; }
    .podium-item.third { order: 3; }

    .podium-photo {
        width: 80px;
        height: 80px;
    }
    .podium-name {
        font-size: 1.2rem;
    }
    .podium-score {
        font-size: 1.3rem;
    }
    .podium-rank-badge {
        font-size: 0.9rem;
        padding: 6px 12px;
    }
    .podium-medal {
        font-size: 1.8rem;
    }


    .desktop-table {
        display: none;
    }

    .mobile-ranking {
        display: block; /* Exibe os cards móveis */
    }

    .section-title {
        font-size: 1.3rem; /* Título da seção menor */
        padding: 1rem;
    }

    .mobile-ranking-card {
        padding: 12px;
        gap: 10px;
        margin-bottom: 10px;
    }
    .mobile-photo {
        width: 45px;
        height: 45px;
    }
    .mobile-name {
        font-size: 1rem;
    }
    .mobile-stats {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .quiz-main-wrapper {
        width: 95%;
    }
    .ranking-title {
        font-size: 1.8rem;
    }
    .ranking-subtitle {
        font-size: 1rem;
    }
    .podium-item {
        max-width: 95%;
        min-height: 160px;
        padding: 12px;
    }
    .podium-photo {
        width: 70px;
        height: 70px;
    }
    .podium-name {
        font-size: 1.1rem;
    }
    .podium-score {
        font-size: 1.2rem;
    }
    .podium-rank-badge {
        font-size: 0.85rem;
        padding: 5px 10px;
    }
    .podium-medal {
        font-size: 1.6rem;
    }

    .mobile-ranking-card {
        padding: 10px;
        gap: 8px;
    }
    .mobile-photo {
        width: 40px;
        height: 40px;
    }
    .mobile-name {
        font-size: 0.95rem;
    }
    .mobile-stats {
        font-size: 0.75rem;
        gap: 10px;
    }

    .ranking-footer.quiz-footer {
        padding: 15px;
        margin-top: 2rem;
    }
}

/* Estilos para as abas de níveis */
.level-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.level-tab {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    color: white;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.level-tab:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.level-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
}

.level-tab.active:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.level-tab i {
    font-size: 1rem;
}

/* Responsividade para as abas */
@media (max-width: 768px) {
    .level-tabs {
        gap: 8px;
        margin-top: 20px;
    }
    
    .level-tab {
        padding: 10px 16px;
        font-size: 0.8rem;
        gap: 6px;
    }
    
    .level-tab i {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .level-tabs {
        gap: 6px;
        margin-top: 15px;
    }
    
    .level-tab {
        padding: 8px 12px;
        font-size: 0.75rem;
        gap: 4px;
        flex: 1;
        min-width: 0;
        justify-content: center;
    }
    
    .level-tab span {
        display: none; /* Esconde o texto em telas muito pequenas */
    }
    
    .level-tab i {
        font-size: 0.8rem;
    }
}

/* Estilos para o botão de voltar */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    color: white;
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.back-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: white;
    text-decoration: none;
}

.back-button i {
    font-size: 1rem;
}

/* Responsividade para o botão de voltar */
@media (max-width: 768px) {
    .back-button {
        padding: 8px 12px;
        font-size: 0.8rem;
        gap: 6px;
    }
    
    .back-button i {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .back-button {
        padding: 6px 10px;
        font-size: 0.75rem;
        gap: 4px;
    }
    
    .back-button i {
        font-size: 0.8rem;
    }
}