/*
 * @file Aparência do overlay de streak. Compartilhado entre o overlay de
 * verdade (streak-overlay.html, dentro do OBS) e a prévia da página Streak
 * — é o que garante que a prévia mostre exatamente o que vai pro ar.
 *
 * Tudo fica sob a classe .ovls para poder conviver com o CSS do site na
 * página do painel. Nomes de classe internos (.retrato, .perks) repetem os
 * do overlay da fila de propósito: cada um vive sob o próprio prefixo.
 */
:root { --destaque: #7a9cc6; --contagem: #e6e8eb; --surv: #5b9bd5; }

.ovls {
  display: none; align-items: flex-start; gap: 20px; width: fit-content;
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  color: #e6e8eb;
  animation: ovls-entra 280ms ease-out;
  transition: opacity 320ms ease;
}
.ovls.pronto { display: flex; }
@keyframes ovls-entra {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- retrato -- */

.ovls .retrato-bloco { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* Cartaz clássico "HUD": o retrato ganha um anel duplo — o de dentro fixo, o
   de fora é um arco de luz que gira com uma faísca orbitando — e um halo que
   respira. O recorte redondo mora no .retrato (o .retrato-moldura fica com
   overflow visível pros anéis poderem sair da borda). */
.ovls, .ovls-ranking {
  --ouro: #f2c64f;
  --ovls-trofeu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E");
}
.ovls.survivor { --destaque: var(--surv); }

.ovls .retrato-moldura {
  position: relative; isolation: isolate; width: 80px; height: 80px; border-radius: 50%;
  background: #1c232c; border: 3px solid var(--destaque);
  box-shadow: 0 0 12px color-mix(in srgb, var(--destaque) 80%, transparent),
    0 0 30px color-mix(in srgb, var(--destaque) 50%, transparent), 0 6px 16px rgba(0, 0, 0, 0.6);
  animation: ovls-respira-retrato 3s ease-in-out infinite;
}
.ovls.quadrado .retrato-moldura { width: 90px; height: 118px; border-radius: 14px; }
.ovls .retrato-moldura .retrato { border-radius: 50%; overflow: hidden; }
.ovls.quadrado .retrato-moldura .retrato { border-radius: 12px; }

/* Arco de luz que gira em volta (reaproveita o --ovls-ang do layout barra). */
.ovls .retrato-moldura::before {
  content: ''; position: absolute; inset: -9px; z-index: -1; border-radius: inherit; padding: 2.5px;
  background: conic-gradient(from var(--ovls-ang), transparent 0 40%,
    color-mix(in srgb, var(--destaque) 55%, transparent) 62%, var(--destaque) 84%, #fff 96%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ovls-giro 2.8s linear infinite;
  pointer-events: none;
}
/* Faísca que orbita o anel de fora (só no retrato redondo). */
.ovls .retrato-moldura::after {
  content: ''; position: absolute; inset: -9px; z-index: 2; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 1.2px, #fff 0 2.2px, var(--destaque) 3px, color-mix(in srgb, var(--destaque) 35%, transparent) 5px, transparent 9px);
  animation: ovls-orbita 2.8s linear infinite;
}
.ovls.quadrado .retrato-moldura::after { display: none; }

@keyframes ovls-orbita { to { transform: rotate(360deg); } }
@keyframes ovls-respira-retrato {
  0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--destaque) 70%, transparent), 0 0 30px color-mix(in srgb, var(--destaque) 50%, transparent); }
  50% { box-shadow: 0 0 16px color-mix(in srgb, var(--destaque) 95%, transparent), 0 0 30px color-mix(in srgb, var(--destaque) 50%, transparent); }
}

/* Retrato clicável (só existe na prévia do painel — nunca no overlay real,
   já que o OBS não interage): ícone de câmera aparece por cima no hover,
   convite pra trocar a imagem sem precisar ir na página Imagens. */
.retrato-clicavel { cursor: pointer; }
.barra-retrato-clique { position: relative; display: inline-block; cursor: pointer; }
.retrato-clicavel-icone {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: rgba(10, 12, 14, 0.55); opacity: 0; transition: opacity 120ms ease;
  font-size: 22px; pointer-events: none;
}
.retrato-clicavel:hover .retrato-clicavel-icone,
.retrato-clicavel:focus-visible .retrato-clicavel-icone {
  opacity: 1;
}
.retrato-moldura .retrato-clicavel-icone { border-radius: inherit; }

.ovls .retrato {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 32px; font-weight: 700; color: #5c6673;
}
.ovls .retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Nome sobreposto embaixo do retrato, com degradê pra sempre ler bem
   independente da imagem por trás. */
.ovls .retrato-nome {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 10px 4px 5px; text-align: center; border-radius: 0 0 38px 38px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px var(--destaque), 0 0 20px color-mix(in srgb, var(--destaque) 60%, transparent);
}
.ovls.quadrado .retrato-nome { border-radius: 0 0 12px 12px; }
.ovls.survivor .retrato-nome {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px var(--surv), 0 0 20px color-mix(in srgb, var(--surv) 60%, transparent);
}

.ovls .perks { display: flex; gap: 5px; justify-content: center; }
.ovls .perks img {
  width: 25px; height: 25px; border-radius: 6px; object-fit: cover; display: block;
  border: 1px solid color-mix(in srgb, var(--destaque) 50%, transparent); background: #1c232c;
}
.ovls.survivor .perks img { border-color: color-mix(in srgb, var(--surv) 50%, transparent); }
.ovls.quadrado .perks img { border-radius: 5px; }

/* Tamanho das perks — "médio" (25px acima) é o padrão. */
.ovls.perks-pequeno .perks { gap: 4px; }
.ovls.perks-pequeno .perks img { width: 19px; height: 19px; border-radius: 5px; }
.ovls.perks-grande .perks { gap: 6px; }
.ovls.perks-grande .perks img { width: 33px; height: 33px; border-radius: 7px; }

/* ---------------------------------------------------------------- placar -- */
/* Cada número vive numa placa de vidro escuro com cantos cortados, borda de
   luz degradê, um reflexo que varre e uma linha de energia correndo embaixo.
   A SEQUÊNCIA usa a cor de destaque; o RECORDE vira ouro. Entram um depois do
   outro e "estouram" quando o valor muda. */

/* Grade de colunas iguais: as duas placas ficam do mesmo tamanho (a mais larga manda), mesmo com rótulos de tamanhos diferentes. */
.ovls .placar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: stretch; padding-top: 6px; }

.ovls .stat {
  --cor: var(--destaque);
  position: relative; isolation: isolate; min-width: 92px; padding: 9px 18px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--cor) 40%, transparent), 0 8px 12px rgba(0, 0, 0, 0.5);
  animation: ovls-stat-entra 650ms cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.ovls .stat-recorde { --cor: var(--contagem); animation-delay: 140ms; } /* cor da contagem = a que o dono escolheu na página */

/* Borda: a placa inteira em degradê... */
.ovls .stat::before {
  content: ''; position: absolute; inset: 0; z-index: -3;
  background: linear-gradient(135deg, #fff 0%, var(--cor) 28%, color-mix(in srgb, var(--cor) 25%, transparent) 60%, var(--cor) 100%);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
/* ...e o miolo escuro por cima, com reflexo que varre e a linha de energia. */
.ovls .stat::after {
  content: ''; position: absolute; inset: 1.5px; z-index: -2;
  background:
    linear-gradient(90deg, transparent 0 30%, var(--cor) 50%, transparent 70% 100%) 0 100% / 200% 3px no-repeat,
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.2) 50%, transparent 60%) 160% 0 / 250% 100% no-repeat,
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--cor) 34%, transparent), transparent 70%),
    linear-gradient(160deg, rgba(14, 17, 25, 0.95), rgba(8, 9, 14, 0.97));
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  animation: ovls-stat-luz 4.8s ease-in-out infinite;
}

/* Rótulo com tracinhos de luz dos dois lados. */
.ovls .stat-rotulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #c9d1d8;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.ovls .stat-rotulo::before, .ovls .stat-rotulo::after {
  content: ''; width: 10px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cor));
}
.ovls .stat-rotulo::after { transform: scaleX(-1); }
.ovls .stat-recorde .stat-rotulo::after { display: none; }
/* Troféu desenhado (SVG como máscara), pintado em degradê branco → cor do recorde:
   no lugar do emoji, que muda de cara conforme o sistema e destoava da placa. */
.ovls .stat-recorde .stat-rotulo::before {
  content: ''; width: 12px; height: 12px; border-radius: 0;
  background: linear-gradient(180deg, #fff 5%, var(--cor) 95%);
  -webkit-mask: var(--ovls-trofeu) center / contain no-repeat; mask: var(--ovls-trofeu) center / contain no-repeat;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cor) 80%, transparent));
}

/* Número: grandão, quase branco no miolo com halo colorido (tubo de néon) e
   faíscas subindo atrás — a máscara apaga as faíscas nas bordas. */
.ovls .stat-valor {
  position: relative; font-size: 44px; font-weight: 700; line-height: 0.95; font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow:
    0 0 4px #fff,
    0 0 14px var(--cor),
    0 0 36px color-mix(in srgb, var(--cor) 85%, transparent);
}
.ovls .stat-valor::after {
  content: ''; position: absolute; inset: -12px -14px -6px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 18% 82%, var(--cor) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 72% 46%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 44% 14%, var(--cor) 0 1.4px, transparent 2.2px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
  animation: ovls-faisca 2.2s linear infinite;
}
.ovls .stat-valor.pop { animation: ovls-pop 520ms cubic-bezier(0.2, 1.6, 0.4, 1); }

/* Entra com o cartaz: sobe rodando levemente e assenta. */
.ovls:not(.layout-barra):not(.layout-carta):not(.layout-lateral):not(.layout-placar):not(.layout-faixa) { animation: ovls-classico-entra 700ms cubic-bezier(0.2, 1.25, 0.35, 1); }

