/* Configuração geral da tabela */
.tierlist-table {
    width: 80%;
    margin: 30px auto;
    border-collapse: collapse; /* Remove espaços duplos entre as bordas */
    background-color: #1a1a1a; /* Fundo escuro para destacar as imagens */
    font-family: 'Courier New', Courier, monospace;
}

.tierlist-titulo {
    background-color: rgb(22, 109, 196); /* Cor combinando com seu container azul */
    color: white;
    padding: 12px;
    font-size: 18px;
}

/* Estilo padrão de todas as células de rank (as letras da esquerda) */
.rank-letra {
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #000; /* Letras pretas para melhor contraste */
    border: 2px solid #111;
}

/* Cores clássicas para cada nível de Rank */
.rank-cinema { background-color: #f75353; }
.rank-muitoBom { background-color: #eb8f4e; }
.rank-bom { background-color: #f5ee6f; }
.rank-mediano { background-color: #9fff7f; }
.rank-ruim { background-color: #72fcfc; }

/* Estilo do container onde os personagens ficam */
.rank-itens {
    background-color: #262626;
    border: 2px solid #111;
    padding: 5px;
    vertical-align: middle;
}

/* Controla o tamanho exato das miniaturas dentro da lista */
.rank-itens img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    margin-right: 5px; /* Espaço entre um personagem e outro */
    border-radius: 4px;
    border: 1px solid #000;
}