/* ============================================
   RANKING.CSS
   Estilos relacionados a todos os rankings
   (Personagem, Pet, Guild, Duel, Wanted, etc.)
   ============================================ */

/* ============================================
   Tabelas de Ranking
   ============================================ */

/* Tabela principal de ranking */
#ranktable {
    margin: 0 auto;
}

/* Tabela interna de ranking */
.innerrank {
    width: 100%;
    border-collapse: collapse;
}

.innerrank th {
    text-align: left;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    padding: 5px;
    border: 1px solid #2c3545;
}

.innerrank td {
    border: 1px solid #2c3545;
    padding: 5px;
    text-align: center;
    color: #c8ddf1;
}

.innerrank tr {
    line-height: 30px;
}

/* Linhas de ranking com cursor pointer */
.innerrank tr[onclick] {
    cursor: pointer;
}

.innerrank tr[onclick]:hover {
    background-color: rgba(133, 216, 255, 0.1);
}

/* ============================================
   Top Players
   ============================================ */

.top-player {
    padding: 10px 0px;
    border-bottom: 1px solid rgba(133, 216, 255, 0.06);
}

.top-player .number {
    border: 1px solid #2e394a;
    color: #657793;
    font-weight: bold;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
}

.top-player .number.first {
    color: #ffe956;
    border: 1px solid #2e394a;
}

.top-player .number.second {
    color: #d3e3e4;
    border: 1px solid #2e394a;
}

.top-player .number.third {
    color: #8d6f46;
    border: 1px solid #2e394a;
}

.top-player .ava-img {
    width: 40px;
    text-align: center;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-player .ava-img img {
    width: 32px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #2e394a;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    object-fit: contain;
}

.top-player .cty-img {
    width: 40px;
    text-align: center;
    height: 18px;
}

.top-player .cty-img img {
    width: 24px;
    height: 18px;
    border: 1px solid #2e394a;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.top-player .nickname {
    width: 135px;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    padding: 1px 0px;
    color: #d0e3ff;
}

.top-player .kills {
    width: 40px;
    text-align: left;
    color: #74acff;
    font-size: 14px;
}

/* Container de top players */
.top-players {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 10px 0;
}

.top-players .top-player {
    width: 115px;
    text-align: center;
    color: #fff;
    background: #1b1e24;
}

.top-players .top-player .type, 
.top-players .top-player .name {
    padding: 3px;
    background: #1b1e24;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 13px;
}

.top-players .top-player .name {
    margin-top: 10px;
    color: #fff;
}

.top-players .top-player .name a {
    color: #fff;
}

.top-players .top-player .image img,
.top-players .top-player .image svg {
    background: #fff;
    width: 85px;
    height: 85px;
}

/* ============================================
   Gens Background (Ranking de Gens)
   ============================================ */

#gens-background {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    width: 530px;
    height: 185px;
    background: url(../images/ranking/bg-gens.png) no-repeat center center;
    position: relative;
    margin: 0 auto; /* Adiciona margem automática para centralizar na página */
}

#gens-background .duprian-qtd,
#gens-background .vanert-qtd {
    position: absolute;
    bottom: 20px;
    left: 120px;
    color: #bd9e7f;
    font-size: 12px;
}

#gens-background .vanert-qtd {
    left: initial;
    right: 120px;
}

/* ============================================
   Menu de Navegação de Ranking
   ============================================ */