@keyframes ovls-classico-entra {
  0% { opacity: 0; transform: translateX(-50px) scale(0.9); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes ovls-stat-entra {
  0% { opacity: 0; transform: translateY(18px) scale(0.85) rotateX(40deg); }
  100% { opacity: 1; transform: none; }
}
/* Um ciclo só: reflexo cruza a placa e a linha de energia corre de ponta a ponta. */
@keyframes ovls-stat-luz {
  0%, 55% { background-position: -100% 100%, 160% 0, 0 0, 0 0; }
  100% { background-position: 200% 100%, -60% 0, 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovls,
  html:not([data-overlay-tv]) .ovls-ranking,
  html:not([data-overlay-tv]) .ovls .stat,
  html:not([data-overlay-tv]) .ovls .stat::after,
  html:not([data-overlay-tv]) .ovls .stat-valor::after,
  html:not([data-overlay-tv]) .ovls .retrato-moldura,
  html:not([data-overlay-tv]) .ovls .retrato-moldura::before,
  html:not([data-overlay-tv]) .ovls .retrato-moldura::after { animation: none; transition: none; }
}

/* Brilho desligado: fica a sombra escura que garante leitura sobre o jogo,
   sem o halo colorido. O anel do retrato continua na cor de destaque — é
   ele que distingue killer de survivor. */
.ovls.sem-brilho .stat-valor,
.ovls.sem-brilho .stat-recorde .stat-valor,
.ovls.sem-brilho.survivor .stat-atual .stat-valor {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6);
}
.ovls.sem-brilho .retrato-moldura,
.ovls.sem-brilho.survivor .retrato-moldura {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); animation: none;
}
.ovls.sem-brilho .retrato-moldura::after { display: none; }
.ovls.sem-brilho .retrato-moldura::before { animation: none; background: color-mix(in srgb, var(--destaque) 55%, transparent); }
.ovls.sem-brilho .stat { box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5); }
.ovls.sem-brilho .stat::after { animation: none; }
.ovls.sem-brilho .stat-valor::after { display: none; }
.ovls.sem-brilho .retrato-nome,
.ovls.sem-brilho.survivor .retrato-nome {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ----------------------------------------------------------------- barra -- */
/* Segundo layout do cartaz: "placa de campeonato". Card escuro com borda de
   luz girando, o retrato saltando pra fora do card, o nome em caixa alta, a
   sequência num número gigante com faíscas subindo e a "Recorde" num selo de
   troféu. .cartaz-classico/.cartaz-barra são os dois filhos de .ovls; só um
   fica visível por vez (ver classe .layout-barra). Tudo é CSS: o mesmo
   arquivo serve o overlay do OBS e a prévia do painel. */
/* Topo alinhado: o retrato é quem manda na altura e o placar é centralizado nela (as perks, quando existem, ficam
   penduradas embaixo sem empurrar o círculo, e sem perks não sobra o vão de 8px que o deixava mais alto que as placas). */
.ovls .cartaz-classico { display: flex; align-items: flex-start; gap: 22px; }
.ovls .cartaz-classico .placar { height: 80px; padding-top: 0; align-items: center; }
.ovls.quadrado .cartaz-classico .placar { height: 118px; }
.ovls.layout-barra .cartaz-classico { display: none; }

/* Ângulo da borda de luz — registrado pra poder ser animado. Sem suporte
   (navegador antigo) a borda só fica parada, nada quebra. */
@property --ovls-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.ovls .cartaz-barra {
  display: none; position: relative; isolation: isolate;
  align-items: center; gap: 22px;
  min-width: 400px; padding: 20px 34px 20px 24px; margin: 26px 0 18px; /* folga pro retrato e o halo vazarem */
}
.ovls.layout-barra .cartaz-barra { display: flex; }
.ovls.layout-barra { animation: ovls-barra-entra 700ms cubic-bezier(0.2, 1.25, 0.35, 1); }
/* Survivor: a placa inteira troca pra cor de survivor. */
.ovls.survivor .cartaz-barra { --destaque: var(--surv); }

/* Corpo da placa: degradê escuro + um brilho que varre a placa de tempos em tempos. */
.ovls .cartaz-barra::before {
  content: ''; position: absolute; inset: 0; z-index: -2; border-radius: 16px;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%) 150% 0 / 260% 100% no-repeat,
    radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--destaque) 38%, transparent), transparent 62%),
    linear-gradient(115deg, rgba(10, 12, 18, 0.95), rgba(20, 15, 28, 0.95));
  box-shadow: 0 0 28px color-mix(in srgb, var(--destaque) 38%, transparent), 0 12px 30px rgba(0, 0, 0, 0.6);
  animation: ovls-varre 5.5s ease-in-out infinite, ovls-respira 3.2s ease-in-out infinite;
}
/* Borda de luz: um arco claro dá a volta na placa. */
.ovls .cartaz-barra::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 16px; padding: 2.5px;
  background: conic-gradient(from var(--ovls-ang), color-mix(in srgb, var(--destaque) 35%, transparent) 0 50%,
    var(--destaque) 78%, #fff 92%, color-mix(in srgb, var(--destaque) 35%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ovls-giro 3.4s linear infinite;
  pointer-events: none;
}

/* Retrato: sem moldura, grande, vazando pra cima e pra esquerda da placa,
   com um halo atrás e flutuando devagar. */
.ovls .cartaz-barra > :first-child { flex: 0 0 auto; margin: -46px 0; transform: translate(-6px, -6px); }
.ovls .barra-retrato {
  position: relative; width: 150px; height: 150px;
  display: grid; place-items: center;
  font-size: 40px; font-weight: 700; color: #8a94a3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.ovls .barra-retrato::before {
  content: ''; position: absolute; inset: -14px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--destaque) 62%, transparent), transparent 68%);
  animation: ovls-halo 2.6s ease-in-out infinite;
}
.ovls .barra-retrato img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--destaque) 70%, transparent)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.7));
  animation: ovls-flutua 3.8s ease-in-out infinite;
}

/* .barra-topo some do layout (display: contents) pra nome e número entrarem
   na mesma grade: nome em cima à esquerda, selo embaixo, número gigante à direita. */
.ovls .barra-corpo {
  display: grid; grid-template-columns: 1fr auto; column-gap: 24px; row-gap: 8px;
  align-items: center; min-width: 0;
}
.ovls .barra-topo { display: contents; }

.ovls .barra-nome {
  grid-column: 1; grid-row: 1; align-self: end;
  font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; max-width: 440px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 18px color-mix(in srgb, var(--destaque) 55%, transparent);
}

/* O número: gigante, com o rótulo em cima, uma divisória de luz à esquerda e
   faíscas da cor de destaque subindo atrás dele. */
.ovls .barra-atual {
  grid-column: 2; grid-row: 1 / span 2; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-left: 24px; min-width: 72px;
  font-size: 72px; font-weight: 700; line-height: 0.95; font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 16px var(--destaque), 0 0 32px var(--destaque),
    0 0 56px color-mix(in srgb, var(--destaque) 75%, transparent);
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, transparent, var(--destaque) 30%, var(--destaque) 70%, transparent) 1;
}
/* O rótulo vem do CSS, então o idioma (?lang= → <html lang>) troca aqui, não no DOM. */
:lang(en) .ovls .barra-atual::before { content: 'STREAK'; }
:lang(es) .ovls .barra-atual::before { content: 'RACHA'; }
.ovls .barra-atual::before {
  content: 'SEQUÊNCIA'; display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: #c3ccd4; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
/* Texto da pessoa no lugar de "SEQUÊNCIA" (streak-cena.js põe em data-rotulo). */
.ovls .barra-atual[data-rotulo]::before {
  content: attr(data-rotulo); text-transform: uppercase; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Faíscas: três pontinhos que se repetem e sobem; a máscara some com elas nas bordas. */
.ovls .barra-atual::after {
  content: ''; position: absolute; inset: -18px -14px -10px 6px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 18% 82%, var(--destaque) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 72% 46%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 44% 14%, var(--destaque) 0 1.4px, transparent 2.2px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
  animation: ovls-faisca 2.2s linear infinite;
}
/* A cada mudança de valor o número "estoura" (classe posta por streak-overlay.js / streak.js). */
.ovls .barra-atual.pop { animation: ovls-pop 520ms cubic-bezier(0.2, 1.6, 0.4, 1); }

/* Selo do recorde: faixa de troféu dourada, com a cor do número configurável. */
.ovls .barra-base {
  grid-column: 1; grid-row: 2; align-self: start;
  display: flex; align-items: center; gap: 9px; width: fit-content;
  background: linear-gradient(100deg, rgba(60, 44, 12, 0.92), rgba(24, 18, 8, 0.94));
  border: 1px solid color-mix(in srgb, var(--contagem) 55%, transparent);
  border-radius: 999px; padding: 5px 16px 5px 12px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--contagem) 28%, transparent), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.ovls .barra-base::before { content: '🏆'; font-size: 16px; filter: drop-shadow(0 0 5px rgba(255, 210, 90, 0.8)); }
.ovls .barra-rotulo-recorde {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.15em; color: #e9d9a8; text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.ovls .barra-recorde {
  font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--contagem);
  text-shadow: 0 0 4px #fff, 0 0 10px var(--contagem), 0 0 20px color-mix(in srgb, var(--contagem) 70%, transparent);
}

@keyframes ovls-barra-entra {
  0% { opacity: 0; transform: translateX(-60px) skewX(-10deg) scale(0.92); filter: blur(4px); }
  60% { opacity: 1; filter: none; }
  100% { opacity: 1; transform: none; }
}
@keyframes ovls-giro { to { --ovls-ang: 360deg; } }
@keyframes ovls-varre { 0%, 55% { background-position: 150% 0, 0 0, 0 0; } 100% { background-position: -50% 0, 0 0, 0 0; } }
@keyframes ovls-respira {
  0%, 100% { box-shadow: 0 0 22px color-mix(in srgb, var(--destaque) 30%, transparent), 0 12px 30px rgba(0, 0, 0, 0.6); }
  50% { box-shadow: 0 0 40px color-mix(in srgb, var(--destaque) 55%, transparent), 0 12px 30px rgba(0, 0, 0, 0.6); }
}
@keyframes ovls-halo { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes ovls-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ovls-faisca { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 -64px, 0 -64px, 0 -64px; } }
@keyframes ovls-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.5); filter: brightness(1.6); }
  100% { transform: scale(1); }
}

