/* Tela do replay (docs/specs/replay.md): placar em cima, controles embaixo, a cena no meio (palco de 640 × 360). */
.replay-side { position: absolute; top: calc(4 * var(--px)); width: calc(150 * var(--px)); }
.replay-side-1 { left: calc(4 * var(--px)); }
.replay-side-2 { right: calc(4 * var(--px)); }
.replay-side .hud-panel-body { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.replay-side-name { display: flex; justify-content: space-between; gap: calc(4 * var(--px)); }
.replay-title { position: absolute; top: calc(8 * var(--px)); left: 50%; transform: translateX(-50%); text-shadow: var(--hud-outline); }
.replay-result { position: absolute; top: calc(48 * var(--px)); left: 50%; transform: translateX(-50%); padding: calc(4 * var(--px)) calc(8 * var(--px)); }
.replay-controls { position: absolute; bottom: calc(14 * var(--px)); left: calc(4 * var(--px)); right: calc(4 * var(--px)); display: flex; align-items: center; gap: calc(3 * var(--px)); }
.replay-range { flex: 1; min-width: 0; }
.replay-clock { min-width: calc(56 * var(--px)); text-align: center; }
.replay-controls .btn.is-active { filter: brightness(1.25); }
.replay-keys { position: absolute; bottom: calc(2 * var(--px)); left: 50%; transform: translateX(-50%); text-shadow: var(--hud-outline); }
.replay-hud .hidden { display: none; }
/* Título e dica sobre faixa de painel: texto escuro direto sobre o cenário tinha contraste baixo. O botão Reproduzir/
   Pausar tem largura fixa (a do rótulo mais longo): ao alternar ele mudava de largura e empurrava a barra de tempo. */
.replay-title, .replay-keys { background: rgba(10, 8, 14, 0.78); padding: calc(1 * var(--px)) calc(4 * var(--px)); line-height: calc(10 * var(--px)); white-space: nowrap; }
#replay-play { flex: none; min-width: calc(64 * var(--px)); justify-content: center; }
/* A linha das teclas ("Espaço pausa · ← → 5 s · Esc sai") só onde há teclado: no celular (toque sem hover) ela ensinava
   atalhos que não existem — os botões da barra fazem o mesmo (revisão do duelo, 2026-10-01). */
@media (hover: none) and (pointer: coarse) {
  .replay-keys { display: none; }
}

/* --- guerra --- O replay da guerra (docs/specs/replay.md "O replay da guerra"). A FILEIRA DE RETRATOS sob o painel de cada
   lado de jogadores: até 10 brasões `ico_class_<key>` 12×12 na ordem de entrada, o número da placa embaixo (13 × 10 + 9 de
   vão + 2 de borda = 141 ≤ os 150 do painel), quem caiu apagado (o estado por extenso está no gesto e no aria; a cor nunca
   vem sozinha). O lado do chefe não tem fileira: o nome e o selo `Nv N` no painel. */
.replay-roster { display: flex; gap: var(--px); margin-top: var(--px); padding: var(--px); width: max-content; background: rgba(10, 8, 14, 0.62); }
.replay-side-2 .replay-roster { margin-left: auto; }
.replay-fighter { display: flex; flex-direction: column; align-items: center; width: calc(13 * var(--px)); cursor: default; }
.replay-fighter:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: 0; }
.replay-crest { width: calc(12 * var(--px)); height: calc(12 * var(--px)); background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; }
.replay-slot { line-height: calc(8 * var(--px)); text-shadow: var(--hud-outline); }
.replay-fighter.is-fallen { opacity: 0.38; filter: grayscale(1); }
/* --- guerra --- o brasão em FOCO: o número vira a placa acesa do palco (fundo ouro, número escuro — a mesma cor da placa) */
.replay-fighter.is-focus .replay-slot { background: var(--c-gold); color: var(--c-text-dark); text-shadow: none; padding: 0 var(--px); }
.replay-level { flex: none; }
/* Com PROFUNDIDADE (#replay.is-depth) os pés da fileira da frente pisam em groundY + 24 (y 320): a barra de controle, que
   começava em y ≈ 315, desce para 4 px do pé do palco. A linha das teclas (só onde há teclado: no toque ela já sai acima)
   sobe para baixo do título, porque o lugar dela sob a barra deixou de existir. */
.replay-hud.is-depth .replay-controls { bottom: calc(4 * var(--px)); }
.replay-hud.is-depth .replay-keys { bottom: auto; top: calc(22 * var(--px)); }
/* A pilha de avisos nascia no canto de baixo à direita (windows.css, bottom 4) e cobria o relógio e o "Sair do replay" (o
   resultado da guerra chega como aviso: olhado no replay da guerra em 2026-10-03). Ela pousa 2 px acima da barra — a barra
   tem 32 px: em bottom 14 o topo é y 314, com profundidade (bottom 4) y 324 —, pelo piso `--toast-floor` do toast.js (o
   molde da carta do mar, work.css). */
#ui-root:has(#replay) .toast-stack:not(.is-explore) { bottom: calc(48 * var(--px)); --toast-floor: 48; }
#ui-root:has(#replay.is-depth) .toast-stack:not(.is-explore) { bottom: calc(38 * var(--px)); --toast-floor: 38; }

/* --- desafio --- A PARTIDA RANQUEADA AO VIVO (docs/specs/ui-gameplay-janelas.md §17): o título é o nome do modo, em ouro (o molde
   do "Duelo amistoso"); no fim, o resultado do MEU lado — "Vitória +16" na cor do resultado (a palavra diz; a cor reforça), a
   pontuação em ouro, a posição e o ▲N — e o canto da barra vira Voltar + Lutar n/20 (o ouro passa ao Lutar). */
.replay-title.is-live { color: var(--c-gold); }
.replay-hud.is-live .replay-result { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--px)); min-width: calc(120 * var(--px)); }
.replay-hud.is-live .replay-result.hidden { display: none; }
.replay-live-head { font-size: var(--text-2); line-height: calc(16 * var(--px)); white-space: nowrap; }
.replay-live-head.is-win { color: var(--c-ok); }
.replay-live-head.is-loss { color: var(--c-danger); }
.replay-live-standing { display: flex; align-items: baseline; gap: calc(4 * var(--px)); white-space: nowrap; }
.replay-live-up { color: var(--c-ok); }
#replay-fight { flex: none; }
#replay-fight.hidden { display: none; }