/* PvP — o desafio (docs/specs/ui-gameplay-janelas.md §17). Dois estados no mesmo 440 × 258 de arte: FORA (a promessa e o
   Participar) e DENTRO (a pontuação, o cartão do adversário, o Lutar e o histórico). Quem rola é a lista, nunca a janela; linha
   e botão de 24 (a régua do Correio: o dono joga no celular deitado). */

.pvp-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: calc(3 * var(--px));
}

/* --- rank --- a fileira do cabeçalho centra o grupo da pontuação e a porta do Ranking; dentro do grupo, a faixa, a pontuação e
   a posição dividem a MESMA linha de base. */
.pvp-head {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  min-height: calc(24 * var(--px));
}

.pvp-standing {
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--px));
  min-width: 0;
  white-space: nowrap;
}

.pvp-tier {
  font-size: calc(10 * var(--px));
}

/* Posicionamento: a faixa aparece igual (ela EXISTE — é projeção do Elo), só apagada. A frase ao lado diz o que acontece. */
.pvp-tier.is-placing {
  opacity: 0.75;
  font-style: italic;
}

.pvp-rating {
  font-size: calc(10 * var(--px));
}

/* "Defende: Kil" — apagado, com a regra no gesto (a pista tem a largura do texto, G4) */
.pvp-defender {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: fit-content;
}

/* --- rank --- a porta do quadro PvP do Ranking mora na ponta direita do cabeçalho (docs/specs/rankings.md §7.9). */
.pvp-rank {
  margin-left: auto;
  flex: 0 0 auto;
}

/* ---- FORA ------------------------------------------------------------------------------------------------------------ */
.pvp-out-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: calc(4 * var(--px));
}

.pvp-promises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--px));
}

/* a regra mora no gesto do texto: a frase é o alvo do toque, 24 de altura (W9.1, a régua do Correio) */
.pvp-promise {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  min-height: calc(24 * var(--px));
}

.pvp-promise-icon {
  flex: none;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.pvp-promise-text {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: calc(24 * var(--px));
}

.pvp-actions {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(4 * var(--px));
}

/* o selo do nível que falta (`widgets/reqSeal.js`, `[cadeado] Nv 20`) ao lado do botão travado; vazio, some */
.pvp-lock {
  display: inline-flex;
  align-items: center;
}

.pvp-lock:empty {
  display: none;
}

/* ---- DENTRO ---------------------------------------------------------------------------------------------------------- */
.pvp-in-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: calc(3 * var(--px));
}

.pvp-duel {
  display: flex;
  align-items: stretch;
  gap: calc(6 * var(--px));
}

/* o cartão Adversário: moldura de 1 px, o título apagado, o nome e a régua do Ranking embaixo */
.pvp-foe {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  padding: calc(3 * var(--px)) calc(4 * var(--px));
  box-shadow: inset 0 0 0 var(--px) rgba(255, 255, 255, 0.18);
}

.pvp-foe-line {
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--px));
  min-width: 0;
  white-space: nowrap;
}

.pvp-foe-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvp-foe-none,
.pvp-foe-gap {
  margin: 0;
}

.pvp-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: calc(3 * var(--px));
}

.pvp-fight-row {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
}

#pvp-fight {
  min-height: calc(24 * var(--px));
}

.pvp-away {
  margin: 0;
}

.pvp-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--px));
}

.pvp-empty {
  margin: 0;
}

/* a linha: nome · [Defesa] · resultado · pontos · há 2 h · [Assistir] — GRADE de colunas fixas: toda linha tem as 6 peças (o
   papel e o Assistir vazios reservam o lugar), e a trilha fixa não cresce com o conteúdo — com flex, o [Assistir] (69 de arte)
   alargava a própria linha e as colunas dançavam entre a linha com receita e a sem (prova N1 de 2026-10-07). */
.pvp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(40 * var(--px)) calc(40 * var(--px)) calc(34 * var(--px)) calc(46 * var(--px)) calc(72 * var(--px));
  align-items: center;
  column-gap: calc(4 * var(--px));
  min-height: calc(24 * var(--px));
  padding: 0 calc(2 * var(--px));
}

/* o nome (botão da ficha ou texto): corta com reticências; o alvo continua com 24 de altura (`.pvp-link`) */
.pvp-row .pvp-row-name {
  display: block;
  justify-self: start;
  max-width: 100%;
  min-width: calc(24 * var(--px));
  line-height: calc(24 * var(--px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.pvp-row-role {
  display: flex;
}

.pvp-row-delta,
.pvp-row-unrated {
  text-align: right;
  white-space: nowrap;
}

.pvp-row-outcome,
.pvp-row-ago {
  white-space: nowrap;
}

.pvp-row-watch {
  justify-self: end;
}

.pvp-row-watch.is-empty {
  display: inline-block;
  height: calc(1 * var(--px));
}

.pvp-more {
  align-self: center;
  flex: none;
}

/* G2 — selo de estado: moldura + palavra curta + cor (o molde `.mail-seal`). Apagado = a defesa e o par que vale 0. */
.pvp-seal {
  flex: none;
  display: inline-block;
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid currentColor;
  line-height: calc(8 * var(--px));
  white-space: nowrap;
  width: fit-content;
}

.pvp-seal.is-dim {
  color: var(--c-text-dim);
}

/* o alvo do gesto em volta do selo `0 ponto` do Adversário: 24 × 24 no mínimo (o selo tem 10 de arte; W9.1), o selo no meio —
   a linha já tem 24 (o nome é `.pvp-link`), então nada cresce */
.pvp-seal-hit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(24 * var(--px));
  min-width: calc(24 * var(--px));
}

/* o NOME é o botão da ficha (T9): sem moldura, o texto de sempre (o molde do `.rank-link`); o sublinhado no foco e no mouse diz
   que abre. Alvo de 24 × 24 no mínimo (o nome curto, "Ivo", também: W9.1) — a linha já tem 24. */
.pvp-link {
  display: inline-flex;
  align-items: center;
  min-height: calc(24 * var(--px));
  min-width: calc(24 * var(--px));
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.pvp-link:hover,
.pvp-link:focus-visible {
  text-decoration: underline;
}

/* Vitória, derrota e empate: a cor é só reforço — o texto já diz qual foi. */
.pvp-row.is-win .pvp-row-outcome,
.pvp-row.is-win .pvp-row-delta {
  color: var(--c-ok);
}

.pvp-row.is-loss .pvp-row-outcome,
.pvp-row.is-loss .pvp-row-delta {
  color: var(--c-danger);
}

.pvp-ask-body p {
  margin: 0 0 calc(3 * var(--px));
}

/* sem uso desde que a lista dos 100 saiu desta janela (--- rank ---); fica como a régua que `windows.css › .ctx-menu-sep` cita */
.pvp-sep {
  height: calc(1 * var(--px));
  background: rgba(255, 255, 255, 0.18);
  margin: calc(2 * var(--px)) 0;
}