/* Brilho desligado: placa calma, sem borda girando, sem faíscas, sem halo. */
.ovls.sem-brilho .cartaz-barra::before { animation: none; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6); }
.ovls.sem-brilho .cartaz-barra::after { animation: none; background: color-mix(in srgb, var(--destaque) 55%, transparent); }
.ovls.sem-brilho .barra-retrato::before,
.ovls.sem-brilho .barra-atual::after { display: none; }
.ovls.sem-brilho .barra-retrato img { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7)); animation: none; }
.ovls.sem-brilho .barra-nome,
.ovls.sem-brilho .barra-atual,
.ovls.sem-brilho .barra-recorde,
.ovls.sem-brilho .barra-base {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6);
}
.ovls.sem-brilho .barra-base { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovls.layout-barra,
  html:not([data-overlay-tv]) .ovls .cartaz-barra::before,
  html:not([data-overlay-tv]) .ovls .cartaz-barra::after,
  html:not([data-overlay-tv]) .ovls .barra-retrato::before,
  html:not([data-overlay-tv]) .ovls .barra-retrato img,
  html:not([data-overlay-tv]) .ovls .barra-atual::after,
  html:not([data-overlay-tv]) .ovls .barra-atual.pop { animation: none; }
}

/* ----------------------------------------------------------------- carta -- */
/* Terceiro layout do cartaz: uma carta colecionável vertical. Moldura de
   "foil" com arco de luz girando, arte do killer/survivor de ponta a ponta com
   vinheta, uma gema hexagonal com a sequência saltando do canto, faixa do nome
   com pontas em V, o build em fileira e o recorde no rodapé. A carta flutua
   com um leve giro 3D e um reflexo de foil atravessa de tempos em tempos.
   Tudo CSS: o mesmo arquivo serve o overlay do OBS e a prévia do painel. */
.ovls .cartaz-carta { display: none; perspective: 900px; margin: 26px 22px 20px 14px; /* folga pra gema e o brilho vazarem */ }
.ovls.layout-carta .cartaz-carta { display: block; }
.ovls.layout-carta .cartaz-classico { display: none; }
.ovls.layout-carta { animation: ovls-carta-entra 850ms cubic-bezier(0.2, 1.2, 0.35, 1) both; }

.ovls .carta {
  --carta-largura: 224px;
  position: relative; isolation: isolate; width: var(--carta-largura); padding: 5px; border-radius: 18px;
  transform-style: preserve-3d; animation: ovls-carta-flutua 7s ease-in-out infinite;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.6));
}
/* Moldura foil: arco claro gira em volta, com halo da cor de destaque. */
.ovls .carta::before {
  content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background: conic-gradient(from var(--ovls-ang), color-mix(in srgb, var(--destaque) 45%, #1a1620) 0 30%,
    var(--destaque) 52%, #fff 62%, color-mix(in srgb, var(--destaque) 55%, #fff) 72%, color-mix(in srgb, var(--destaque) 45%, #1a1620) 100%);
  box-shadow: 0 0 26px color-mix(in srgb, var(--destaque) 45%, transparent);
  animation: ovls-giro 6s linear infinite, ovls-respira-carta 3.4s ease-in-out infinite;
}
/* Corpo da carta. */
.ovls .carta::after {
  content: ''; position: absolute; inset: 5px; z-index: -1; border-radius: 14px;
  background:
    radial-gradient(120% 55% at 50% 100%, color-mix(in srgb, var(--destaque) 24%, transparent), transparent 70%),
    linear-gradient(180deg, #14111c, #0a0910);
}

/* Arte: o retrato ocupa a parte de cima inteira, com vinheta pra nome e gema lerem bem. */
.ovls .carta-quadro {
  position: relative; height: 210px; border-radius: 11px 11px 3px 3px; overflow: hidden;
  background: radial-gradient(90% 80% at 50% 30%, color-mix(in srgb, var(--destaque) 38%, #1b1626), #0d0b14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.ovls .carta-arte {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 84px; font-weight: 700; color: color-mix(in srgb, var(--destaque) 60%, #fff);
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}
.ovls .carta-arte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.ovls .carta-quadro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 28%, transparent 52%, rgba(10, 9, 16, 0.96) 100%),
    radial-gradient(circle at 20% 90%, color-mix(in srgb, var(--destaque) 40%, transparent), transparent 55%);
}
/* Faíscas subindo pela arte (mesmo truque do número do layout barra). */
.ovls .carta-quadro::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.8;
  background:
    radial-gradient(circle at 16% 82%, var(--destaque) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 70% 48%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 44% 14%, var(--destaque) 0 1.4px, transparent 2.2px);
  background-size: 72px 72px;
  animation: ovls-faisca 3.4s linear infinite;
}

/* Etiqueta do tipo, canto superior esquerdo: KILLER ou SURVIVOR (a classe .survivor vem do cartaz). */
.ovls .carta-tipo {
  position: absolute; top: 9px; left: 9px; z-index: 3; padding: 3px 9px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: #fff;
  background: color-mix(in srgb, var(--destaque) 70%, #000); border: 1px solid color-mix(in srgb, var(--destaque) 60%, #fff);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.ovls .carta-tipo::before { content: 'KILLER'; }
.ovls.survivor .carta-tipo::before { content: 'SURVIVOR'; }

/* Gema hexagonal da sequência, saltando pra fora do canto. */
.ovls .carta-gema {
  position: absolute; top: -16px; right: -16px; z-index: 6; width: 82px; height: 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--destaque) 80%, transparent)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
}
.ovls .carta-gema::before, .ovls .carta-gema::after {
  content: ''; position: absolute; z-index: -1;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.ovls .carta-gema::before { inset: 0; background: linear-gradient(160deg, #fff, var(--destaque) 40%, color-mix(in srgb, var(--destaque) 40%, #000)); }
.ovls .carta-gema::after {
  inset: 3px; background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--destaque) 45%, transparent), transparent 70%),
    linear-gradient(180deg, #1c1726, #0b0910);
}
.ovls .carta-gema b {
  font-size: 42px; font-weight: 700; line-height: 0.95; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 14px var(--destaque), 0 0 28px var(--destaque);
}
.ovls .carta-gema span {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; color: #c9d0d8;
  max-width: 60px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ovls .carta-gema b.pop { animation: ovls-pop 520ms cubic-bezier(0.2, 1.6, 0.4, 1); }

/* Faixa do nome: pontas em V, saindo um pouco da carta. */
.ovls .carta-nome {
  position: relative; z-index: 4; margin: -24px -9px 0; padding: 7px 28px 8px; text-align: center;
  font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, color-mix(in srgb, var(--destaque) 75%, #fff 8%), color-mix(in srgb, var(--destaque) 45%, #000));
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%, 11px 50%);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 14px color-mix(in srgb, var(--destaque) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Build em fileira (some sozinho se não houver perk com imagem). */
.ovls .carta-perks { display: flex; justify-content: center; gap: 6px; padding: 10px 6px 2px; }
.ovls .carta-perks:empty { display: none; }
.ovls .carta-perks img {
  width: 34px; height: 34px; border-radius: 8px; object-fit: cover; display: block; background: #1c232c;
  border: 1px solid color-mix(in srgb, var(--destaque) 60%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--destaque) 30%, transparent);
}
.ovls.perks-pequeno .carta-perks img { width: 26px; height: 26px; border-radius: 6px; }
.ovls.perks-grande .carta-perks img { width: 42px; height: 42px; border-radius: 9px; }
.ovls.perks-grande .carta-perks, .ovls.perks-pequeno .carta-perks { gap: 5px; }

/* Rodapé: rótulo do recorde + troféu à esquerda, número à direita. */
.ovls .carta-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 9px 14px 11px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--destaque) 60%, transparent) 25%, color-mix(in srgb, var(--destaque) 60%, transparent) 75%, transparent) 1;
}
.ovls .carta-rotulo {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #cfd6dd;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.ovls .carta-rotulo::before {
  content: ''; flex: 0 0 auto; width: 16px; height: 16px;
  background: linear-gradient(180deg, #fff 5%, var(--contagem) 95%);
  -webkit-mask: var(--ovls-trofeu) center / contain no-repeat; mask: var(--ovls-trofeu) center / contain no-repeat;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--contagem) 70%, transparent));
}
.ovls .carta-recorde {
  font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--contagem), 0 0 24px color-mix(in srgb, var(--contagem) 70%, transparent);
}

/* Reflexo de foil: faixa diagonal que atravessa a carta toda de tempos em tempos. */
.ovls .carta-foil {
  position: absolute; inset: 5px; z-index: 7; pointer-events: none; border-radius: 14px; overflow: hidden;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.07) 44%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.07) 56%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  animation: ovls-carta-foil 6.5s ease-in-out infinite;
}

