/* Ranking e "Meu nível" (servido em /recursos/ranking.css). */

/* ranking */
.ranking .linha { gap: 10px; }
.posicao { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; font-weight: 900; background: rgba(255, 255, 255, .06); }
.podio.p1 .posicao { background: linear-gradient(135deg, #ffd23f, #ff9f1c); color: #1a1400; }
.podio.p2 .posicao { background: linear-gradient(135deg, #e8eef8, #9aa3c7); color: #1a1400; }
.podio.p3 .posicao { background: linear-gradient(135deg, #e0a36b, #a0613a); color: #1a1400; }
.numeros { display: grid; text-align: center; min-width: 54px; }
.numeros b { font-variant-numeric: tabular-nums; }
.numeros small { color: var(--suave); font-size: .68rem; }
@media (max-width: 520px) { .ranking .numeros:nth-of-type(4), .ranking .numeros:nth-of-type(5) { display: none; } }

/* meu nível */
.nivel { margin: 14px 0 6px; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--borda); }
.nivel-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.nivel-topo small { display: block; color: var(--suave); }
.nivel-numero { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: 1.3rem; color: #1a1400; background: linear-gradient(135deg, var(--amarelo), var(--laranja)); }
.barra-nivel span { width: 0; }
.barra-nivel .p5 { width: 5%; } .barra-nivel .p10 { width: 10%; } .barra-nivel .p15 { width: 15%; } .barra-nivel .p20 { width: 20%; }
.barra-nivel .p25 { width: 25%; } .barra-nivel .p30 { width: 30%; } .barra-nivel .p35 { width: 35%; } .barra-nivel .p40 { width: 40%; }
.barra-nivel .p45 { width: 45%; } .barra-nivel .p50 { width: 50%; } .barra-nivel .p55 { width: 55%; } .barra-nivel .p60 { width: 60%; }
.barra-nivel .p65 { width: 65%; } .barra-nivel .p70 { width: 70%; } .barra-nivel .p75 { width: 75%; } .barra-nivel .p80 { width: 80%; }
.barra-nivel .p85 { width: 85%; } .barra-nivel .p90 { width: 90%; } .barra-nivel .p95 { width: 95%; } .barra-nivel .p100 { width: 100%; }

/* tags do pódio (as mesmas cores do nick no lobby) */
.tag-rank { font-size: .78rem; font-weight: 900; letter-spacing: .02em; }
.tag-rank.t1 { color: #ffd700; }
.tag-rank.t2 { color: #c0c0c0; }
.tag-rank.t3 { color: #cd7f32; }
.tag-rank.tm { color: #7fd4ff; }

/* hall da fama */
.anos { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.anos a { color: var(--suave); text-decoration: none; font-weight: 700; font-size: .85rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda); }
.anos a.ativa { color: #1a1400; background: var(--amarelo); border-color: transparent; }
.hall { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.hall-mes { padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--borda); }
.hall-mes.atual { border-color: rgba(255, 210, 63, .45); }
.hall-mes h2 { margin: 0 0 8px; font-size: 1.05rem; }
.hall-mes .vazio { padding: 12px 8px; font-size: .85rem; }
.hall-categorias { display: grid; gap: 8px; }
.hall-categoria h3 { margin: 0 0 4px; font-size: .78rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.hall-categoria ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.hall-categoria li { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-categoria li small { color: var(--suave); margin-left: 4px; font-variant-numeric: tabular-nums; }
.hall-categoria li.sem { color: var(--suave); font-size: .8rem; }
.hall-categoria .lugar { display: inline-block; min-width: 26px; font-weight: 900; }
.hall-categoria .l1 .lugar { color: #ffd700; }
.hall-categoria .l2 .lugar { color: #c0c0c0; }
.hall-categoria .l3 .lugar { color: #cd7f32; }

/* minhas partidas e a página da partida */
.etiqueta.contou { color: var(--verde); background: rgba(61, 220, 151, .1); border: 1px solid rgba(61, 220, 151, .3); }
.etiqueta.nao-contou { color: var(--suave); background: rgba(255, 255, 255, .05); border: 1px solid var(--borda); }
ul.relatorio { margin: 0 0 12px; padding-left: 20px; }
ul.relatorio li { margin: 5px 0; }
.tabela-rolavel { overflow-x: auto; }
table.placar { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.placar th, table.placar td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
table.placar th { color: var(--suave); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
table.placar tr.eu td { background: rgba(255, 210, 63, .08); font-weight: 700; }