/* Botões de menu de ranking */
.ranking-menu {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.ranking-menu .green-button.menuitem {
    transition: all 0.3s ease;
    background: url(../images/green-button.jpg) center no-repeat;
    background-size: cover;
    text-transform: uppercase;
    color: #c3eaee;
    padding: 10px 20px;
    font: 400 13.3333px Arial;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    width: 130px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ranking-menu .green-button.menuitem:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* ============================================
   Estilos de Ranking do Board
   ============================================ */



/* ============================================
   Estilos Específicos por Tipo de Ranking
   ============================================ */

/* Ranking de Personagem */
.ranking-character .innerrank th {
    width: auto;
}

.ranking-character .innerrank td {
    color: #008b00;
}

.ranking-character .innerrank td.level {
    color: #74acff;
}

/* Bandeira de nacionalidade no ranking de personagem */
.ranking-character .innerrank .cty-img,
.innerrank .cty-img {
    display: inline-block;
    width: 24px;
    height: 18px;
    vertical-align: middle;
}

.ranking-character .innerrank .cty-img img,
.innerrank .cty-img img {
    width: 24px;
    height: 18px;
    border: 1px solid #2e394a;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
    vertical-align: middle;
}

/* Ranking de Pet */
.ranking-pet .innerrank th {
    width: auto;
}

.ranking-pet .innerrank td.pet-class {
    color: #c8ddf1;
}

.ranking-pet .innerrank td.pet-level {
    color: #74acff;
}

/* Ranking de Guild */
.ranking-guild .innerrank td.guild-points {
    color: #74acff;
}

.ranking-guild .innerrank td.guild-level {
    color: #74acff;
}

/* Ranking de Duel */
.ranking-duel .innerrank td.duel-win {
    color: #74acff;
}

.ranking-duel .innerrank td.duel-lose {
    color: #74acff;
}

/* Ranking de Wanted */
.ranking-wanted .innerrank td.wanted-level {
    color: #74acff;
}

.ranking-wanted .innerrank td.wanted-points {
    color: #74acff;
}

/* ============================================
   Estilos Modernos de Ranking
   ============================================ */

/* Seção de Menu de Ranking */
.ranking-menu-section {
    text-align: center;
    margin: 20px 0;
}

.ranking-menu-section .green-button.menuitem {
    width: 95px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Seção de Informações */
.ranking-info-section {
    text-align: center;
    color: #c8ddf1;
    font-size: 14px;
    margin: 15px 0;
}

/* Seção de Atualização */
.ranking-update-section {
    text-align: center;
    color: #c8ddf1;
    font-size: 12px;
    margin-top: 20px;
}

.ranking-update-section b {
    color: #74acff;
}

/* ============================================
   Ranking de Personagem (Character)
   ============================================ */

.ranking-character-wrapper {
    width: 100%;
    margin: 20px 0;
    text-align: center;
    font-size: 0;
}

.ranking-character-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.ranking-race-container {
    width: 32%;
    display: inline-block;
    vertical-align: top;
    margin: 0 0.5%;
    background: #1a1d23;
    border-radius: 5px;
    padding: 12px;
    margin-bottom: 15px;
    box-sizing: border-box;
    font-size: 12px;
}

.ranking-race-title {
    text-align: center;
    font-size: 15px;
    color: #4ba3ff;
    margin-bottom: 8px;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 1px solid #2c323d;
}

.ranking-character-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-character-table td {
    padding: 6px 4px;
    color: #c4c9d4;
    font-size: 12px;
    border-bottom: 1px solid #242932;
}

.ranking-character-table tr[onclick]:hover td {
    background-color: #1f242d;
    cursor: pointer;
}

.ranking-character-table tr:not([onclick]) {
    opacity: 0.6;
}

.ranking-character-table tr:not([onclick]):hover td {
    background-color: transparent;
    cursor: default;
}

.ranking-character-table .rank-col {
    width: 60px;
    text-align: center;
}

.ranking-character-table .rank-col span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.ranking-character-table .name-col {
    color: #008b00;
    padding-left: 10px;
}

.ranking-character-table .level-col {
    color: #74acff;
    text-align: right;
    padding-right: 10px;
}

.ranking-character-table .cty-img {
    display: inline-block;
}

.ranking-character-table .cty-img img {
    width: 20px;
    height: 15px;
    border: 1px solid #2e394a;
    border-radius: 2px;
    vertical-align: middle;
}

/* ============================================
   Ranking de Pet
   ============================================ */

.ranking-pet-wrapper {
    width: 100%;
    margin: 20px 0;
}

.ranking-pet-container {
    width: 100%;
    background: #1a1d23;
    border-radius: 5px;
    padding: 12px;
    margin-bottom: 15px;
    box-sizing: border-box;
    font-size: 12px;
}


.ranking-pet-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-pet-table th {
    padding: 6px 4px;
    color: #4ba3ff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid #2c323d;
    text-align: left;
}

.ranking-pet-table td {
    padding: 6px 4px;
    color: #c4c9d4;
    font-size: 12px;
    border-bottom: 1px solid #242932;
}

.ranking-pet-table tr[onclick]:hover td {
    background-color: #1f242d;
    cursor: pointer;
}

.ranking-pet-table tr:not([onclick]) {
    opacity: 0.6;
}

.ranking-pet-table tr:not([onclick]):hover td {
    background-color: transparent;
    cursor: default;
}

.ranking-pet-table .rank-col {
    width: 60px;
    text-align: center;
}

.ranking-pet-table th.rank-col,
.ranking-pet-table th.icon-col,
.ranking-pet-table th.level-col,
.ranking-pet-table th.type-col {
    text-align: center;
}

.ranking-pet-table th.owner-col,
.ranking-pet-table th.name-col {
    text-align: left;
    padding-left: 10px;
}

.ranking-pet-table .icon-col {
    width: 40px;
    text-align: center;
}

.ranking-pet-table .icon-col img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.pet-icon {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.ranking-pet-table .owner-col {
    color: #008b00;
    padding-left: 10px;
}

.ranking-pet-table .name-col {
    color: #c4c9d4;
    padding-left: 10px;
}

.ranking-pet-table .level-col {
    color: #74acff;
    text-align: center;
    width: 60px;
}

.ranking-pet-table .type-col {
    color: #c8ddf1;
    text-align: center;
    width: 120px;
}

/* ============================================
   Ranking de Guild
   ============================================ */

.ranking-guild-wrapper {
    width: 100%;
    margin: 20px 0;
}

.ranking-guild-container {
    width: 100%;
    background: #1a1d23;
    border-radius: 5px;
    padding: 12px;
    margin-bottom: 15px;
    box-sizing: border-box;
    font-size: 12px;
}

.ranking-guild-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-guild-table th {
    padding: 6px 4px;
    color: #4ba3ff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid #2c323d;
    text-align: left;
}

.ranking-guild-table td {
    padding: 6px 4px;
    color: #c4c9d4;
    font-size: 12px;
    border-bottom: 1px solid #242932;
}

.ranking-guild-table tr[onclick]:hover td {
    background-color: #1f242d;
    cursor: pointer;
}

.ranking-guild-table tr:not([onclick]):hover td {
    background-color: transparent;
    cursor: default;
}

.ranking-guild-table tr:not([onclick]) {
    opacity: 0.6;
}

.ranking-guild-table .rank-col {
    width: 60px;
    text-align: center;
}

.ranking-guild-table th.rank-col,
.ranking-guild-table th.level-col {
    text-align: center;
}

.ranking-guild-table th.name-col,
.ranking-guild-table th.points-col {
    text-align: left;
    padding-left: 10px;
}

.ranking-guild-table .name-col {
    color: #04c004;
    padding-left: 10px;
}

.ranking-guild-table .points-col {
    color: #74acff;
    text-align: right;
    padding-right: 10px;
    width: 120px;
}

.ranking-guild-table .level-col {
    color: #74acff;
    text-align: center;
    width: 60px;
}

/* ============================================
   Ranking de Player Duel
   ============================================ */

.ranking-duel-wrapper {
    width: 100%;
    margin: 20px 0;
}

.ranking-duel-container {
    width: 100%;
    background: #1a1d23;
    border-radius: 5px;
    padding: 12px;
    margin-bottom: 15px;
    box-sizing: border-box;
    font-size: 12px;
}

.ranking-duel-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-duel-table th {
    padding: 6px 4px;
    color: #4ba3ff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid #2c323d;
    text-align: left;
}

.ranking-duel-table td {
    padding: 6px 4px;
    color: #c4c9d4;
    font-size: 12px;
    border-bottom: 1px solid #242932;
}

.ranking-duel-table tr[onclick]:hover td {
    background-color: #1f242d;
    cursor: pointer;
}

.ranking-duel-table tr:not([onclick]):hover td {
    background-color: transparent;
    cursor: default;
}

.ranking-duel-table tr:not([onclick]) {
    opacity: 0.6;
}

.ranking-duel-table .rank-col {
    width: 60px;
    text-align: center;
}

.ranking-duel-table th.rank-col,
.ranking-duel-table th.win-col,
.ranking-duel-table th.lose-col {
    text-align: center;
}

.ranking-duel-table th.name-col {
    text-align: left;
    padding-left: 10px;
}

.ranking-duel-table .name-col {
    color: #04c004;
    padding-left: 10px;
}

.ranking-duel-table .win-col {
    color: #74acff;
    text-align: center;
    width: 80px;
}

.ranking-duel-table .lose-col {
    color: #ff6b6b;
    text-align: center;
    width: 80px;
}

/* ============================================
   Ranking de Wanted
   ============================================ */

.ranking-wanted-wrapper {
    width: 100%;
    margin: 20px 0;
}

.ranking-wanted-container {
    width: 100%;
    background: #1a1d23;
    border-radius: 5px;
    padding: 12px;
    margin-bottom: 15px;
    box-sizing: border-box;
    font-size: 12px;
}

.ranking-wanted-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-wanted-table th {
    padding: 6px 4px;
    color: #4ba3ff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid #2c323d;
    text-align: left;
}

.ranking-wanted-table td {
    padding: 6px 4px;
    color: #c4c9d4;
    font-size: 12px;
    border-bottom: 1px solid #242932;
}

.ranking-wanted-table tr[onclick]:hover td {
    background-color: #1f242d;
    cursor: pointer;
}

.ranking-wanted-table tr:not([onclick]):hover td {
    background-color: transparent;
    cursor: default;
}

.ranking-wanted-table tr:not([onclick]) {
    opacity: 0.6;
}

.ranking-wanted-table .rank-col {
    width: 60px;
    text-align: center;
}

.ranking-wanted-table th.rank-col {
    text-align: center;
}

.ranking-wanted-table .level-col {
    color: #74acff;
    text-align: center;
    width: 80px;
}

.ranking-wanted-table th.level-col {
    text-align: center;
}

.ranking-wanted-table .name-col {
    color: #ff6b6b;
    padding-left: 10px;
}

.ranking-wanted-table .points-col {
    color: #ffd700;
    text-align: right;
    padding-right: 10px;
    width: 120px;
}

.ranking-wanted-table th.points-col {
    text-align: right;
}

/* ============================================
   Responsividade
   ============================================ */

@media (max-width: 768px) {
    .top-players {
        flex-direction: column;
        align-items: center;
    }
    
    .ranking-menu {
        flex-direction: column;
        align-items: center;
    }
    
    .ranking-menu .green-button.menuitem {
        width: 200px;
    }
    
    #gens-background {
        width: 100%;
        max-width: 530px;
    }
    
    .innerrank {
        font-size: 12px;
    }
    
    .innerrank th,
    .innerrank td {
        padding: 3px;
    }
    
    .ranking-race-container {
        width: 100%;
        margin: 0 0 15px 0;
    }
}