@keyframes ovls-carta-entra {
  0% { opacity: 0; transform: perspective(900px) rotateY(-78deg) translateY(30px) scale(0.84); filter: blur(4px); }
  60% { opacity: 1; filter: none; }
  100% { opacity: 1; transform: none; }
}
@keyframes ovls-carta-flutua {
  0%, 100% { transform: translateY(0) rotateY(-3.5deg) rotateX(1deg); }
  50% { transform: translateY(-5px) rotateY(3.5deg) rotateX(-1deg); }
}
@keyframes ovls-respira-carta {
  0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--destaque) 35%, transparent); }
  50% { box-shadow: 0 0 38px color-mix(in srgb, var(--destaque) 62%, transparent); }
}
@keyframes ovls-carta-foil { 0%, 50% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

/* Brilho desligado: carta parada, borda fixa, sem reflexo nem faíscas. */
.ovls.sem-brilho .carta { animation: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.6)); }
.ovls.sem-brilho .carta::before { animation: none; box-shadow: none; background: color-mix(in srgb, var(--destaque) 55%, #1a1620); }
.ovls.sem-brilho .carta-foil, .ovls.sem-brilho .carta-quadro::before { display: none; }
.ovls.sem-brilho .carta-gema { filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.6)); }
.ovls.sem-brilho .carta-gema b, .ovls.sem-brilho .carta-recorde, .ovls.sem-brilho .carta-nome { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); }
.ovls.sem-brilho .carta-perks img { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovls.layout-carta,
  html:not([data-overlay-tv]) .ovls .carta,
  html:not([data-overlay-tv]) .ovls .carta::before,
  html:not([data-overlay-tv]) .ovls .carta-foil,
  html:not([data-overlay-tv]) .ovls .carta-quadro::before,
  html:not([data-overlay-tv]) .ovls .carta-gema b.pop { animation: none; }
}

/* ------------------------------------------------------------ nightlight -- */
/* Faixa com as estatísticas do NightLight embaixo do cartaz (ver streak-nightlight.js). Sem caixa, como o resto:
   rótulo pequeno na cor de destaque, número grande na cor da contagem e a posição no ranking mais apagada. */
.ovls-nl {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; width: fit-content; margin-top: 14px;
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.85);
}
.ovls-nl[hidden] { display: none; }
.nl-item { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.nl-rotulo { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--destaque); }
.nl-valor { font-size: 26px; font-weight: 700; line-height: 1; color: var(--contagem); font-variant-numeric: tabular-nums; }
.nl-rank { font-style: normal; font-size: 14px; font-weight: 600; color: #8b959c; }

/* --------------------------------------------------------------- ranking -- */
/* Fase final do rodízio (ver streak-overlay.js): top 5 por recorde, sem
   caixa — mesma filosofia visual do resto do overlay, só sombra pra ler. */
.ovls-ranking {
  display: none; width: fit-content;
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  color: #e6e8eb; animation: ovls-entra 280ms ease-out;
  transition: opacity 320ms ease;
}
.ovls-ranking.pronto { display: block; }

.ranking-titulo {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #f2d98c;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.85);
  margin-bottom: 6px;
}

.ranking-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.ranking-item {
  display: flex; align-items: center; gap: 7px;
}
.ranking-pos {
  width: 15px; text-align: right; font-size: 12px; font-weight: 700; color: #8b959c;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  font-variant-numeric: tabular-nums;
}
.ovls-ranking:not(.layout-barra) .ranking-pos::after { content: '.'; }
.ranking-item:nth-child(1) .ranking-pos { color: #f2d98c; }
.ranking-item:nth-child(2) .ranking-pos { color: #d8dce0; }
.ranking-item:nth-child(3) .ranking-pos { color: #cd9a6a; }

.ranking-retrato {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  background: #1c232c; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #5c6673;
  border: 1.5px solid var(--destaque);
}
.ranking-item.survivor .ranking-retrato { border-color: var(--surv); }
.ranking-retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ranking-nome {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.85);
  min-width: 70px;
}

.ranking-recorde {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--contagem);
  text-shadow: 0 0 4px #fff, 0 0 10px var(--contagem), 0 0 20px color-mix(in srgb, var(--contagem) 70%, transparent);
}


/* ------------------------------------------------------- ranking: barra -- */
/* Com o layout barra, o ranking vira a mesma placa do cartaz: borda de luz
   girando, brilho que varre, linhas que entram em cascata, medalhas pro
   top 3 e uma coroa no 1º. Classe .layout-barra posta por streak-overlay.js. */
.ovls-ranking.layout-barra {
  position: relative; isolation: isolate; min-width: 330px;
  padding: 12px 18px 14px; margin: 6px 0 10px;
  animation: ovls-barra-entra 700ms cubic-bezier(0.2, 1.25, 0.35, 1);
}
.ovls-ranking.layout-barra::before {
  content: ''; position: absolute; inset: 0; z-index: -2; border-radius: 16px;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.14) 50%, transparent 62%) 150% 0 / 260% 100% no-repeat,
    radial-gradient(130% 90% at 50% 0%, rgba(242, 217, 140, 0.2), transparent 62%),
    linear-gradient(115deg, rgba(10, 12, 18, 0.95), rgba(22, 16, 28, 0.95));
  box-shadow: 0 0 30px color-mix(in srgb, var(--destaque) 35%, transparent), 0 12px 30px rgba(0, 0, 0, 0.6);
  animation: ovls-varre 5.5s ease-in-out infinite, ovls-respira 3.2s ease-in-out infinite;
}
.ovls-ranking.layout-barra::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 16px; padding: 2.5px;
  background: conic-gradient(from var(--ovls-ang), rgba(242, 217, 140, 0.3) 0 50%,
    #f2d98c 78%, #fff 92%, rgba(242, 217, 140, 0.3) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ovls-giro 3.4s linear infinite;
  pointer-events: none;
}

/* Título: dourado, em caixa alta, com uma linha de luz embaixo. */
.ovls-ranking.layout-barra .ranking-titulo {
  margin: 0 0 9px; padding: 0 0 7px; text-align: center;
  font-size: 19px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1;
  color: transparent; background: linear-gradient(180deg, #fff6d2 10%, #f2c64f 55%, #c8962e); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(255, 200, 80, 0.55)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
  text-shadow: none;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, #f2d98c 25%, #f2d98c 75%, transparent) 1;
}

.ovls-ranking.layout-barra .ranking-lista { gap: 5px; }

.ovls-ranking.layout-barra .ranking-item {
  position: relative; gap: 10px; padding: 4px 13px 4px 8px; border-radius: 11px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--destaque) 18%, transparent), rgba(255, 255, 255, 0.03) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--destaque) 24%, transparent);
  animation: ovls-linha-entra 520ms cubic-bezier(0.2, 1.3, 0.4, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms + 250ms);
}
.ovls-ranking.layout-barra .ranking-item.survivor { --destaque: var(--surv); }

/* 1º lugar: dourado, maior, com brilho passando. */
.ovls-ranking.layout-barra .ranking-item:nth-child(1) {
  padding: 6px 14px 6px 9px;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 244, 200, 0.22) 50%, transparent 60%) 150% 0 / 260% 100% no-repeat,
    linear-gradient(90deg, rgba(242, 198, 79, 0.3), rgba(242, 198, 79, 0.06) 75%, transparent);
  border-color: rgba(242, 217, 140, 0.7);
  box-shadow: 0 0 20px rgba(242, 198, 79, 0.28);
  animation: ovls-linha-entra 520ms cubic-bezier(0.2, 1.3, 0.4, 1) both, ovls-varre 4.5s ease-in-out 1.2s infinite;
  animation-delay: 250ms, 1.2s;
}

