/* rank.css — janela do Ranking (js/ui/windows/rank.js; docs/specs/rankings.md §7), 592 × 276 em [24, 40], sem rodapé.
   Medidas em px de arte: calc(N * var(--px)). Corpo 580 × 246 = trilho 104 · 4 · lista 228 · 4 · ficha 240.
     trilho  um botão de 104 × 36 por quadro, vão 4 (seis = 236): ícone 16 em x 6, nome 8 px em x 26
     lista   filtro e pager na linha de 18 (y 0) · a área de 228 × 184 em y 20 (pódio 64 + 7 linhas de 16 na página 0;
             10 linhas nas outras) · a linha Você de 228 × 40 em y 206 (duas linhas de 18)
     ficha   a do jogador (placa 0–13 · classe 16–27 · título/clã/presença 30–45 · faixa 58–245), a do clã (234 no pior
             caso), a do grupo (186) ou o vazio que ensina
   A MESMA conta em k = 1 (celular deitado) e k = 2 (1280 × 720). Nenhuma caixa rola (scrollFade.test.js): o que não cabe
   foi medido para caber (`client/tests/ui/rankLean.test.js`, Courier New: 4,80 px por letra a 8 px, 4,20 a 7 px).
   Texto: nomes 8 px; fichas e linhas secundárias 7 px. */

.rank-layout {
  display: grid;
  grid-template-columns: calc(104 * var(--px)) calc(228 * var(--px)) calc(240 * var(--px));
  column-gap: calc(4 * var(--px));
  height: calc(246 * var(--px));
  min-height: 0;
  overflow: hidden;
}

