/*

Theme Name: OceanWP Child

Theme URI: https://oceanwp.org/

Template: oceanwp

Author: OceanWP

Author URI: https://oceanwp.org/about-oceanwp/

Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/

Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready

Version: 3.4.3.1689097842

Updated: 2023-07-11 14:50:42



/* No seu arquivo style.css do tema filho */
/* --- ESTILO RANKING (ATUALIZADO) --- */

/* --- ESTILO RANKING (VERSÃO LARGE) --- */

.ranking-wrapper {
    background-color: #2a5b4a;
    padding: 25px; /* Mais espaço interno */
    border-radius: 15px;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Sombra para dar profundidade */
}

.ranking-title {
    color: #F2C94C;
    font-size: 34px; /* Título bem grande */
    font-weight: 900; /* Extra negrito */
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0px #000000;
}

.ranking-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0 15px; /* Mais espaço entre as linhas */
}

/* Cabeçalho */
.ranking-table thead th {
    color: #A3D9B1;
    text-align: left;
    padding: 0 20px 15px 20px;
    text-transform: uppercase;
    font-size: 18px; /* Cabeçalho maior */
    font-weight: 700;
    letter-spacing: 1.5px;
    border-bottom: 2px solid rgba(163, 217, 177, 0.3);
}
.ranking-table thead th:last-child {
    text-align: right;
}

/* Linhas do Corpo */
.ranking-table tbody tr {
    background-color: rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
    border-radius: 10px; /* Bordas arredondadas nas linhas */
}

/* Células Gerais */
.ranking-table tbody td {
    padding: 25px 20px; /* Células bem gordas */
    color: #FFF;
    font-size: 24px; /* Tamanho base do nome (Letras maiores) */
    vertical-align: middle;
    line-height: 1.2;
}

/* Coluna da Posição (#) */
.ranking-table tbody td:first-child {
    color: #F2C94C;
    font-weight: 900;
    font-size: 40px; /* NÚMEROS GIGANTES para a posição */
    width: 80px;
    text-align: center;
    border-radius: 10px 0 0 10px;
}

/* Coluna da Pontuação */
.ranking-table tbody td:last-child {
    text-align: right;
    font-weight: 800;
    color: #A3D9B1;
    font-size: 32px; /* Pontuação grande */
    border-radius: 0 10px 10px 0;
}

/* --- DESTAQUE DO USUÁRIO (VOCÊ) --- */
.ranking-table tbody tr.current-user {
    background-color: #4A9A6A !important;
    box-shadow: 0 0 0 3px #F2C94C; /* Borda dourada mais grossa */
    transform: scale(1.03); /* Aumenta um pouco mais a linha */
    z-index: 100;
    position: relative;
}

.ranking-table tbody tr.current-user td {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Leve sombra no texto para leitura */
}

/* Ajuste específico para os ícones (Medalhas) ficarem maiores que o texto */
/* Como as medalhas são emojis no texto, elas seguem o font-size da célula. 
   Com font-size 24px no nome, a medalha já ficará grande. */

.voce-tag {
    font-size: 14px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.2);
    padding: 4px 8px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 10px;
}

/* --- CORREÇÃO MOBILE (Adicione ao final do arquivo) --- */
@media screen and (max-width: 768px) {

    /* 1. Ajuste do Container Principal */
    .ranking-wrapper {
        padding: 15px; /* Reduz o espaçamento da borda */
        width: 100%;
        box-sizing: border-box; /* Garante que o padding não aumente a largura total */
        overflow-x: hidden; /* Evita rolagem horizontal indesejada */
    }

    /* 2. Título Menor */
    .ranking-title {
        font-size: 22px; /* De 34px para 22px */
        margin-bottom: 20px;
        letter-spacing: 1px;
    }

    /* 3. Tabela mais compacta */
    .ranking-table {
        border-spacing: 0 8px; /* Menos espaço entre as linhas */
    }

    /* 4. Cabeçalho (Header) */
    .ranking-table thead th {
        font-size: 12px; /* De 18px para 12px */
        padding: 0 5px 10px 5px; /* Padding lateral reduzido */
        letter-spacing: 0.5px;
    }

    /* 5. Células do Corpo (Geral) */
    .ranking-table tbody td {
        padding: 15px 10px; /* Reduz drasticamente o "gordo" da célula */
        font-size: 14px; /* Nome do usuário menor */
    }

    /* 6. Coluna da Posição (#) */
    .ranking-table tbody td:first-child {
        font-size: 24px; /* De 40px para 24px */
        width: 40px; /* Largura fixa menor */
        padding-left: 10px;
    }

    /* 7. Coluna da Pontuação */
    .ranking-table tbody td:last-child {
        font-size: 18px; /* De 32px para 18px */
        padding-right: 10px;
    }

    /* 8. Ajuste da linha do Usuário Ativo (VOCÊ) */
    .ranking-table tbody tr.current-user {
        transform: scale(1.0); /* Remove o zoom que estoura a tela no mobile */
        box-shadow: 0 0 0 2px #F2C94C; /* Borda um pouco mais fina */
    }
    
    /* 9. Tag "(VOCÊ)" */
    .voce-tag {
        display: block; /* Joga para a linha de baixo para economizar largura */
        width: fit-content;
        font-size: 10px;
        margin-top: 4px;
        margin-left: 0;
    }
    
    /* 10. Correção de contraste para linhas normais (fundo cinza) */
    .ranking-table tbody tr:not(.current-user) td {
         /* Garante que o texto caiba e não quebre layout */
         word-break: break-word;
    }
}