/* Posição: medalha redonda (ouro, prata, bronze; o resto fica discreto). */
.ovls-ranking.layout-barra .ranking-pos {
  flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  font-size: 14px; font-weight: 700; color: #1b1608; text-shadow: none;
  background: radial-gradient(circle at 35% 30%, #fff, #8b959c 80%);
}
.ovls-ranking.layout-barra .ranking-item:nth-child(1) .ranking-pos {
  width: 30px; height: 30px; font-size: 17px; background: radial-gradient(circle at 35% 30%, #fff6d2, #f2c64f 55%, #b8841f);
  box-shadow: 0 0 14px rgba(242, 198, 79, 0.75);
}
.ovls-ranking.layout-barra .ranking-item:nth-child(2) .ranking-pos { background: radial-gradient(circle at 35% 30%, #fff, #cfd6dc 55%, #8a949c); box-shadow: 0 0 10px rgba(207, 214, 220, 0.5); }
.ovls-ranking.layout-barra .ranking-item:nth-child(3) .ranking-pos { background: radial-gradient(circle at 35% 30%, #ffe3c7, #cd9a6a 55%, #8d5a2b); box-shadow: 0 0 10px rgba(205, 154, 106, 0.5); }
.ovls-ranking.layout-barra .ranking-item:nth-child(n + 4) .ranking-pos {
  color: #d3dae0; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Retrato com anel de luz; coroa balançando em cima do 1º. */
.ovls-ranking.layout-barra .ranking-retrato {
  position: relative; overflow: visible; width: 34px; height: 34px; border-width: 2px;
  font-size: 14px; background: #1c232c;
  box-shadow: 0 0 12px color-mix(in srgb, var(--destaque) 70%, transparent), 0 4px 8px rgba(0, 0, 0, 0.55);
}
.ovls-ranking.layout-barra .ranking-retrato img { border-radius: 50%; }
.ovls-ranking.layout-barra .ranking-item:nth-child(1) .ranking-retrato { width: 42px; height: 42px; border-color: #f2d98c; }
.ovls-ranking.layout-barra .ranking-item:nth-child(1) .ranking-retrato::after {
  content: '👑'; position: absolute; top: -13px; left: -7px; font-size: 18px; line-height: 1;
  transform: rotate(-20deg); transform-origin: 50% 100%;
  filter: drop-shadow(0 0 6px rgba(255, 210, 90, 0.9)); animation: ovls-coroa 2.4s ease-in-out infinite;
}

.ovls-ranking.layout-barra .ranking-nome {
  flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1; overflow: hidden; text-overflow: ellipsis; color: #fff; max-width: 230px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 14px color-mix(in srgb, var(--destaque) 45%, transparent);
}
.ovls-ranking.layout-barra .ranking-item:nth-child(1) .ranking-nome { font-size: 22px; }

.ovls-ranking.layout-barra .ranking-recorde {
  margin-left: auto; padding-left: 10px; font-size: 24px; line-height: 1; color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 14px var(--contagem), 0 0 28px color-mix(in srgb, var(--contagem) 75%, transparent);
}
.ovls-ranking.layout-barra .ranking-item:nth-child(1) .ranking-recorde { font-size: 31px; }

@keyframes ovls-linha-entra {
  from { opacity: 0; transform: translateX(-46px) skewX(-8deg); }
  to { opacity: 1; transform: none; }
}
@keyframes ovls-coroa { 0%, 100% { transform: rotate(-20deg) translateY(0); } 50% { transform: rotate(-14deg) translateY(-3px); } }

/* Brilho desligado: sem borda girando, sem varredura, sem coroa balançando. */
.ovls-ranking.layout-barra.sem-brilho::before { animation: none; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6); }
.ovls-ranking.layout-barra.sem-brilho::after { animation: none; background: rgba(242, 217, 140, 0.45); }
.ovls-ranking.layout-barra.sem-brilho .ranking-titulo { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)); }
.ovls-ranking.layout-barra.sem-brilho .ranking-item { box-shadow: none; }
.ovls-ranking.layout-barra.sem-brilho .ranking-item:nth-child(1) { animation: ovls-linha-entra 520ms cubic-bezier(0.2, 1.3, 0.4, 1) both; animation-delay: 250ms; }
.ovls-ranking.layout-barra.sem-brilho .ranking-retrato,
.ovls-ranking.layout-barra.sem-brilho .ranking-pos { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55); }
.ovls-ranking.layout-barra.sem-brilho .ranking-retrato::after { animation: none; filter: none; }
.ovls-ranking.layout-barra.sem-brilho .ranking-nome,
.ovls-ranking.layout-barra.sem-brilho .ranking-recorde { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6); }

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovls-ranking.layout-barra,
  html:not([data-overlay-tv]) .ovls-ranking.layout-barra::before,
  html:not([data-overlay-tv]) .ovls-ranking.layout-barra::after,
  html:not([data-overlay-tv]) .ovls-ranking.layout-barra .ranking-item,
  html:not([data-overlay-tv]) .ovls-ranking.layout-barra .ranking-retrato::after { animation: none !important; }
}

/* ------------------------------------------------------- ranking: carta -- */
/* Com o layout Carta o ranking vira um pódio de cartas colecionáveis: cada
   killer é uma carta (arte, gema com a posição, faixa do nome, recorde no
   rodapé), as do 2º ao 5º abertas em leque ao redor do 1º, que é maior, sobe,
   ganha coroa, moldura dourada e raios de luz. As cartas são distribuídas uma
   a uma e o campeão chega por último, virando — um suspense curto. A moldura
   usa a mesma receita da carta do cartaz (arco de luz girando + foil). */
/* Margem extra até a borda da tela: o ranking nasce no canto, e o brilho do campeão e as cartas do leque
   passam do contorno — sem folga eles eram cortados pelo limite do OBS. */
.ovls-ranking.layout-carta { position: relative; isolation: isolate; margin: 22px 26px 26px 18px; padding: 6px; }

.ovls-ranking.layout-carta .ranking-titulo {
  position: relative; z-index: 3; width: fit-content; margin: 0 auto 4px; padding: 7px 38px 8px;
  font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; color: #20180a;
  background: linear-gradient(180deg, #fff4c6, #f2c64f 52%, #b8841f);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ovls-ranking.layout-carta .ranking-lista {
  position: relative; isolation: isolate; perspective: 1000px; overflow: hidden;
  flex-direction: row; align-items: flex-end; justify-content: center; gap: 12px;
  /* Respiro pro que vaza das cartas (sombras, o leque que desce, o campeão que sobe com a coroa);
     o overflow escondido segura os raios de luz dentro da moldura. */
  padding: 96px 28px 34px;
}
/* Raios de luz atrás do campeão: giram devagar e se acendem junto com a chegada dele. */
.ovls-ranking.layout-carta .ranking-lista::before {
  /* O centro da luz fica na carta do campeão, 97px acima do pé da lista; o que passa da lista é
     cortado pelo overflow. Gira por transform (barato: não repinta o gradiente a cada quadro). */
  content: ''; position: absolute; z-index: -1; left: var(--cx, 50%); bottom: -123px; width: 440px; height: 440px; margin-left: -220px;
  pointer-events: none; will-change: transform;
  background: repeating-conic-gradient(rgba(255, 214, 102, 0.22) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 16%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 16%, transparent 72%);
  animation: ovls-raios-entra 900ms ease-out calc(var(--n, 3) * 150ms + 200ms) both, ovls-raios-gira 60s linear infinite;
}

.ovls-ranking.layout-carta .hall-carta {
  --larg: 104px; --esc: 1; --dy: 0px; --rot: 0deg; --ordem: 0;
  position: relative; flex: 0 0 auto; width: var(--larg); list-style: none; backface-visibility: hidden;
  transform-origin: 50% 85%;
  transform: translate(0, var(--dy)) rotate(var(--rot)) rotateY(0deg) scale(var(--esc));
  animation: ovls-hall-reparte 760ms cubic-bezier(0.2, 1.15, 0.32, 1) calc(var(--ordem) * 150ms + 300ms) both;
}
.ovls-ranking.layout-carta .hall-carta.pos-1 {
  --esc: 1.22; --dy: -22px; z-index: 2; margin: 0 16px;
  animation: ovls-hall-campeao 1000ms cubic-bezier(0.2, 1.1, 0.35, 1) calc(var(--ordem) * 150ms + 300ms) both;
}
/* Ranking atualizado no lugar (alguém somou uma vitória): sem refazer a distribuição. */
.ovls-ranking.sem-entrada .hall-carta, .ovls-ranking.sem-entrada .ranking-lista::before { animation: none; }

/* Cor da moldura pela posição: ouro, prata, bronze; do 4º em diante, a cor de destaque. */
.ovls-ranking.layout-carta .hall-carta.pos-1 { --destaque: #f2c64f; }
.ovls-ranking.layout-carta .hall-carta.pos-2 { --destaque: #cfd6dc; }
.ovls-ranking.layout-carta .hall-carta.pos-3 { --destaque: #cd9a6a; }
.ovls-ranking.layout-carta .hall-carta.survivor.pos-n { --destaque: var(--surv); }

.ovls-ranking.layout-carta .hall-flutua {
  position: relative; animation: ovls-hall-flutua 4.6s ease-in-out infinite; animation-delay: calc(var(--ordem) * -0.9s);
}
.ovls-ranking.layout-carta .hall-carta.pos-1 .hall-flutua { animation: ovls-hall-flutua-campeao 3.8s ease-in-out infinite; }

/* Moldura foil: arco claro dá a volta, com halo na cor da posição. */
.ovls-ranking.layout-carta .hall-moldura {
  position: relative; isolation: isolate; padding: 3px; border-radius: 11px;
  box-shadow: 0 10px 14px rgba(0, 0, 0, 0.55);
}
.ovls-ranking.layout-carta .hall-moldura::before {
  content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background: conic-gradient(from var(--ovls-ang), color-mix(in srgb, var(--destaque) 45%, #1a1620) 0 30%,
    var(--destaque) 52%, #fff 62%, color-mix(in srgb, var(--destaque) 55%, #fff) 72%, color-mix(in srgb, var(--destaque) 45%, #1a1620) 100%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--destaque) 42%, transparent);
  animation: ovls-giro 6s linear infinite; animation-delay: calc(var(--ordem) * -1.3s);
}
.ovls-ranking.layout-carta .hall-carta.pos-1 .hall-moldura::before {
  box-shadow: 0 0 30px rgba(242, 198, 79, 0.65);
  animation: ovls-giro 4.2s linear infinite, ovls-hall-aura 2.6s ease-in-out infinite;
}
.ovls-ranking.layout-carta .hall-moldura::after {
  content: ''; position: absolute; inset: 3px; z-index: -1; border-radius: 8px;
  background:
    radial-gradient(120% 55% at 50% 100%, color-mix(in srgb, var(--destaque) 24%, transparent), transparent 70%),
    linear-gradient(180deg, #14111c, #0a0910);
}

/* Arte do killer com vinheta, pra gema e a faixa lerem bem. */
.ovls-ranking.layout-carta .hall-quadro {
  position: relative; height: 98px; border-radius: 7px 7px 2px 2px; overflow: hidden;
  background: radial-gradient(90% 80% at 50% 30%, color-mix(in srgb, var(--destaque) 38%, #1b1626), #0d0b14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.ovls-ranking.layout-carta .hall-arte {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 44px; font-weight: 700; color: color-mix(in srgb, var(--destaque) 60%, #fff);
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
}
.ovls-ranking.layout-carta .hall-arte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.ovls-ranking.layout-carta .hall-quadro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 30%, transparent 50%, rgba(10, 9, 16, 0.96) 100%),
    radial-gradient(circle at 20% 90%, color-mix(in srgb, var(--destaque) 38%, transparent), transparent 55%);
}
/* Só o campeão solta faíscas. */
.ovls-ranking.layout-carta .hall-carta.pos-1 .hall-quadro::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.85;
  background:
    radial-gradient(circle at 16% 82%, var(--destaque) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 70% 48%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 44% 14%, var(--destaque) 0 1.4px, transparent 2.2px);
  background-size: 56px 56px; animation: ovls-faisca 3s linear infinite;
}

/* Gema hexagonal da posição, saltando pro canto da carta. */
.ovls-ranking.layout-carta .hall-pos {
  position: absolute; top: -10px; left: -10px; z-index: 6; width: 34px; height: 38px; display: grid; place-items: center;
  font-size: 21px; font-weight: 700; line-height: 1; color: #fff;
  text-shadow: 0 0 3px #fff, 0 0 10px var(--destaque);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--destaque) 80%, transparent)) drop-shadow(0 4px 5px rgba(0, 0, 0, 0.6));
}
.ovls-ranking.layout-carta .hall-pos::before, .ovls-ranking.layout-carta .hall-pos::after {
  content: ''; position: absolute; z-index: -1;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.ovls-ranking.layout-carta .hall-pos::before { inset: 0; background: linear-gradient(160deg, #fff, var(--destaque) 40%, color-mix(in srgb, var(--destaque) 40%, #000)); }
.ovls-ranking.layout-carta .hall-pos::after {
  inset: 2.5px;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--destaque) 45%, transparent), transparent 70%), linear-gradient(180deg, #1c1726, #0b0910);
}
.ovls-ranking.layout-carta .hall-carta.pos-1 .hall-pos { width: 40px; height: 45px; font-size: 26px; top: -12px; left: -12px; }

/* Faixa do nome com pontas em V. As posições de pódio usam um fundo mais escuro
   pra o texto branco ler bem sobre o ouro e a prata. */
.ovls-ranking.layout-carta .hall-nome {
  position: relative; z-index: 4; margin: -12px -6px 0; padding: 4px 14px 5px; text-align: center;
  font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, color-mix(in srgb, var(--destaque) 75%, #fff 8%), color-mix(in srgb, var(--destaque) 45%, #000));
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%, 7px 50%);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85), 0 0 10px color-mix(in srgb, var(--destaque) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ovls-ranking.layout-carta .hall-carta.pos-1 .hall-nome,
.ovls-ranking.layout-carta .hall-carta.pos-2 .hall-nome,
.ovls-ranking.layout-carta .hall-carta.pos-3 .hall-nome {
  background: linear-gradient(180deg, color-mix(in srgb, var(--destaque) 58%, #1a1206), color-mix(in srgb, var(--destaque) 28%, #000));
}

/* Rodapé: troféu + o recorde. */
.ovls-ranking.layout-carta .hall-rodape {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 3px; padding: 6px 4px 7px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--destaque) 60%, transparent) 25%, color-mix(in srgb, var(--destaque) 60%, transparent) 75%, transparent) 1;
}
.ovls-ranking.layout-carta .hall-rodape::before {
  content: ''; flex: 0 0 auto; width: 13px; height: 13px;
  background: linear-gradient(180deg, #fff 5%, var(--contagem) 95%);
  -webkit-mask: var(--ovls-trofeu) center / contain no-repeat; mask: var(--ovls-trofeu) center / contain no-repeat;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--contagem) 70%, transparent));
}
.ovls-ranking.layout-carta .hall-recorde {
  font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--contagem), 0 0 24px color-mix(in srgb, var(--contagem) 70%, transparent);
}
.ovls-ranking.layout-carta .hall-carta.pos-1 .hall-recorde { font-size: 30px; }

/* Reflexo de foil atravessando a carta. */
.ovls-ranking.layout-carta .hall-foil {
  position: absolute; inset: 3px; z-index: 7; pointer-events: none; border-radius: 8px; overflow: hidden;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.07) 44%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.07) 56%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  animation: ovls-carta-foil 6.5s ease-in-out infinite; animation-delay: calc(var(--ordem) * -1.1s);
}
.ovls-ranking.layout-carta .hall-carta.pos-1 .hall-foil { animation-duration: 3.6s; }

/* Coroa do campeão, balançando em cima da carta. */
.ovls-ranking.layout-carta .hall-coroa {
  position: absolute; z-index: 8; left: 50%; top: -33px; margin-left: -15px; font-size: 30px; line-height: 1;
  transform: rotate(-8deg); transform-origin: 50% 100%;
  filter: drop-shadow(0 0 8px rgba(255, 210, 90, 0.95));
  animation: ovls-coroa 2.4s ease-in-out infinite;
}

/* A carta é jogada de cima à esquerda, girando, e assenta no leque... */
@keyframes ovls-hall-reparte {
  0% { opacity: 0; transform: translate(var(--sx, 0px), -34px) rotate(-22deg) rotateY(75deg) scale(0.5); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: translate(0, var(--dy)) rotate(var(--rot)) rotateY(0deg) scale(var(--esc)); }
}
/* ...e o campeão cai de cima, virando, num clarão que se apaga ao pousar. */
@keyframes ovls-hall-campeao {
  0% { opacity: 0; transform: translate(0, -54px) rotate(0deg) rotateY(180deg) scale(0.4); filter: brightness(2.6) saturate(0.4); }
  30% { opacity: 1; }
  62% { transform: translate(0, calc(var(--dy) + 10px)) rotate(0deg) rotateY(-8deg) scale(calc(var(--esc) * 1.06)); filter: brightness(1.7); }
  100% { opacity: 1; transform: translate(0, var(--dy)) rotate(0deg) rotateY(0deg) scale(var(--esc)); filter: brightness(1); }
}
@keyframes ovls-raios-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes ovls-raios-gira { to { transform: rotate(360deg); } }
@keyframes ovls-hall-flutua { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(0.8deg); } }
@keyframes ovls-hall-flutua-campeao { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ovls-hall-aura {
  0%, 100% { box-shadow: 0 0 22px rgba(242, 198, 79, 0.5); }
  50% { box-shadow: 0 0 40px rgba(242, 198, 79, 0.85); }
}

/* Brilho desligado: cartas paradas, sem raios, foil, faíscas nem aura — só a sombra que garante leitura. */
.ovls-ranking.layout-carta.sem-brilho .ranking-lista::before,
.ovls-ranking.layout-carta.sem-brilho .hall-foil,
.ovls-ranking.layout-carta.sem-brilho .hall-carta.pos-1 .hall-quadro::before { display: none; }
.ovls-ranking.layout-carta.sem-brilho .hall-flutua { animation: none; }
.ovls-ranking.layout-carta.sem-brilho .hall-moldura { box-shadow: 0 8px 12px rgba(0, 0, 0, 0.6); }
.ovls-ranking.layout-carta.sem-brilho .hall-moldura::before,
.ovls-ranking.layout-carta.sem-brilho .hall-carta.pos-1 .hall-moldura::before {
  animation: none; box-shadow: none; background: color-mix(in srgb, var(--destaque) 55%, #1a1620);
}
.ovls-ranking.layout-carta.sem-brilho .hall-pos { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.6)); }
.ovls-ranking.layout-carta.sem-brilho .hall-recorde,
.ovls-ranking.layout-carta.sem-brilho .hall-pos,
.ovls-ranking.layout-carta.sem-brilho .hall-nome { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); }
.ovls-ranking.layout-carta.sem-brilho .hall-coroa { animation: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7)); }

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovls-ranking.layout-carta .hall-carta,
  html:not([data-overlay-tv]) .ovls-ranking.layout-carta .hall-flutua,
  html:not([data-overlay-tv]) .ovls-ranking.layout-carta .hall-moldura::before,
  html:not([data-overlay-tv]) .ovls-ranking.layout-carta .hall-foil,
  html:not([data-overlay-tv]) .ovls-ranking.layout-carta .hall-coroa,
  html:not([data-overlay-tv]) .ovls-ranking.layout-carta .ranking-lista::before,
  html:not([data-overlay-tv]) .ovls-ranking.layout-carta .hall-quadro::before { animation: none !important; }
}