/* ---- ícones da série (9 · 12 · 16), sempre por `background-image: var(--ui-<key>)` ------------------------------ */
.rank-ico, .rank-crest, .rank-board-ico, .rank-medal, .rank-crown, .rank-intro-ico {
  display: inline-block;
  flex: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.rank-ico { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
.rank-crest, .rank-medal { width: calc(12 * var(--px)); height: calc(12 * var(--px)); }
.rank-board-ico { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.rank-crown { width: calc(8 * var(--px)); height: calc(8 * var(--px)); }
.rank-intro-ico { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }

/* ---- trilho: a aba de 104 × 36 (a moldura de aba acesa no quadro aberto, o texto em ouro) ------------------------ */
.rank-rail { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.rank-board.tab {
  width: calc(104 * var(--px));
  height: calc(36 * var(--px));
  min-height: 0;
  justify-content: flex-start;
  gap: calc(4 * var(--px));
  padding: 0 0 0 calc(2 * var(--px));
  font-size: calc(8 * var(--px));
  line-height: calc(10 * var(--px));
  text-align: left;
}
.rank-board-name { white-space: nowrap; }
.rank-board:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
/* a PISTA da regra do quadro (G4): a aba é 9-slice, então o pontilhado vai ao NOME (o `border-bottom` da regra geral de
   base.css trocaria o aro de 4 da moldura por 1 e o miolo desceria — o mesmo conserto que o `.btn` tem lá) */
#ui-root .rank-board.has-more[data-hint] { border-bottom: calc(4 * var(--px)) solid transparent; cursor: pointer; }
#ui-root .rank-board.has-more[data-hint] > .rank-board-name { border-bottom: var(--px) dotted rgba(244, 240, 230, 0.4); margin-bottom: calc(-1 * var(--px)); }

/* ---- lista ------------------------------------------------------------------------------------------------------ */
.rank-list { position: relative; display: flex; flex-direction: column; width: calc(228 * var(--px)); height: calc(246 * var(--px)); }
.rank-bar { display: flex; align-items: center; gap: calc(4 * var(--px)); height: calc(18 * var(--px)); }

/* o filtro é um CAMPO de escolha (a moldura rebaixada dos `select` do jogo, base.css): 18 de altura, miolo de 14 — cabe o
   brasão de 12. Travado com motivo (PvP, Clãs): o mesmo botão, apagado, que recebe o ponteiro e o toque (N3). */
.rank-filter {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--px));
  height: calc(18 * var(--px));
  max-width: calc(140 * var(--px));
  padding: 0 calc(3 * var(--px));
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ui-panel_inset, url(../assets/ui/windows/panel_inset.png)) 2 / calc(2 * var(--px)) stretch;
  background-color: var(--c-field-bg);
  color: var(--c-text);
  font: inherit;
  font-size: calc(7 * var(--px));
  line-height: calc(10 * var(--px));
  white-space: nowrap;
  cursor: pointer;
  image-rendering: pixelated;
}
.rank-filter-label { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; }
.rank-caret { color: var(--c-text-dim); }
.rank-filter.is-disabled { color: var(--c-text-dim); opacity: 0.7; cursor: not-allowed; }
.rank-filter:focus-visible { outline: var(--px) solid #fff5a8; }
#ui-root .rank-filter.has-more[data-hint] { border-bottom: calc(2 * var(--px)) solid transparent; }

.rank-week { display: flex; gap: calc(2 * var(--px)); }
.rank-week-btn.btn { height: calc(18 * var(--px)); min-height: 0; padding: 0 calc(2 * var(--px)); font-size: calc(7 * var(--px)); }
.rank-week-btn.is-active { border-image-source: var(--ui-tab-active, url(../assets/ui/buttons/btn_primary.normal.png)); color: var(--c-gold); }

/* pager de 64: ‹ 16 · 1/10 · › 16, o alvo de toque estendido a 24 (::after transparente — nada de fundo no .btn) */
.rank-pager { display: flex; align-items: center; margin-left: auto; width: calc(64 * var(--px)); flex: none; }
.rank-pager-btn.btn { position: relative; width: calc(16 * var(--px)); height: calc(16 * var(--px)); min-height: 0; padding: 0; font-size: calc(8 * var(--px)); line-height: calc(8 * var(--px)); }
.rank-pager-btn.btn::after { content: ''; position: absolute; inset: calc(-8 * var(--px)); }
.rank-page { flex: 1; text-align: center; font-size: calc(7 * var(--px)); }

.rank-area { position: relative; height: calc(184 * var(--px)); margin-top: calc(2 * var(--px)); }
.rank-area.is-loading > .rank-rows, .rank-area.is-loading > .rank-podium { opacity: 0.55; }
/* o seletor aberto cobre o pódio: os rostos saem (o furo da cena atravessaria o painel) */
.rank-area.is-picking .rank-podium-face { display: none; }
.rank-status { font-size: calc(7 * var(--px)); padding: calc(4 * var(--px)) calc(2 * var(--px)); text-align: center; }

/* ---- pódio: três degraus de 76 — 2.º | 1.º | 3.º ------------------------------------------------------------------ */
.rank-podium { display: grid; grid-template-columns: repeat(3, calc(76 * var(--px))); height: calc(64 * var(--px)); }
.rank-podium-card {
  position: relative;
  grid-row: 1;
  width: calc(76 * var(--px));
  height: calc(64 * var(--px));
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.rank-podium-card.is-place-2 { grid-column: 1; }
.rank-podium-card.is-place-1 { grid-column: 2; }
.rank-podium-card.is-place-3 { grid-column: 3; }
.rank-podium-card:hover { background: rgba(255, 255, 255, 0.06); }
.rank-podium-card.is-selected { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.rank-podium-card:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
.rank-podium-face { position: absolute; left: calc(20 * var(--px)); top: calc(var(--podium-top, 0) * var(--px)); }
.rank-podium-face.is-emblem > .clan-emblem { position: absolute; left: calc(-2 * var(--px)); top: calc(-2 * var(--px)); }
.rank-podium-medal { position: absolute; left: calc(6 * var(--px)); top: calc(var(--podium-top, 0) * var(--px)); width: calc(12 * var(--px)); height: calc(12 * var(--px)); background-size: 100% 100%; image-rendering: pixelated; }
.rank-podium-medal.is-word { font-size: calc(7 * var(--px)); line-height: calc(12 * var(--px)); text-align: center; color: var(--c-gold); }
/* o pedestal vai à tela inteiro, no tamanho desenhado (9-slice de altura fixa, `rank_pedestal_N` 40 × 12/9/6) */
.rank-pedestal {
  position: absolute;
  left: calc(18 * var(--px));
  top: calc((48 - var(--pedestal-h, 6)) * var(--px));
  width: calc(40 * var(--px));
  height: calc(var(--pedestal-h, 6) * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.rank-pedestal.is-missing { background-color: var(--c-field-edge); box-shadow: inset 0 var(--px) 0 var(--c-text-dim); }
.rank-podium-name, .rank-podium-number {
  position: absolute;
  left: 0;
  width: calc(76 * var(--px));
  height: calc(8 * var(--px));
  font-size: calc(7 * var(--px));
  line-height: calc(8 * var(--px));
  white-space: nowrap;
  overflow: hidden;
}
.rank-podium-name { top: calc(48 * var(--px)); display: block; text-align: center; }
.rank-podium-card.is-first .rank-podium-name, .rank-podium-card.is-me .rank-podium-name { color: var(--c-gold); }
.rank-podium-card.is-gone .rank-podium-name { color: var(--c-text-dim); }
.rank-podium-number { top: calc(56 * var(--px)); display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--px)); overflow: visible; }

/* ---- linhas de 16 ------------------------------------------------------------------------------------------------ */
.rank-rows { display: flex; flex-direction: column; }
.rank-row {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  width: calc(228 * var(--px));
  height: calc(16 * var(--px));
  padding: 0 calc(2 * var(--px));
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: calc(8 * var(--px));
  text-align: left;
  cursor: pointer;
}
.rank-row:hover { background: rgba(255, 255, 255, 0.06); }
.rank-row.is-selected { background: rgba(224, 176, 64, 0.14); outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.rank-row.is-me .rank-name > bdi { color: var(--c-gold); }
.rank-row:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
.rank-row.is-gone { cursor: not-allowed; }
.rank-pos { flex: 0 0 calc(16 * var(--px)); display: inline-flex; align-items: center; justify-content: center; font-size: calc(7 * var(--px)); color: var(--c-text-dim); }
.rank-mark { flex: none; display: inline-flex; align-items: center; }
.rank-row-emblem { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
/* o nome é inteiro no pior caso medido (rankLean.test.js); a reticência é só a rede de quem foge da medida */
.rank-name { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: calc(3 * var(--px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-name > bdi { line-height: calc(10 * var(--px)); }
/* --- name-style --- o respiro do nome estilizado (docs/specs/player-identity.md §4.5; rankings.md §7.4): o Brilho e o Contorno
   saem até 2 px da letra (e o Itálico pende 1 px) e a caixa da reticência os cortava rente (medido na N1 de 2026-10-06: 0 px à
   esquerda). Padding e margem negativa iguais: a caixa de corte cresce 2 px, a letra não anda e a medida da linha não muda. */
.rank-name:has(> [data-ns-fx], > [data-ns-font="italic"]) { padding: 2px; margin: -2px; }
.rank-podium-name:is([data-ns-fx], [data-ns-font="italic"]) { padding: 2px; margin: -2px; width: calc(76 * var(--px) + 4px); height: calc(8 * var(--px) + 4px); }
.rank-tag { font-size: calc(7 * var(--px)); }
.rank-chips { flex: none; display: inline-flex; align-items: center; gap: calc(3 * var(--px)); margin-left: auto; }
.rank-chip { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); font-size: calc(7 * var(--px)); white-space: nowrap; }
.rank-chip.is-dim { color: var(--c-text-dim); }
.rank-chip.is-gold { color: var(--c-gold); }
.rank-chip[data-chip='power'] > span:last-child, .rank-chip[data-chip='clanPower'] > span:last-child { color: var(--c-gold); }

/* ---- a linha Você (228 × 40 em y 206): duas linhas de 18 --------------------------------------------------------- */
.rank-me { display: flex; flex-direction: column; gap: calc(4 * var(--px)); height: calc(40 * var(--px)); margin-top: calc(2 * var(--px)); }
.rank-me-line, .rank-rival {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  width: calc(228 * var(--px));
  height: calc(18 * var(--px));
  padding: 0 calc(4 * var(--px));
  border: var(--px) solid rgba(244, 240, 230, 0.14);
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  font: inherit;
  font-size: calc(7 * var(--px));
  text-align: left;
  white-space: nowrap;
}
button.rank-me-line, button.rank-rival { cursor: pointer; }
button.rank-me-line:hover, button.rank-rival:hover { background: rgba(255, 255, 255, 0.08); }
button.rank-me-line:focus-visible, button.rank-rival:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
.rank-rival.is-first { border-color: transparent; background: none; }
.rank-me-tag { color: var(--c-gold); font-size: calc(8 * var(--px)); font-weight: bold; }
.rank-me-fact { min-width: 0; }
.rank-me-line > .rank-door { margin-left: auto; }
.rank-door.btn { min-height: 0; height: calc(16 * var(--px)); font-size: calc(7 * var(--px)); padding: 0 calc(2 * var(--px)); }
.rank-sep { flex: none; }
.rank-gap { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); }
.rank-gap-value { color: var(--c-gold); }
/* a pista da linha (a idade do retrato dos Clãs) marca a PALAVRA "Seu clã", não a linha inteira (G4) */
#ui-root .rank-me-line.has-more[data-hint] { border-bottom: var(--px) solid rgba(244, 240, 230, 0.14); }
#ui-root .rank-me-line.has-more[data-hint] > .rank-me-tag { border-bottom: var(--px) dotted rgba(244, 240, 230, 0.4); margin-bottom: calc(-1 * var(--px)); }

/* ---- o seletor de classe: 228 × 118 em y 20, por cima da área ------------------------------------------------------ */
.rank-picker {
  position: absolute;
  left: 0;
  top: calc(20 * var(--px));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  width: calc(228 * var(--px));
  height: calc(118 * var(--px));
  padding: calc(3 * var(--px));
  background: var(--c-field-pop);
  box-shadow: 0 0 0 var(--px) var(--c-gold), 0 calc(2 * var(--px)) 0 calc(2 * var(--px)) rgba(0, 0, 0, 0.5);
}
.rank-pick-cols { display: grid; grid-template-columns: repeat(3, calc(74 * var(--px))); }
.rank-pick-col { display: flex; flex-direction: column; }
.rank-pick-head { height: calc(10 * var(--px)); line-height: calc(10 * var(--px)); font-size: calc(7 * var(--px)); padding-left: calc(2 * var(--px)); text-transform: uppercase; }
.rank-pick {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  height: calc(16 * var(--px));
  padding: 0 calc(2 * var(--px));
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: calc(7 * var(--px));
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.rank-pick:hover { background: rgba(255, 255, 255, 0.08); }
.rank-pick.is-current { color: var(--c-gold); background: rgba(224, 176, 64, 0.14); }
.rank-pick:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
.rank-pick.is-all { width: 100%; }

/* ---- a coluna da ficha (240 × 246) ------------------------------------------------------------------------------- */
.rank-card { position: relative; width: calc(240 * var(--px)); height: calc(246 * var(--px)); }
.rank-back {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: calc(16 * var(--px));
  height: calc(14 * var(--px));
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-gold);
  font: inherit;
  font-size: calc(8 * var(--px));
  cursor: pointer;
}
.rank-back:focus-visible { outline: var(--px) solid #fff5a8; }
#rank-card-status { position: absolute; left: 0; right: 0; top: calc(20 * var(--px)); }

/* a ficha do jogador: a do Inspecionar (`.inspect-card`, css/inspect.css), com a geometria desta coluna (§7.6):
   cabeçalho 46 (placa 14 · 2 · classe 12 · 2 · título/clã/presença 16), vão 12, a faixa de 188 */
.rank-card .inspect-body { height: calc(246 * var(--px)); gap: calc(12 * var(--px)); justify-content: flex-start; }
.rank-card .inspect-head { height: calc(46 * var(--px)); justify-content: flex-start; gap: calc(2 * var(--px)); }
.rank-card-idrow { display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--px)); height: calc(16 * var(--px)); max-width: calc(240 * var(--px)); font-size: calc(7 * var(--px)); white-space: nowrap; }
.rank-card .inspect-title { align-self: center; flex: none; height: calc(16 * var(--px)); min-height: 0; padding: 0 calc(4 * var(--px)); line-height: calc(8 * var(--px)); white-space: nowrap; }
.rank-card .inspect-title:not(.has-frame) { line-height: calc(16 * var(--px)); }
.rank-card .inspect-clan { flex: 0 1 auto; min-width: 0; }
/* a presença é só o disco ou a argola; "há N" no gesto (rank2-presenca) */
.rank-card .inspect-seen { display: none; }

/* ---- as fichas de clã e de grupo ----------------------------------------------------------------------------------- */
.rank-clan-card, .rank-warband-card { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--px)); width: calc(240 * var(--px)); height: calc(246 * var(--px)); font-size: calc(7 * var(--px)); }
.rank-plate { flex: none; gap: calc(4 * var(--px)); }
.rank-plate > .inspect-name { max-width: calc(196 * var(--px)); }
.rank-clan-line, .rank-wb-stats, .rank-wb-numbers { display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--px)); height: calc(16 * var(--px)); white-space: nowrap; }
.rank-wb-stats, .rank-wb-numbers { height: calc(12 * var(--px)); }
.rank-leader { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); }
.rank-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.rank-link:hover > bdi, .rank-link:focus-visible > bdi { color: var(--c-gold); }
.rank-link:focus-visible { outline: var(--px) solid #fff5a8; }
/* selo de estado (G2: moldura + palavra): o aro é sombra, para a pista pontilhada não trocar a moldura */
.rank-seal { padding: 0 calc(3 * var(--px)); color: var(--c-gold); font-size: calc(7 * var(--px)); line-height: calc(10 * var(--px)); box-shadow: inset 0 0 0 var(--px) rgba(224, 176, 64, 0.6); }
/* as ilhas pelo NOME, em até duas linhas de 12; nome próprio quebra a linha, nunca se corta */
.rank-clan-islands { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: calc(3 * var(--px)); max-width: calc(236 * var(--px)); max-height: calc(24 * var(--px)); line-height: calc(12 * var(--px)); overflow: hidden; }
.rank-islands-lead { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); white-space: nowrap; }
.rank-island { white-space: nowrap; line-height: calc(12 * var(--px)); }
.rank-island.is-disabled { color: var(--c-text-dim); cursor: not-allowed; }
.rank-card-head { height: calc(12 * var(--px)); line-height: calc(12 * var(--px)); font-size: calc(7 * var(--px)); }
.rank-members { display: flex; flex-direction: column; width: calc(240 * var(--px)); }
.rank-member {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  width: 100%;
  height: calc(16 * var(--px));
  padding: 0 calc(4 * var(--px));
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: calc(7 * var(--px));
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.rank-member:hover { background: rgba(255, 255, 255, 0.06); }
.rank-member:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
.rank-member-name { font-size: calc(8 * var(--px)); }
.rank-member.is-me .rank-member-name { color: var(--c-gold); }
.rank-more { height: calc(12 * var(--px)); line-height: calc(12 * var(--px)); text-align: center; }

/* ---- o vazio que ensina: o quadro inteiro na coluna da ficha ---------------------------------------------------------- */
.rank-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--px)); height: calc(246 * var(--px)); text-align: center; }
.rank-intro-name { font-size: calc(10 * var(--px)); font-weight: bold; color: var(--c-gold); }
.rank-intro-rule { max-width: calc(200 * var(--px)); margin: 0; font-size: calc(7 * var(--px)); line-height: calc(10 * var(--px)); }