/* duel.css — o cartão do duelo amistoso (js/ui/widgets/duelPrompt.js; docs/specs/duel.md §6.2).
   Geometria em px de arte: 236 de largura, centrado no palco de 640 (left 202 — nada de transform: meio pixel borra o
   texto), no alto (top 30), acima das janelas (z 10–41), do chat aberto (45), do tooltip (50) e do menu de contexto (60)
   e ABAIXO do véu de modal (100): com um modal aberto o cartão fica inerte atrás do véu, como todo o resto.
   Alvo de toque grande (o dono joga no celular deitado): Aceitar, Recusar e Cancelar com 26 px de altura — no 844×390 o
   palco fica em 1× e os 18 de antes davam 20 px de tela (revisão de 2026-10-01). */

.duel-prompt {
  position: absolute;
  top: calc(30 * var(--px));
  left: calc(202 * var(--px));
  width: calc(236 * var(--px));
  z-index: 95;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--px));
  box-sizing: border-box;
}
.duel-prompt.hidden { display: none; }
/* Modal aberto (o resumo da corrida, uma confirmação): tudo atrás do véu fica INERTE (`modal.js › inertBehind` marca a
   camada de overlay inteira), e um cartão aceso por cima do véu seria um botão que não responde. Ele desce para trás do
   véu, como o chat (css/chat.css), e volta quando o modal fecha — a contagem continua correndo. */
#ui-root:has(.modal-backdrop) .duel-prompt { z-index: 8; }

.duel-prompt-top {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
}
.duel-prompt-face { flex: none; }
.duel-prompt-face > .portrait { pointer-events: none; }
.duel-prompt-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--px);
}
/* Três linhas de 10 + 2 vãos de 1 = 32: cabem na altura do retrato (36) e o cartão não cresce. */
.duel-prompt-name,
.duel-prompt-meta,
.duel-prompt-what { display: block; line-height: calc(10 * var(--px)); white-space: nowrap; }
/* O NOME INTEIRO, na linha dele (UX-GRAMATICA §3, "nome próprio inteiro"): é ele que decide o convite. O teto do nome
   (16 letras, `messages.json`) mede 77 px de arte e a coluna tem 130 — ele nunca encolhe nem leva reticência. Quem
   encolhe, se um dia faltar espaço, é o "Nv · classe" da linha de baixo (o `aria-label` do cartão diz tudo por extenso). */
.duel-prompt-name { color: var(--c-gold); }
.duel-prompt-meta { overflow: hidden; text-overflow: ellipsis; }
.duel-prompt-what { color: var(--c-text); }

/* --- builds --- o selo da build do PvP (`widgets/buildSeal.js`, loadouts.md §9 d) numa linha própria, à direita, embaixo do
   "Amistoso": na coluna dele o selo roubava a largura da frase "desafia você para um duelo." e a cobria (E2E de 2026-10-02).
   Escondido (sem build), a linha some inteira — nem o vão do cartão fica. */
.duel-prompt-build { display: flex; justify-content: flex-end; }
.duel-prompt-build:has(> .build-seal.hidden) { display: none; }
/* Selo de estado (UX-GRAMATICA G2): moldura + palavra curta; a regra vai no gesto (`setHint`), com a pista de base.css. */
.duel-seal {
  flex: none;
  align-self: flex-start;
  width: fit-content;
  padding: 0 calc(3 * var(--px));
  line-height: calc(10 * var(--px));
  color: var(--c-gold);
  border: var(--px) solid var(--c-gold);
}

/* Contagem regressiva: a barra que encolhe e os segundos escritos ao lado (a cor nunca vem sozinha — §8.7). */
.duel-prompt-clock {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
}
.duel-prompt-bar {
  flex: 1;
  height: calc(4 * var(--px));
  background: #12101c;
  border: var(--px) solid #575273;
  position: relative;
  overflow: hidden;
}
.duel-prompt-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: var(--c-gold);
}
.duel-prompt.is-urgent .duel-prompt-fill { background: var(--c-danger); }
.duel-prompt-secs {
  flex: none;
  min-width: calc(22 * var(--px));
  text-align: right;
  line-height: calc(10 * var(--px));
}

.duel-prompt-actions {
  display: flex;
  gap: calc(4 * var(--px));
}
.duel-prompt-actions > .btn {
  flex: 1;
  min-height: calc(26 * var(--px));
  justify-content: center;
}
/* o convite recebido: Aceitar é o maior alvo (a ação que o cartão existe para pedir) */
.duel-prompt.is-incoming #duel-accept { flex: 3; }
.duel-prompt.is-incoming #duel-decline { flex: 2; }

/* --- faixa de título do filme do duelo (a tela do replay, css/replay.css): o mesmo lugar, com a cor do convite */
.replay-title.is-duel { color: var(--c-gold); }