/* ------------------------------------------------------------ transições -- */
/* Quem coreografa a troca entre fases do rodízio (e de killer) é o
   streak-cena.js, por JS: as entradas de CSS de cada layout, que disparam
   toda vez que o elemento volta a aparecer, saem de cena pra não brigar com ele. */
.ovls.ovls-troca, .ovls-ranking.ovls-troca { animation: none !important; }
.ovls.ovls-troca .stat { animation: none; }

/* O fantasma é a cópia do que estava na tela, saindo por cima. Nada dele reage ao mouse
   nem repete as animações de entrada (a cópia as recomeçaria do zero). */
.ovls-fantasma { pointer-events: none; animation: none !important; }
.ovls-fantasma .stat, .ovls-fantasma .ranking-item, .ovls-fantasma .hall-carta,
.ovls-fantasma .ranking-lista::before { animation: none !important; }

/* ----------------------------------------------------------------- pausa -- */
/* Pílula "⏸ EM PAUSA" logo abaixo do cartaz (ou do ranking), criada por
   streak-cena.js. O overlay continua inteiro à vista: só a pílula aparece,
   com o ícone piscando devagar. O rodízio para na fase atual (streak-cena.js). */
.ovls, .ovls-ranking {
  position: relative;
  /* Distância entre a pílula e o cartaz (Streak → Selo de pausa → Distância). */
  --pausa-gap: 12px;
  /* Espaço que cada layout deixa vazio entre a borda da caixa e o cartaz que se vê
     (folga pro brilho/retrato vazarem). A pílula desconta isso, então a distância
     escolhida é a mesma em todos os layouts. */
  --folga-cima: 0px; --folga-baixo: 0px; --folga-esq: 0px; --folga-dir: 0px;
  /* Espaço reservado do lado quando a pílula fica na esquerda/direita. */
  --pausa-reserva: 140px;
}
.ovls.pausa-colado, .ovls-ranking.pausa-colado { --pausa-gap: 4px; }
.ovls.pausa-afastado, .ovls-ranking.pausa-afastado { --pausa-gap: 26px; }
.ovls.layout-barra { --folga-cima: 26px; --folga-baixo: 18px; --folga-esq: -20px; }
.ovls.layout-carta { --folga-cima: 26px; --folga-baixo: 20px; --folga-esq: 14px; --folga-dir: 22px; }
.ovls.layout-lateral { --folga-cima: 8px; --folga-baixo: 8px; --folga-esq: 6px; --folga-dir: 18px; }
.ovls-pausa { display: none; }

.ovls.em-pausa .ovls-pausa,
.ovls-ranking.em-pausa .ovls-pausa {
  --pausa: #e0665a;
  position: absolute; left: 50%; top: 100%; z-index: 20; margin-top: calc(var(--pausa-gap) - var(--folga-baixo));
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 5px 13px 5px 10px; border-radius: 999px;
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.24em; text-transform: uppercase;
  color: #f4e9e2;
  background: rgba(10, 8, 10, 0.78);
  border: 1px solid color-mix(in srgb, var(--pausa) 60%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px color-mix(in srgb, var(--pausa) 30%, transparent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  transform: translateX(-50%);
  animation: ovls-pausa-entra 360ms cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
/* Ícone ⏸ de duas barras, piscando devagar. */
.ovls-pausa-ico {
  width: 9px; height: 11px; flex: none;
  background: linear-gradient(90deg, var(--pausa) 0 35%, transparent 35% 65%, var(--pausa) 65%);
  filter: drop-shadow(0 0 4px var(--pausa));
  animation: ovls-pausa-pisca 1.2s ease-in-out infinite;
}

@keyframes ovls-pausa-entra {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes ovls-pausa-pisca { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* Pílula em cima: sobe pra cima do cartaz, entrando de baixo pra cima. */
.ovls.em-pausa.pausa-cima .ovls-pausa,
.ovls-ranking.em-pausa.pausa-cima .ovls-pausa {
  top: auto; bottom: 100%; margin: 0 0 calc(var(--pausa-gap) - var(--folga-cima));
  animation-name: ovls-pausa-entra-cima;
}
/* Na Barra o retrato salta por cima do card: a pílula vai pro lado do número,
   na folga que já existe acima do card, à distância escolhida. */
.ovls.layout-barra.em-pausa.pausa-cima .ovls-pausa {
  top: auto; bottom: calc(100% - var(--folga-cima) + var(--pausa-gap)); left: auto; right: 30px; margin: 0;
  transform: none; animation-name: ovls-pausa-entra-solta;
}

/* Nos lados: centrada na altura do cartaz. O cartaz ganha uma margem do lado
   escolhido (sempre, não só na pausa) pra pílula caber na fonte do OBS sem
   cortar e o cartaz não "pular" quando a pausa liga. */
.ovls.pausa-esquerda, .ovls-ranking.pausa-esquerda { margin-left: calc(var(--pausa-reserva) + var(--pausa-gap)); }
.ovls.pausa-direita, .ovls-ranking.pausa-direita { margin-right: calc(var(--pausa-reserva) + var(--pausa-gap)); }
/* Em cima e afastado, a pílula passaria da folga de 36px do topo da página e seria cortada:
   o cartaz desce só o que faltar (com colado/normal isso dá zero). */
.ovls.pausa-cima, .ovls-ranking.pausa-cima { margin-top: max(0px, calc(var(--pausa-gap) - var(--folga-cima) - 8px)); }
.ovls.em-pausa.pausa-esquerda .ovls-pausa,
.ovls-ranking.em-pausa.pausa-esquerda .ovls-pausa {
  top: 50%; left: auto; right: 100%; margin: 0 calc(var(--pausa-gap) - var(--folga-esq)) 0 0;
  transform: translateY(-50%); animation-name: ovls-pausa-entra-esq;
}
.ovls.em-pausa.pausa-direita .ovls-pausa,
.ovls-ranking.em-pausa.pausa-direita .ovls-pausa {
  top: 50%; left: 100%; margin: 0 0 0 calc(var(--pausa-gap) - var(--folga-dir));
  transform: translateY(-50%); animation-name: ovls-pausa-entra-dir;
}
@keyframes ovls-pausa-entra-esq {
  from { opacity: 0; transform: translate(6px, -50%); }
  to { opacity: 1; transform: translate(0, -50%); }
}
@keyframes ovls-pausa-entra-dir {
  from { opacity: 0; transform: translate(-6px, -50%); }
  to { opacity: 1; transform: translate(0, -50%); }
}
@keyframes ovls-pausa-entra-cima {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes ovls-pausa-entra-solta {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Sem brilho: sem o halo vermelho. */
.ovls.sem-brilho.em-pausa .ovls-pausa,
.ovls-ranking.sem-brilho.em-pausa .ovls-pausa { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
.ovls.sem-brilho .ovls-pausa-ico, .ovls-ranking.sem-brilho .ovls-pausa-ico { filter: none; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovls.em-pausa .ovls-pausa,
  html:not([data-overlay-tv]) .ovls-ranking.em-pausa .ovls-pausa,
  html:not([data-overlay-tv]) .ovls-pausa-ico { animation: none; }
}


/* --------------------------------------------------------------- lateral -- */
/* Quarto layout do cartaz: uma pilha enxuta de placas (killer, sequência e
   recorde) feita pra ficar encostada na lateral da tela, sem retrato gigante
   nem moldura. Duas variações, escolhidas na página do Streak:
     barras (padrão) — placas de vidro escuro com borda de luz: número, rótulo e ícone;
     faixas          — placas cheias e brilhantes, com o texto na frente ("SEQUÊNCIA: 3").
   Cores: a sequência usa a cor de destaque; o recorde, a cor do recorde. */
.ovls {
  --ovls-raio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='13,2 4,14 11,14 9,22 20,9 13,9'/%3E%3C/svg%3E");
}

.ovls .cartaz-lateral { display: none; flex-direction: column; align-items: flex-start; gap: 7px; margin: 8px 18px 8px 6px; }
.ovls.layout-lateral .cartaz-lateral { display: flex; }
.ovls.layout-lateral .cartaz-classico { display: none; }
.ovls.layout-lateral { animation: ovls-lateral-entra 620ms cubic-bezier(0.2, 1.25, 0.35, 1) both; }
@keyframes ovls-lateral-entra {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: none; }
}

/* Killer em cima: retrato redondo pequeno e o nome, sem placa. */
.ovls .lateral-killer { display: flex; align-items: center; gap: 10px; max-width: 240px; margin: 0 0 2px 4px; }
.ovls.lateral-sem-killer .lateral-killer { display: none; }
.ovls .lateral-retrato {
  position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #1c232c;
  font-size: 15px; font-weight: 700; color: #5c6673;
  border: 2px solid var(--destaque);
  box-shadow: 0 0 10px color-mix(in srgb, var(--destaque) 60%, transparent), 0 4px 8px rgba(0, 0, 0, 0.55);
}
.ovls.quadrado .lateral-retrato { border-radius: 10px; }
.ovls .lateral-retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ovls .lateral-nome {
  min-width: 0; padding: 9px 12px; margin: -9px -12px; font-size: 17px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.7);
}

/* Placa (estilo "barras"): paralelogramo com borda de luz, miolo de vidro escuro tingido
   pela cor da placa e um reflexo que varre de tempos em tempos. */
.ovls .lateral-linha {
  --cor: var(--destaque);
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 9px;
  height: 38px; min-width: 198px; padding: 0 18px 0 19px; color: #fff;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 8px color-mix(in srgb, var(--cor) 38%, transparent));
}
.ovls .lateral-recorde { --cor: var(--contagem); }
.ovls .lateral-linha::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(100deg, #fff 0%, var(--cor) 24%, color-mix(in srgb, var(--cor) 40%, transparent) 60%, var(--cor) 100%);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.ovls .lateral-linha::after {
  content: ''; position: absolute; inset: 1.5px; z-index: -1;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.2) 50%, transparent 60%) 150% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--cor) 40%, rgba(12, 14, 20, 0.96)), color-mix(in srgb, var(--cor) 14%, rgba(8, 9, 14, 0.97)));
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  animation: ovls-varre 5.5s ease-in-out infinite;
}
.ovls .lateral-recorde::after { animation-delay: 1.4s; }

.ovls .lateral-valor {
  min-width: 30px; font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--cor), 0 0 24px color-mix(in srgb, var(--cor) 70%, transparent);
}
.ovls .lateral-valor.pop { animation: ovls-pop 520ms cubic-bezier(0.2, 1.6, 0.4, 1); }
.ovls .lateral-rotulo {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #dfe6ec;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.ovls .lateral-icone {
  flex: 0 0 auto; width: 18px; height: 18px;
  background: linear-gradient(180deg, #fff 5%, var(--cor) 95%);
  -webkit-mask: var(--ovls-raio) center / contain no-repeat; mask: var(--ovls-raio) center / contain no-repeat;
  filter: drop-shadow(0 0 5px var(--cor));
}
.ovls .lateral-recorde .lateral-icone { -webkit-mask-image: var(--ovls-trofeu); mask-image: var(--ovls-trofeu); }

/* Estilo "faixas": placas cheias e brilhantes, contorno escuro grosso, texto na frente
   ("SEQUÊNCIA: 3") com contorno nas letras pra ler em cima de qualquer cena. O recorde
   escurece a cor dele: uma cor clara (o padrão é quase branco) apagaria o texto branco. */
.ovls.lateral-faixa .lateral-linha {
  --fundo: var(--cor);
  height: 44px; min-width: 0; padding: 0 28px 0 26px; gap: 6px; font-style: italic;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.6));
}
.ovls.lateral-faixa .lateral-recorde { --fundo: color-mix(in srgb, var(--contagem) 74%, #1a1208); }
.ovls.lateral-faixa .lateral-linha::before {
  background: #08090c;
  clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
}
.ovls.lateral-faixa .lateral-linha::after {
  inset: 3px;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%) 150% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0 46%, transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--fundo) 88%, #fff), color-mix(in srgb, var(--fundo) 66%, #000));
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.ovls.lateral-faixa .lateral-rotulo {
  order: 1; flex: 0 0 auto; font-size: 16px; letter-spacing: 0.04em; color: #fff;
  text-shadow: -2px 0 #0a0a0e, 2px 0 #0a0a0e, 0 -2px #0a0a0e, 0 2px #0a0a0e, -1.5px -1.5px #0a0a0e, 1.5px 1.5px #0a0a0e, -1.5px 1.5px #0a0a0e, 1.5px -1.5px #0a0a0e;
}
.ovls.lateral-faixa .lateral-rotulo::after { content: ':'; }
.ovls.lateral-faixa .lateral-valor {
  order: 2; min-width: 0; font-size: 30px; letter-spacing: 0.02em;
  text-shadow: -2.5px 0 #0a0a0e, 2.5px 0 #0a0a0e, 0 -2.5px #0a0a0e, 0 2.5px #0a0a0e, -2px -2px #0a0a0e, 2px 2px #0a0a0e, -2px 2px #0a0a0e, 2px -2px #0a0a0e;
}
.ovls.lateral-faixa .lateral-icone { display: none; }

/* Build (as perks), em fileira embaixo das placas. Segue o tamanho escolhido em
   "Tamanho das perks" e some sozinha se o killer não tem perk com imagem. */
.ovls .lateral-perks { display: flex; gap: 5px; padding: 3px 0 0 12px; }
.ovls .lateral-perks:empty { display: none; }
.ovls .lateral-perks img {
  width: 30px; height: 30px; border-radius: 7px; object-fit: cover; display: block; background: #1c232c;
  border: 1px solid color-mix(in srgb, var(--destaque) 60%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--destaque) 30%, transparent), 0 3px 6px rgba(0, 0, 0, 0.5);
}
.ovls.quadrado .lateral-perks img { border-radius: 5px; }
.ovls.perks-pequeno .lateral-perks { gap: 4px; }
.ovls.perks-pequeno .lateral-perks img { width: 23px; height: 23px; border-radius: 6px; }
.ovls.perks-grande .lateral-perks { gap: 6px; }
.ovls.perks-grande .lateral-perks img { width: 38px; height: 38px; border-radius: 8px; }
.ovls.sem-brilho .lateral-perks img { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55); }

/* Brilho desligado: sem halo colorido nem reflexo varrendo — fica a sombra que garante leitura. */
.ovls.sem-brilho .lateral-linha { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.ovls.sem-brilho .lateral-linha::after { animation: none; }
.ovls.sem-brilho .lateral-icone { filter: none; }
.ovls.sem-brilho:not(.lateral-faixa) .lateral-valor { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); }

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovls.layout-lateral,
  html:not([data-overlay-tv]) .ovls .lateral-linha::after,
  html:not([data-overlay-tv]) .ovls .lateral-valor.pop { animation: none; }
}

/* Ranking do rodízio no layout lateral: a mesma família de placas, uma por killer. */
.ovls-ranking.layout-lateral { margin: 8px 18px 8px 6px; }
.ovls-ranking.layout-lateral .ranking-titulo {
  width: fit-content; margin: 0 0 8px 2px; padding: 6px 20px 7px 18px;
  font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; color: #20180a; text-shadow: none;
  background: linear-gradient(180deg, #fff4c6, #f2c64f 52%, #b8841f);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
}
.ovls-ranking.layout-lateral .ranking-lista { gap: 6px; }
.ovls-ranking.layout-lateral .ranking-item {
  --cor: var(--destaque);
  position: relative; isolation: isolate; gap: 9px; height: 36px; min-width: 236px; padding: 0 18px 0 20px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px color-mix(in srgb, var(--cor) 30%, transparent));
  animation: ovls-linha-entra 520ms cubic-bezier(0.2, 1.3, 0.4, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms + 250ms);
}
.ovls-ranking.layout-lateral .ranking-item.survivor { --cor: var(--surv); }
.ovls-ranking.layout-lateral .ranking-item:nth-child(1) { --cor: #f2c64f; }
.ovls-ranking.layout-lateral .ranking-item:nth-child(2) { --cor: #cfd6dc; }
.ovls-ranking.layout-lateral .ranking-item:nth-child(3) { --cor: #cd9a6a; }
.ovls-ranking.layout-lateral .ranking-item::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(100deg, #fff 0%, var(--cor) 24%, color-mix(in srgb, var(--cor) 40%, transparent) 60%, var(--cor) 100%);
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}
.ovls-ranking.layout-lateral .ranking-item::after {
  content: ''; position: absolute; inset: 1.5px; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 36%, rgba(12, 14, 20, 0.96)), color-mix(in srgb, var(--cor) 12%, rgba(8, 9, 14, 0.97)));
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.ovls-ranking.layout-lateral .ranking-pos {
  width: 18px; flex: 0 0 auto; text-align: center; font-size: 16px; color: var(--cor); text-shadow: 0 0 8px color-mix(in srgb, var(--cor) 70%, transparent);
}
.ovls-ranking.layout-lateral .ranking-pos::after { content: none; }
.ovls-ranking.layout-lateral .ranking-retrato { width: 26px; height: 26px; border-color: var(--cor); font-size: 12px; }
.ovls-ranking.layout-lateral .ranking-nome {
  flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  overflow: hidden; text-overflow: ellipsis; color: #fff;
}
.ovls-ranking.layout-lateral .ranking-recorde {
  margin-left: auto; padding-left: 8px; font-size: 22px; line-height: 1; color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--cor), 0 0 24px color-mix(in srgb, var(--cor) 70%, transparent);
}
.ovls-ranking.layout-lateral.sem-brilho .ranking-item { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); }
.ovls-ranking.layout-lateral.sem-brilho .ranking-recorde,
.ovls-ranking.layout-lateral.sem-brilho .ranking-pos { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); }
@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovls-ranking.layout-lateral .ranking-item { animation: none !important; }
}

/* =====================================================================
   Layouts "placar" e "faixa" (estilo Survivor Streak): imagem opcional (a do time, enviada em Imagens como
   "Time", ou o retrato), cabeçalho pequeno, título grande e três etiquetas em seta (sequência, recorde
   pessoal e recorde mundial). O mesmo bloco serve aos dois: "placar" empilha as linhas ao lado da imagem
   grande, "faixa" põe tudo numa fila só, numa placa escura. Só opacidade e transform animam.
   ===================================================================== */
.ovls .cartaz-sv { display: none; align-items: center; gap: 26px; font-family: 'Lilita One', 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; }
.ovls.layout-placar .cartaz-sv, .ovls.layout-faixa .cartaz-sv { display: flex; }
.ovls.layout-placar .cartaz-classico, .ovls.layout-faixa .cartaz-classico { display: none; }

.ovls .sv-imagem { flex: 0 0 auto; width: 250px; height: 200px; display: grid; place-items: center; }
.ovls .sv-imagem img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)); }
.ovls.sv-sem-imagem .sv-imagem { display: none; }

.ovls .sv-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ovls .sv-cab {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; font-size: 17px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: #b9bfc9; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.ovls .sv-cab i { width: 14px; height: 16px; flex: none; border-radius: 3px; background: var(--destaque); box-shadow: 0 0 8px color-mix(in srgb, var(--destaque) 70%, transparent); }
.ovls .sv-titulo {
  font-size: 50px; line-height: 1.02; color: #fff; letter-spacing: 0.01em; white-space: nowrap;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 0, 0, 0.7);
}
.ovls .sv-linhas { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; align-items: flex-start; }
.ovls .sv-linha { display: flex; align-items: center; gap: 16px; }
.ovls.sv-sem-mundial .sv-l3 { display: none; }
.ovls .sv-num {
  min-width: 78px; text-align: right; font-size: 38px; line-height: 1; font-weight: 400; color: var(--contagem);
  font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.7);
}

/* Etiqueta em seta: borda na cor da linha (::before) e miolo escuro tingido (::after), os dois recortados em seta. */
.ovls .sv-tag {
  --c: #8f5bff; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 9px;
  min-width: 168px; height: 36px; padding: 0 30px 0 14px; color: color-mix(in srgb, var(--c) 40%, #fff);
}
.ovls .sv-l2 .sv-tag { --c: #37e070; }
.ovls .sv-l3 .sv-tag { --c: #3b97ff; }
.ovls .sv-tag::before, .ovls .sv-tag::after { content: ''; position: absolute; z-index: -1; }
.ovls .sv-tag::before {
  inset: 0; background: var(--c);
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent));
}
.ovls .sv-tag::after {
  inset: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 42%, #0a0b12), color-mix(in srgb, var(--c) 16%, #0a0b12));
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}
.ovls .sv-tag em {
  font-style: normal; font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; font-weight: 700; font-size: 21px;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.ovls .sv-tag i {
  width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: var(--sv-icone) center / contain no-repeat; mask: var(--sv-icone) center / contain no-repeat;
}
.ovls .sv-l1 .sv-tag i { --sv-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E"); }
.ovls .sv-l2 .sv-tag i { --sv-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4-3 5-3 9a4 4 0 0 0 8 0c0-2-1-3-1-5 3 2 5 5 5 8a9 9 0 0 1-18 0c0-6 5-8 9-12z'/%3E%3C/svg%3E"); }
.ovls .sv-l3 .sv-tag i { --sv-icone: var(--ovls-trofeu); }

/* Entrada do cartaz inteiro (a coreografia das trocas é do streak-cena.js). */
.ovls.layout-placar, .ovls.layout-faixa { animation: ovls-sv-entra 520ms cubic-bezier(0.2, 1.2, 0.35, 1); }
@keyframes ovls-sv-entra { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

/* Faixa: tudo numa fila, numa placa escura (lê bem sobre o jogo). */
.ovls.layout-faixa .cartaz-sv {
  gap: 18px; padding: 12px 22px 12px 14px; border-radius: 14px;
  background: linear-gradient(100deg, rgba(14, 16, 24, 0.9), rgba(10, 11, 17, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.ovls.layout-faixa .sv-imagem { width: 112px; height: 92px; }
.ovls.layout-faixa .sv-titulo { font-size: 32px; }
.ovls.layout-faixa .sv-cab { font-size: 15px; }
.ovls.layout-faixa .sv-linhas { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 14px; margin: 4px 0 0 0; }
.ovls.layout-faixa .sv-linha { gap: 8px; flex-direction: row-reverse; }
.ovls.layout-faixa .sv-num { min-width: 0; font-size: 28px; text-align: left; }
.ovls.layout-faixa .sv-tag { min-width: 0; height: 28px; padding: 0 22px 0 10px; }
.ovls.layout-faixa .sv-tag em { font-size: 16px; }
.ovls.layout-faixa .sv-tag i { width: 15px; height: 15px; }

/* Sem brilho: tira os halos coloridos das etiquetas. */
.ovls.sem-brilho .sv-tag::before { filter: none; }
.ovls.sem-brilho .sv-cab i { box-shadow: none; }

@media (prefers-reduced-motion: reduce) { html:not([data-overlay-tv]) .ovls.layout-placar,
  html:not([data-overlay-tv]) .ovls.layout-faixa { animation: none; } }