/*
 * @file Aparência do overlay da fila. Compartilhado entre o overlay de
 * verdade (fila-overlay.html, dentro do OBS) e a prévia da página Link pro
 * OBS — é o que garante que a prévia mostre exatamente o que vai pro ar.
 *
 * Tudo fica sob a classe .ovl para poder conviver com o CSS do site na
 * página do painel. As variáveis de cor ficam no :root porque o overlay as
 * define em document.documentElement; a prévia sobrescreve no próprio
 * container, que é mais específico e vence por herança.
 */
:root { --destaque: #7a9cc6; --contagem: #e6e8eb; --surv: #5b9bd5; --enfeite: #e0665a; }

.ovl {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 14px;
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  color: #e6e8eb;
}
.ovl.cartao { flex-wrap: wrap; align-items: stretch; }

.ovl .total {
  display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--destaque) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--destaque) 55%, transparent);
  border-radius: 999px; padding: 6px 16px 6px 14px;
}
.ovl .total b { font-size: 24px; font-weight: 700; line-height: 1; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.ovl .total span { font-size: 13px; color: #d8dce0; letter-spacing: 0.04em; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }

/* -------------------------------------------------------------- item -- */
.ovl .item {
  display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
  background: rgba(21, 26, 33, 0.86);
  border: 1px solid rgba(230, 232, 235, 0.08);
  border-left: 3px solid var(--destaque);
  border-radius: 999px; padding: 5px 16px 5px 5px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  animation: ovl-entra 260ms ease-out;
}
@keyframes ovl-entra {
  from { opacity: 0; transform: translateY(4px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* Anúncio do rodízio: o texto que a dona escreveu, no lugar de um pedido por alguns segundos. */
.ovl .anuncio {
  display: flex; flex-direction: column; justify-content: center; gap: 3px; flex: 0 1 auto;
  max-width: min(560px, 100%); padding: 8px 22px 9px 18px;
  background: rgba(21, 26, 33, 0.86);
  border: 1px solid rgba(230, 232, 235, 0.08);
  border-left: 3px solid var(--destaque);
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  animation: ovl-entra 260ms ease-out;
}
.ovl .anuncio-titulo {
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  color: var(--anuncio-cor-titulo, var(--destaque)); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.ovl .anuncio.uma-linha .anuncio-texto { white-space: nowrap; }
.ovl .anuncio-texto {
  font-size: calc(21px * var(--fit, 1)); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere;
  color: var(--anuncio-cor, #ffffff); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.ovl.cartao .anuncio { align-self: center; }

/* Efeitos do anúncio (anuncio-fila.js): cada um roda uma vez na entrada, só com opacidade e transform. */
.ovl .anuncio.fx-digitando .l { opacity: 0; animation: anuncio-aparece 1ms linear forwards; }
.ovl .anuncio.fx-digitando .anuncio-texto::after {
  content: ''; display: inline-block; width: 2px; height: 0.95em; margin-left: 3px; vertical-align: -0.12em;
  background: var(--anuncio-cor, #ffffff); animation: anuncio-cursor 0.8s steps(1) infinite;
}
.ovl .anuncio.fx-revelar .p { display: inline-block; opacity: 0; transform: translateY(9px); animation: anuncio-palavra 420ms ease-out forwards; }
.ovl .anuncio.fx-letreiro { width: 520px; max-width: 100%; }
.ovl .anuncio-trilho { overflow: hidden; width: 100%; }
.ovl .anuncio.fx-letreiro .anuncio-texto {
  display: inline-block; white-space: nowrap; padding-left: 100%;
  animation: anuncio-passa var(--dur, 6s) linear forwards; will-change: transform;
}
.ovl .anuncio.fx-reflexo, .ovl .anuncio.fx-neon { position: relative; }
.ovl .anuncio.fx-reflexo { overflow: hidden; }
.ovl .anuncio-fx { position: absolute; inset: 0; pointer-events: none; }
.ovl .anuncio.fx-reflexo .anuncio-fx {
  transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.30) 50%, transparent 62%);
  animation: anuncio-reflexo 1.1s ease-in-out 0.25s 2;
}
.ovl .anuncio.fx-neon .anuncio-fx {
  inset: -1px; border-radius: inherit; opacity: 0;
  box-shadow: 0 0 22px var(--destaque), inset 0 0 14px color-mix(in srgb, var(--destaque) 55%, transparent);
  animation: anuncio-neon 1.2s ease-in-out 3 forwards;
}
.ovl .anuncio.fx-neon .anuncio-texto { text-shadow: 0 0 10px color-mix(in srgb, var(--anuncio-cor, #ffffff) 65%, transparent), 0 1px 4px rgba(0, 0, 0, 0.85); }

@keyframes anuncio-aparece { to { opacity: 1; } }
@keyframes anuncio-cursor { 50% { opacity: 0; } }
@keyframes anuncio-palavra { to { opacity: 1; transform: none; } }
@keyframes anuncio-passa { to { transform: translateX(-100%); } }
@keyframes anuncio-reflexo { to { transform: translateX(120%); } }
@keyframes anuncio-neon { 0% { opacity: 0; } 50% { opacity: 0.95; } 100% { opacity: 0.35; } }

/* Lateral: o anúncio é uma .placa (mesma forma inclinada e mesmo material do estilo escolhido), só que mais alta e larga que a de um pedido. */
.ovl.lateral .placa.anuncio, .ovl.lateral.horizontal .placa.anuncio {
  width: auto; min-width: min(276px, 100%); max-width: 100%; height: auto; min-height: 42px;
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  padding: 9px 30px 10px 32px; overflow: visible;
  background: none; border: 0; border-radius: 0; box-shadow: none; animation: none;
}
.ovl.lateral .placa.anuncio.fx-letreiro { width: 420px; }
.ovl.lateral .placa.anuncio .anuncio-titulo, .ovl.lateral .placa.anuncio .anuncio-texto { position: relative; z-index: 1; }
.ovl.lateral .placa.anuncio .anuncio-trilho { position: relative; z-index: 1; }
.ovl.lateral .placa.anuncio .anuncio-texto { font-size: calc(19px * var(--fit, 1)); }
.ovl.lateral .placa.anuncio .anuncio-fx {
  inset: 1.5px; z-index: 0; border-radius: 0;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}
.ovl.lateral .placa.anuncio.fx-neon .anuncio-fx { box-shadow: inset 0 0 18px color-mix(in srgb, var(--cor) 75%, transparent); }
/* Estilo Sólido: placa clara, então o título na cor de destaque sumiria nela. */
.ovl.lateral.pele-solido .placa.anuncio .anuncio-titulo { color: var(--anuncio-cor-titulo, #0c1114); text-shadow: none; }
.ovl.lateral.pele-solido .placa.anuncio .anuncio-texto { text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovl .anuncio,
  html:not([data-overlay-tv]) .ovl .anuncio-fx,
  html:not([data-overlay-tv]) .ovl .anuncio .l,
  html:not([data-overlay-tv]) .ovl .anuncio .p,
  html:not([data-overlay-tv]) .ovl .anuncio.fx-letreiro .anuncio-texto,
  html:not([data-overlay-tv]) .ovl .anuncio.fx-digitando .anuncio-texto::after { animation: none; }
  html:not([data-overlay-tv]) .ovl .anuncio .l,
  html:not([data-overlay-tv]) .ovl .anuncio .p { opacity: 1; transform: none; }
  html:not([data-overlay-tv]) .ovl .anuncio.fx-letreiro .anuncio-texto { padding-left: 0; white-space: normal; }
}

.ovl .retrato {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: #1c232c; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #5c6673; overflow: hidden;
  border: 1px solid rgba(230, 232, 235, 0.14);
}
.ovl .retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ovl .nome {
  font-size: 18px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.ovl .contagem {
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--contagem); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.ovl .contagem span { font-size: 13px; font-weight: 500; color: #c8cdd1; }

.ovl .mais {
  flex: 0 0 auto; font-size: 16px; font-weight: 600; color: #c8cdd1;
  background: rgba(21, 26, 33, 0.75); border: 1px solid rgba(230, 232, 235, 0.08);
  border-radius: 999px; padding: 7px 14px; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

/* Desafio: anel na cor de destaque no retrato, miniaturas dos perks e um
   brilho ao redor do pílula inteira — sem selo de texto, o formato já
   entrega o recado, só que agora chama mais atenção na faixa. O brilho
   soma ao box-shadow padrão de .item (não substitui). */
.ovl .item.desafio {
  background: linear-gradient(90deg, color-mix(in srgb, var(--destaque) 18%, transparent), rgba(21, 26, 33, 0.88));
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.4),
    0 0 0 1px color-mix(in srgb, var(--destaque) 70%, transparent),
    0 0 14px color-mix(in srgb, var(--destaque) 55%, transparent);
}
.ovl .item.desafio .retrato { border: 2px solid var(--destaque); }
.ovl .item.survivor.desafio {
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.4),
    0 0 0 1px color-mix(in srgb, var(--surv) 70%, transparent),
    0 0 14px color-mix(in srgb, var(--surv) 55%, transparent);
}
.ovl .perks { display: flex; gap: 3px; margin-left: 2px; }
.ovl .perks img {
  width: 22px; height: 22px; border-radius: 4px; object-fit: cover; display: block;
  border: 1px solid color-mix(in srgb, var(--destaque) 45%, transparent); background: #1c232c;
}

/* Survivor: mesma faixa, acento próprio em vez da cor de destaque escolhida. */
.ovl .item.survivor { border-left-color: var(--surv); }
.ovl .item.survivor.desafio { background: linear-gradient(90deg, color-mix(in srgb, var(--surv) 18%, transparent), rgba(21, 26, 33, 0.88)); }

/* Moldura de destaque desligada: desafio fica visualmente igual a um
   pedido normal (sem gradiente, sem o brilho extra). A tarja da esquerda
   (que também marca survivor) fica de fora dessa troca de propósito. */
.ovl.sem-moldura .item.desafio,
.ovl.sem-moldura .item.survivor.desafio {
  background: rgba(21, 26, 33, 0.86);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.ovl.sem-moldura .item.desafio .retrato { border-color: rgba(230, 232, 235, 0.14); }
.ovl.sem-moldura .perks img { border-color: rgba(230, 232, 235, 0.14); }

/* --------------------------------------------------- destaque animado -- */
/* Nada flutuando por cima — o destaque extra (opcional) é animado NO
   PRÓPRIO card, com cor independente (--enfeite).
   O alcance é escolhido no painel: .alcance-todos pega a faixa inteira,
   sem a classe pega só o desafio (que era o comportamento antigo e segue
   sendo o padrão).
   O box-shadow do pulso repete o anel porque animação vence regra normal —
   sem isso, ligar o pulso apagaria a cor de destaque escolhida. */
.ovl.enfeite-pulso .item.desafio,
.ovl.enfeite-pulso.alcance-todos .item {
  animation: ovl-entra 260ms ease-out, enfeite-pulso 1.6s ease-in-out infinite;
}
@keyframes enfeite-pulso {
  0%, 100% {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4),
      0 0 0 1.5px color-mix(in srgb, var(--enfeite) 75%, transparent),
      0 0 16px color-mix(in srgb, var(--enfeite) 60%, transparent);
  }
  50% {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4),
      0 0 0 3px var(--enfeite),
      0 0 28px color-mix(in srgb, var(--enfeite) 90%, transparent);
  }
}

/* "Brilho": anel de cor sempre visível no card (não só durante a passada
   do reflexo — antes disso, o efeito "sumia" 80% do tempo) + um reflexo de
   luz que atravessa a pílula de tempos em tempos por cima. A forma do card
   (pill/cartão) já corta o reflexo certinho via overflow. */
.ovl.enfeite-brilho .item.desafio,
.ovl.enfeite-brilho.alcance-todos .item {
  position: relative; overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4),
    0 0 0 1.5px color-mix(in srgb, var(--enfeite) 80%, transparent),
    0 0 18px color-mix(in srgb, var(--enfeite) 65%, transparent);
}
.ovl.enfeite-brilho .item.desafio::after,
.ovl.enfeite-brilho.alcance-todos .item::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    100deg, transparent 35%,
    var(--enfeite) 50%,
    transparent 65%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  animation: enfeite-brilho 3.4s ease-in-out infinite;
}
@keyframes enfeite-brilho {
  0%, 55% { background-position: 150% 0; }
  85%, 100% { background-position: -50% 0; }
}

/* Com o enfeite em todos, o desafio mantém um passo à frente: reflexo mais
   frequente, pra continuar se distinguindo do pedido comum. */
.ovl.enfeite-brilho.alcance-todos .item.desafio::after { animation-duration: 2.4s; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovl.enfeite-pulso .item { animation: none; }
  html:not([data-overlay-tv]) .ovl.enfeite-brilho .item::after { animation: none; display: none; }
}

/* Formato do retrato: círculo (padrão) ou quadrado arredondado. */
.ovl.quadrado .retrato { border-radius: 10px; }
.ovl.quadrado .item.cartao .retrato { border-radius: 12px; }

/* -------------------------------------------------------- layout cartão -- */
.ovl .item.cartao {
  flex-direction: row; align-items: center; gap: 10px;
  border-radius: 12px; padding: 6px 12px 6px 6px;
}
.ovl .item.cartao .retrato { width: 42px; height: 42px; font-size: 16px; border-width: 2px; }
.ovl .item.cartao .cartao-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ovl .item.cartao .nome { font-size: 14px; }
.ovl .item.cartao .contagem { font-size: 12px; }
.ovl .item.cartao .perks {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin-left: 2px;
}
.ovl .item.cartao .perks img { width: 17px; height: 17px; border-radius: 4px; }
.ovl.cartao .total { align-self: center; }

/* Tamanho do cartão — "médio" é o padrão acima. */
.ovl.tam-pequeno .item.cartao {
  gap: 8px; border-radius: 10px; padding: 5px 10px 5px 5px;
}
.ovl.tam-pequeno .item.cartao .retrato { width: 34px; height: 34px; font-size: 13px; }
.ovl.tam-pequeno .item.cartao .nome { font-size: 12px; }
.ovl.tam-pequeno .item.cartao .contagem { font-size: 11px; }
.ovl.tam-pequeno .item.cartao .perks { gap: 2px; }
.ovl.tam-pequeno .item.cartao .perks img { width: 14px; height: 14px; }

.ovl.tam-grande .item.cartao {
  gap: 12px; border-radius: 14px; padding: 8px 16px 8px 8px;
}
.ovl.tam-grande .item.cartao .retrato { width: 54px; height: 54px; font-size: 20px; }
.ovl.tam-grande .item.cartao .nome { font-size: 16px; }
.ovl.tam-grande .item.cartao .contagem { font-size: 14px; }
.ovl.tam-grande .item.cartao .perks { gap: 4px; }
.ovl.tam-grande .item.cartao .perks img { width: 21px; height: 21px; }

/* ---------------------------------------------------------- layout mini -- */
/* Só o retrato e a contagem: a faixa mais enxuta. Sem nome; o desafio mantém as perks. */
.ovl.mini { flex-wrap: wrap; gap: 8px; }
.ovl .item.mini { gap: 7px; padding: 4px 13px 4px 4px; }
.ovl .item.mini .retrato { width: 34px; height: 34px; font-size: 14px; }
.ovl .item.mini .contagem { font-size: 20px; }
.ovl .item.mini .perks img { width: 18px; height: 18px; }
.ovl.mini .total { padding: 4px 13px 4px 11px; }
.ovl.mini .mais { padding: 5px 11px; }

/* -------------------------------------------------------- layout placar -- */
/* Lista vertical numerada, como um placar: posição, retrato, nome (ocupa o meio), contagem e perks. */
.ovl.placar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; width: 340px; }
/* Horizontal (mesma opção "Direção" do Lateral): os pedidos lado a lado, cada um com a sua largura. */
.ovl.placar.horizontal { flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; gap: 8px; }
.ovl.placar.horizontal .item.placar { gap: 8px; }
.ovl.placar.horizontal .item.placar .nome { flex: 0 1 auto; max-width: 170px; }
.ovl.placar .total { align-self: flex-start; }
.ovl.placar .mais { align-self: flex-start; }
.ovl.placar.horizontal .total, .ovl.placar.horizontal .mais { align-self: center; }
.ovl .item.placar { border-radius: 12px; padding: 6px 14px 6px 6px; gap: 10px; }
.ovl .item.placar .posicao {
  flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center;
  border-radius: 7px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  color: #fff; background: color-mix(in srgb, var(--destaque) 38%, rgba(0, 0, 0, 0.45));
  border: 1px solid color-mix(in srgb, var(--destaque) 60%, transparent); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.ovl .item.placar.survivor .posicao { background: color-mix(in srgb, var(--surv) 38%, rgba(0, 0, 0, 0.45)); border-color: color-mix(in srgb, var(--surv) 60%, transparent); }
.ovl .item.placar .retrato { width: 38px; height: 38px; font-size: 15px; }
.ovl .item.placar .nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 19px; }
.ovl .item.placar .contagem { flex: 0 0 auto; font-size: 21px; }
.ovl.quadrado .item.placar .retrato { border-radius: 9px; }

/* ------------------------------------------------------ pele "contorno" -- */
/* Fundo quase transparente e contorno colorido em volta da pílula inteira
   (não só a tarja da esquerda) — mais discreto, deixa o jogo aparecer por
   trás. Funciona nos dois layouts (compacto e cartão). */
.ovl.pele-contorno .item {
  background: rgba(12, 17, 20, 0.55);
  border: 1.5px solid color-mix(in srgb, var(--destaque) 80%, transparent);
}
.ovl.pele-contorno .item.survivor { border-color: color-mix(in srgb, var(--surv) 80%, transparent); }
.ovl.pele-contorno .item.desafio {
  background: linear-gradient(90deg, color-mix(in srgb, var(--destaque) 14%, transparent), rgba(12, 17, 20, 0.6));
}
.ovl.pele-contorno.sem-moldura .item.desafio,
.ovl.pele-contorno.sem-moldura .item.survivor.desafio {
  background: rgba(12, 17, 20, 0.55);
}

/* -------------------------------------------------------- pele "solido" -- */
/* Fundo sólido na cor de destaque (ou de survivor), texto escuro — contraste
   máximo, pensado pra cena clara ou concorrendo com muita informação. */
.ovl.pele-solido .item {
  background: var(--destaque);
  border-left-color: color-mix(in srgb, var(--destaque) 55%, black);
}
.ovl.pele-solido .item.survivor {
  background: var(--surv);
  border-left-color: color-mix(in srgb, var(--surv) 55%, black);
}
.ovl.pele-solido .item .nome,
.ovl.pele-solido .item .contagem,
.ovl.pele-solido .item .contagem span {
  color: #0c1114; text-shadow: none;
}
.ovl.pele-solido .item .retrato {
  border-color: rgba(12, 17, 20, 0.4); background: rgba(12, 17, 20, 0.18);
}
.ovl.pele-solido .item.desafio { background: var(--destaque); }
.ovl.pele-solido .item.survivor.desafio { background: var(--surv); }
.ovl.pele-solido .item.desafio .retrato { border-color: rgba(12, 17, 20, 0.55); }

.ovl #vazio, .ovl #erro {
  font-size: 14px; color: #c8cdd1; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  background: rgba(21, 26, 33, 0.75); border-radius: 999px; padding: 6px 16px;
}
.ovl #erro { color: #ff9a90; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovl .item { animation: none; }
}

/* =====================================================================
   Peles novas da pílula. Todas trabalham com --acc, a cor do item: a de
   destaque, ou a de survivor nos survivors. Decoração fica em ::before
   (o ::after é do enfeite "brilho"). Funcionam nos layouts compacto e cartão; o lateral
   tem a placa dele e usa as peles como "materiais" (seção "lateral", no fim do arquivo).
   ===================================================================== */
.ovl[class*="pele-"] .item { --acc: var(--destaque); position: relative; }
.ovl[class*="pele-"] .item.survivor { --acc: var(--surv); }

@property --holo-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ---------------------------------------------------------- pele "neon" -- */
/* Letreiro de neon: tubo fino aceso, halo por fora e por dentro, texto
   brilhando e um piscar raro, como letreiro velho de bar. */
.ovl.pele-neon .item {
  background: rgba(6, 8, 12, 0.62);
  border: 1.5px solid color-mix(in srgb, var(--acc) 85%, #fff);
  box-shadow: 0 0 5px var(--acc), 0 0 16px color-mix(in srgb, var(--acc) 70%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--acc) 35%, transparent);
  animation: ovl-entra 260ms ease-out, neon-pisca 8s linear infinite;
}
.ovl.pele-neon .item .nome { color: #fff; text-shadow: 0 0 3px #fff, 0 0 9px var(--acc), 0 0 18px var(--acc); }
.ovl.pele-neon .item .contagem { color: #fff; text-shadow: 0 0 3px #fff, 0 0 8px var(--contagem), 0 0 16px var(--contagem); }
.ovl.pele-neon .item .contagem span { color: #e8eef2; }
.ovl.pele-neon .item .retrato { border: 1.5px solid var(--acc); box-shadow: 0 0 8px var(--acc); }
.ovl.pele-neon .item.desafio {
  background: rgba(6, 8, 12, 0.62);
  box-shadow: 0 0 8px var(--acc), 0 0 26px var(--acc), 0 0 42px color-mix(in srgb, var(--acc) 55%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--acc) 50%, transparent);
}
.ovl.pele-neon.sem-moldura .item.desafio {
  box-shadow: 0 0 5px var(--acc), 0 0 16px color-mix(in srgb, var(--acc) 70%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--acc) 35%, transparent);
}
@keyframes neon-pisca {
  0%, 17%, 20%, 61%, 63.5%, 100% { opacity: 1; }
  18.5% { opacity: 0.55; } 19.2% { opacity: 0.9; }
  62.2% { opacity: 0.6; }
}

/* --------------------------------------------------------- pele "vidro" -- */
/* Vidro fosco: embaça o que está atrás, borda de luz em cima e um filete
   da cor do item embaixo. Combina com cena colorida/jogo aparecendo. */
.ovl.pele-vidro .item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07) 70%);
  /* (sem backdrop-filter: no OBS não há fundo a embaçar e ele pesa na GPU por pílula) */
  border: 1px solid rgba(255, 255, 255, 0.28); border-top-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 color-mix(in srgb, var(--acc) 85%, transparent),
    inset 0 -12px 16px color-mix(in srgb, var(--acc) 22%, transparent);
}
.ovl.pele-vidro .item .nome,
.ovl.pele-vidro .item .contagem { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.ovl.pele-vidro .item .contagem span { color: rgba(255, 255, 255, 0.82); }
.ovl.pele-vidro .item .retrato { border: 1.5px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.15); }
.ovl.pele-vidro .item.desafio {
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 38%, rgba(255, 255, 255, 0.2)), rgba(255, 255, 255, 0.07) 70%);
}
.ovl.pele-vidro.sem-moldura .item.desafio { background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07) 70%); }

/* ----------------------------------------------------- pele "holografico" -- */
/* Borda iridescente que gira (arco-íris de selo holográfico) em volta de
   um miolo escuro. */
.ovl.pele-holo .item {
  background: rgba(9, 11, 18, 0.9); border: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 16px rgba(170, 120, 255, 0.28);
}
.ovl.pele-holo .item::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--holo-ang), #ff6ec7, #ffe66d, #6effc4, #6ec7ff, #b76eff, #ff6ec7);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: holo-gira 4.5s linear infinite;
}
.ovl.pele-holo .item .nome,
.ovl.pele-holo .item .contagem { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.ovl.pele-holo .item .retrato { border: 2px solid var(--acc); }
.ovl.pele-holo .item.desafio {
  background: linear-gradient(110deg, color-mix(in srgb, var(--acc) 20%, rgba(9, 11, 18, 0.92)), rgba(9, 11, 18, 0.92));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 22px rgba(170, 120, 255, 0.5);
}
.ovl.pele-holo.sem-moldura .item.desafio { background: rgba(9, 11, 18, 0.9); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 16px rgba(170, 120, 255, 0.28); }
@keyframes holo-gira { to { --holo-ang: 360deg; } }

/* --------------------------------------------------------- pele "sangue" -- */
/* Tema do jogo: couro escuro manchado de vermelho, osso no texto e gotas
   escorrendo por baixo da pílula. A tarja da esquerda segue a cor do item
   (survivor continua azul), pra dar pra separar killer de survivor. */
.ovl.pele-sangue .item {
  background: linear-gradient(180deg, #2b0609, #12060a);
  border: 1px solid #5b1015; border-left: 4px solid var(--acc);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), inset 0 0 14px rgba(160, 12, 20, 0.38), inset 0 -3px 4px -1px rgba(185, 14, 24, 0.8);
}
.ovl.pele-sangue .item .nome { color: #f4e6dc; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(190, 20, 28, 0.55); }
.ovl.pele-sangue .item .contagem { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(190, 20, 28, 0.6); }
.ovl.pele-sangue .item .contagem span { color: #d5b9ae; }
.ovl.pele-sangue .item .retrato { border: 2px solid #a3101a; background: #1a0a0d; box-shadow: 0 0 8px rgba(190, 20, 28, 0.5); }
.ovl.pele-sangue .item.desafio {
  background: linear-gradient(180deg, #3b080c, #16070b);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(190, 20, 28, 0.6), 0 0 18px rgba(190, 20, 28, 0.5),
    inset 0 0 16px rgba(190, 14, 22, 0.5);
  animation: ovl-entra 260ms ease-out, sangue-pulso 2.4s ease-in-out infinite;
}
.ovl.pele-sangue.sem-moldura .item.desafio {
  background: linear-gradient(180deg, #2b0609, #12060a);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), inset 0 0 14px rgba(160, 12, 20, 0.38); animation: ovl-entra 260ms ease-out;
}
@keyframes sangue-pulso {
  0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(190, 20, 28, 0.6), 0 0 14px rgba(190, 20, 28, 0.4), inset 0 0 14px rgba(190, 14, 22, 0.4); }
  50% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(220, 30, 38, 0.9), 0 0 28px rgba(220, 30, 38, 0.7), inset 0 0 20px rgba(220, 20, 30, 0.6); }
}

/* Gotas do sangue: <i class="gota"> criadas por sangue.js (2-3 por pílula), com
   --x/--s sorteados a cada ciclo e --d/--atraso próprios, então nunca caem em
   sincronia. Ciclo: nasce na beirada, engorda, estica um fio, o fio arrebenta
   e a gota cai acelerando até sumir; o resto do ciclo é pausa. */
.gota { display: none; }
.ovl:is(.pele-sangue, .pele-veneno) .item > .gota {
  display: block; position: absolute; z-index: 2; pointer-events: none;
  left: var(--x, 50%); top: calc(100% - 4px);
  width: calc(7px * var(--s, 1)); height: calc(8px * var(--s, 1)); margin-left: calc(-3.5px * var(--s, 1));
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 200, 200, 0.95) 0 8%, transparent 24%),
    radial-gradient(circle at 42% 42%, #d8323c, #a3101a 52%, #5e060c);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transform-origin: 50% 0; opacity: 0;
  animation: gota-vida var(--d, 12s) linear var(--atraso, 0s) infinite;
}
.ovl:is(.pele-sangue, .pele-veneno) .item > .gota::before {
  content: ''; position: absolute; left: 50%; bottom: 55%; width: calc(2.6px * var(--s, 1)); margin-left: calc(-1.3px * var(--s, 1));
  height: 0; border-radius: 1px; background: linear-gradient(#8f0b13, #a8111b);
  animation: gota-fio var(--d, 12s) linear var(--atraso, 0s) infinite;
}
@keyframes gota-vida {
  0% { opacity: 0; transform: translateY(0) scale(0.2); animation-timing-function: ease-out; }
  6% { opacity: 1; transform: translateY(0) scale(0.6); animation-timing-function: ease-in-out; }
  28% { transform: translateY(2px) scale(1); animation-timing-function: ease-in; }
  36% { transform: translateY(5px) scale(1.05, 1.12); animation-timing-function: ease-in; }
  40% { transform: translateY(8px) scale(0.95, 1.22); animation-timing-function: ease-in; }
  46% { transform: translateY(20px) scale(0.88, 1.4); animation-timing-function: ease-in; }
  52% { transform: translateY(40px) scale(0.8, 1.6); opacity: 1; animation-timing-function: ease-in; }
  55% { transform: translateY(54px) scale(0.7, 1.7); opacity: 0; }
  100% { opacity: 0; transform: translateY(54px) scale(0.7, 1.7); }
}
@keyframes gota-fio {
  0%, 6% { height: 0; opacity: 1; }
  28% { height: 6px; }
  36% { height: 9px; }
  40% { height: 12px; opacity: 1; }
  43% { height: 0; opacity: 0; }
  100% { height: 0; opacity: 0; }
}
/* ---------------------------------------------------------- pele "pixel" -- */
/* Placa de fliperama 8 bits: fonte de pixel (Pixelify Sans), cantos em
   escadinha e moldura grossa de espessura uniforme na cor do item — o card
   inteiro é recortado em degraus e o miolo (::before) é recortado nos mesmos
   degraus, 4px pra dentro. O miolo é um fundo de TV de tubo: linhas de
   varredura, degradê da cor do item, uma faixa de luz que desce sem parar e
   quatro "parafusos" nos cantos. A fonte vem do Google Fonts; sem ela cai pra
   monoespaçada. */
.ovl.pele-pixel .item,
.ovl.pele-pixel .item.cartao {
  --px: 'Pixelify Sans', 'Courier New', ui-monospace, monospace;
  --degraus: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 0 calc(100% - 8px));
  border: 0; border-radius: 0; padding: 9px 20px 9px 10px; overflow: visible; backdrop-filter: none;
  /* moldura: a cor do item com realce de luz em cima e sombra embaixo (botão chanfrado) */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0 2px, transparent 2px calc(100% - 3px), rgba(0, 0, 0, 0.45) calc(100% - 3px)),
    var(--acc);
  box-shadow: none;
  clip-path: var(--degraus);
}
.ovl.pele-pixel .item > * { position: relative; z-index: 1; }

/* Miolo + varredura + parafusos. */
.ovl.pele-pixel .item::before {
  content: ''; position: absolute; inset: 4px; z-index: 0; pointer-events: none;
  clip-path: var(--degraus);
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(255, 255, 255, 0.14) 50%, transparent 58% 100%) 0 -120% / 100% 220% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 7px 7px / 3px 3px no-repeat,
    linear-gradient(var(--acc), var(--acc)) calc(100% - 7px) 7px / 3px 3px no-repeat,
    linear-gradient(var(--acc), var(--acc)) 7px calc(100% - 7px) / 3px 3px no-repeat,
    linear-gradient(var(--acc), var(--acc)) calc(100% - 7px) calc(100% - 7px) / 3px 3px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(90% 160% at 0% 50%, color-mix(in srgb, var(--acc) 34%, transparent), transparent 70%),
    linear-gradient(180deg, #1b1c44, #0b0c18);
  animation: pixel-varre 3.2s steps(16, end) infinite;
}
@keyframes pixel-varre {
  to { background-position: 0 120%, 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), 0 0, 0 0, 0 0, 0 0; }
}

.ovl.pele-pixel .item .nome {
  font-family: var(--px); font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: #fff; text-shadow: 2px 2px 0 #000;
}
.ovl.pele-pixel .item .contagem {
  font-family: var(--px); font-size: 17px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--contagem); text-shadow: 2px 2px 0 #000, 0 0 8px color-mix(in srgb, var(--contagem) 55%, transparent);
}
.ovl.pele-pixel .item .contagem span { font-family: var(--px); }
.ovl.pele-pixel .item.cartao { gap: 10px; padding: 8px 14px 8px 9px; }
.ovl.pele-pixel .item.cartao .nome { font-size: 13px; }
.ovl.pele-pixel .item.cartao .contagem { font-size: 12px; }
.ovl.pele-pixel.tam-pequeno .item.cartao .nome { font-size: 11px; }
.ovl.pele-pixel.tam-pequeno .item.cartao .contagem { font-size: 10px; }
.ovl.pele-pixel.tam-grande .item.cartao .nome { font-size: 15px; }
.ovl.pele-pixel.tam-grande .item.cartao .contagem { font-size: 14px; }

/* Retrato: quadro de pixel com cantinho cortado em degrau e a cor do item. */
.ovl.pele-pixel .item .retrato,
.ovl.pele-pixel.quadrado .item .retrato,
.ovl.pele-pixel .item.cartao .retrato {
  border: 2px solid var(--acc); border-radius: 0; background: #0b0c18;
  clip-path: polygon(0 3px, 2px 3px, 2px 2px, 3px 2px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 2px, calc(100% - 2px) 2px,
    calc(100% - 2px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 2px) calc(100% - 3px), calc(100% - 2px) calc(100% - 2px),
    calc(100% - 3px) calc(100% - 2px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 2px), 2px calc(100% - 2px),
    2px calc(100% - 3px), 0 calc(100% - 3px));
}
.ovl.pele-pixel .perks img { border-radius: 0; border: 2px solid color-mix(in srgb, var(--acc) 80%, #000); }

/* Contador "na fila": plaquinha quadrada de pixel, no mesmo estilo. */
.ovl.pele-pixel .total {
  font-family: 'Pixelify Sans', 'Courier New', ui-monospace, monospace;
  border-radius: 0; border: 3px solid var(--destaque); background: linear-gradient(180deg, #1b1c44, #0b0c18);
  box-shadow: inset 0 0 0 2px #0b0c18, 3px 3px 0 #000; padding: 5px 14px 5px 12px;
}
.ovl.pele-pixel .total b, .ovl.pele-pixel .total span { font-family: inherit; text-shadow: 2px 2px 0 #000; }
.ovl.pele-pixel .total b { font-size: 22px; }
.ovl.pele-pixel .total span { font-size: 12px; text-transform: uppercase; }

/* Desafio: moldura brilhante (reflexo branco cruzando a cor do item) e o
   miolo puxa mais cor. */
.ovl.pele-pixel .item.desafio {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0 2px, transparent 2px calc(100% - 3px), rgba(0, 0, 0, 0.45) calc(100% - 3px)),
    linear-gradient(135deg, color-mix(in srgb, var(--acc) 40%, #fff), var(--acc) 40%, color-mix(in srgb, var(--acc) 40%, #fff) 62%, var(--acc));
}
.ovl.pele-pixel .item.desafio::before {
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(255, 255, 255, 0.14) 50%, transparent 58% 100%) 0 -120% / 100% 220% no-repeat,
    linear-gradient(#fff, #fff) 7px 7px / 3px 3px no-repeat,
    linear-gradient(#fff, #fff) calc(100% - 7px) 7px / 3px 3px no-repeat,
    linear-gradient(#fff, #fff) 7px calc(100% - 7px) / 3px 3px no-repeat,
    linear-gradient(#fff, #fff) calc(100% - 7px) calc(100% - 7px) / 3px 3px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(90% 160% at 0% 50%, color-mix(in srgb, var(--acc) 55%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 38%, #1b1c44), #0b0c18);
}
/* Moldura de destaque desligada: desafio igual a um pedido normal. */
.ovl.pele-pixel.sem-moldura .item.desafio {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0 2px, transparent 2px calc(100% - 3px), rgba(0, 0, 0, 0.45) calc(100% - 3px)),
    var(--acc);
}
.ovl.pele-pixel.sem-moldura .item.desafio::before {
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(255, 255, 255, 0.14) 50%, transparent 58% 100%) 0 -120% / 100% 220% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 7px 7px / 3px 3px no-repeat,
    linear-gradient(var(--acc), var(--acc)) calc(100% - 7px) 7px / 3px 3px no-repeat,
    linear-gradient(var(--acc), var(--acc)) 7px calc(100% - 7px) / 3px 3px no-repeat,
    linear-gradient(var(--acc), var(--acc)) calc(100% - 7px) calc(100% - 7px) / 3px 3px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(90% 160% at 0% 50%, color-mix(in srgb, var(--acc) 34%, transparent), transparent 70%),
    linear-gradient(180deg, #1b1c44, #0b0c18);
}
@media (prefers-reduced-motion: reduce) { html:not([data-overlay-tv]) .ovl.pele-pixel .item::before { animation: none; } }

/* --------------------------------------------------------- pele "ticket" -- */
/* Ingresso de cinema: entalhes meia-lua nas laterais, margens coloridas em
   cima e embaixo e o retrato num canhoto separado por pontilhado. */
.ovl.pele-ticket .item,
.ovl.pele-ticket .item.cartao {
  border: 0; border-top: 2px solid var(--acc); border-bottom: 2px solid var(--acc); border-radius: 6px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--acc) 34%, #161b24) 0%, #161b24 42%);
  box-shadow: none;
  -webkit-mask: radial-gradient(circle 6px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 6px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 6px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 6px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  padding-left: 11px; padding-right: 20px; gap: 12px;
}
.ovl.pele-ticket .item .nome,
.ovl.pele-ticket .item .cartao-corpo { border-left: 2px dashed color-mix(in srgb, var(--acc) 75%, #fff 10%); padding-left: 12px; }
.ovl.pele-ticket .item .cartao-corpo .nome { border-left: 0; padding-left: 0; }
.ovl.pele-ticket .item .nome { text-transform: uppercase; letter-spacing: 0.07em; color: #f6f1e4; }
.ovl.pele-ticket .item .contagem { letter-spacing: 0.05em; }
.ovl.pele-ticket .item .retrato { border: 2px solid var(--acc); }
.ovl.pele-ticket .item.desafio { background: linear-gradient(100deg, color-mix(in srgb, var(--acc) 52%, #161b24) 0%, #161b24 55%); }
.ovl.pele-ticket.sem-moldura .item.desafio { background: linear-gradient(100deg, color-mix(in srgb, var(--acc) 34%, #161b24) 0%, #161b24 42%); }

/* ------------------------------------- peles "veneno, gelo, brasa, vazio, ouro" -- */
/* Irmãs do sangue: mesmo miolo escuro com luz interna, tarja da esquerda na cor do item
   e um efeito vivo por cima, tudo em cima de variáveis por pele:
   --pl-a/--pl-b degradê do fundo, --pl-borda, --pl-luz (r, g, b do brilho), --pl-texto,
   --pl-sub (contagem), --pl-retr. O efeito vem de sangue.js: veneno solta gotas (as mesmas
   do sangue, em verde); gelo, brasa, vazio e ouro soltam <i class="faisca"> (cada uma com a
   sua animação). Lateral não tem essas peles: a placa inclinada não comporta o efeito. */
.ovl.pele-veneno { --pl-a: #0f3414; --pl-b: #06120a; --pl-borda: #1f6a2a; --pl-luz: 90, 225, 70; --pl-texto: #e8f8dc; --pl-sub: #b3dca2; --pl-retr: #0a1a0d; --pl-cor: #5fe046; }
.ovl.pele-gelo { --pl-a: #123a56; --pl-b: #07121c; --pl-borda: #2f7ea8; --pl-luz: 120, 205, 255; --pl-texto: #ecf9ff; --pl-sub: #b7e0f2; --pl-retr: #081724; --pl-cor: #8fdcff; }
.ovl.pele-brasa { --pl-a: #45160a; --pl-b: #150a07; --pl-borda: #9a3d14; --pl-luz: 255, 135, 40; --pl-texto: #fff0e0; --pl-sub: #f2c9a4; --pl-retr: #1c0e08; --pl-cor: #ff9a3c; }
.ovl.pele-vazio { --pl-a: #2a1250; --pl-b: #0d0818; --pl-borda: #6038b0; --pl-luz: 165, 105, 255; --pl-texto: #f3eaff; --pl-sub: #cdbaee; --pl-retr: #130a24; --pl-cor: #b98aff; }
.ovl.pele-ouro { --pl-a: #4a3508; --pl-b: #17110a; --pl-borda: #a37a18; --pl-luz: 255, 208, 80; --pl-texto: #fff6dc; --pl-sub: #e8d6a2; --pl-retr: #1c150a; --pl-cor: #ffd45a; }

.ovl:is(.pele-veneno, .pele-gelo, .pele-brasa, .pele-vazio, .pele-ouro) .item {
  background: linear-gradient(180deg, var(--pl-a), var(--pl-b));
  border: 1px solid var(--pl-borda); border-left: 4px solid var(--acc);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), inset 0 0 14px rgba(var(--pl-luz), 0.3), inset 0 -3px 4px -1px rgba(var(--pl-luz), 0.7);
}
.ovl:is(.pele-veneno, .pele-gelo, .pele-brasa, .pele-vazio, .pele-ouro) .item .nome { color: var(--pl-texto); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(var(--pl-luz), 0.55); }
.ovl:is(.pele-veneno, .pele-gelo, .pele-brasa, .pele-vazio, .pele-ouro) .item .contagem { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(var(--pl-luz), 0.6); }
.ovl:is(.pele-veneno, .pele-gelo, .pele-brasa, .pele-vazio, .pele-ouro) .item .contagem span { color: var(--pl-sub); }
.ovl:is(.pele-veneno, .pele-gelo, .pele-brasa, .pele-vazio, .pele-ouro) .item .retrato { border: 2px solid var(--pl-borda); background: var(--pl-retr); box-shadow: 0 0 8px rgba(var(--pl-luz), 0.5); }
.ovl:is(.pele-veneno, .pele-gelo, .pele-brasa, .pele-vazio, .pele-ouro) .item.desafio {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--pl-luz), 0.6), 0 0 18px rgba(var(--pl-luz), 0.5), inset 0 0 16px rgba(var(--pl-luz), 0.45);
  animation: ovl-entra 260ms ease-out, pele-pulso 2.4s ease-in-out infinite;
}
.ovl:is(.pele-veneno, .pele-gelo, .pele-brasa, .pele-vazio, .pele-ouro).sem-moldura .item.desafio {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), inset 0 0 14px rgba(var(--pl-luz), 0.3); animation: ovl-entra 260ms ease-out;
}
@keyframes pele-pulso {
  0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--pl-luz), 0.55), 0 0 14px rgba(var(--pl-luz), 0.35), inset 0 0 14px rgba(var(--pl-luz), 0.35); }
  50% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--pl-luz), 0.95), 0 0 28px rgba(var(--pl-luz), 0.7), inset 0 0 20px rgba(var(--pl-luz), 0.55); }
}

/* veneno: as gotas do sangue, em verde ácido */
.ovl.pele-veneno .item > .gota {
  background:
    radial-gradient(circle at 34% 30%, rgba(235, 255, 215, 0.95) 0 8%, transparent 24%),
    radial-gradient(circle at 42% 42%, #7be85a, #2f9a24 52%, #0f4a0e);
}
.ovl.pele-veneno .item > .gota::before { background: linear-gradient(#1f7a1c, #36a82a); }

/* faíscas (gelo, brasa, vazio, ouro): <i class="faisca"> criadas por sangue.js; --x/--s sorteados a cada ciclo, --d/--atraso próprios */
.faisca { display: none; }
.ovl:is(.pele-gelo, .pele-brasa, .pele-vazio, .pele-ouro) .item > .faisca {
  display: block; position: absolute; z-index: 2; pointer-events: none; opacity: 0;
  left: var(--x, 50%); width: calc(4px * var(--s, 1)); height: calc(4px * var(--s, 1)); margin-left: calc(-2px * var(--s, 1));
  background: var(--pl-cor); border-radius: 50%; box-shadow: 0 0 6px 1px rgba(var(--pl-luz), 0.85);
}
/* brasa e vazio: sobem da beirada de baixo, balançando de lado, e apagam */
.ovl:is(.pele-brasa, .pele-vazio) .item > .faisca { top: 85%; animation: faisca-sobe var(--d, 4s) ease-out var(--atraso, 0s) infinite; }
.ovl.pele-vazio .item > .faisca { border-radius: 40%; }
@keyframes faisca-sobe {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 6px), calc(-34px * var(--s, 1))) scale(0.2); }
}
/* gelo: flocos que descem devagar por dentro da pílula, girando */
.ovl.pele-gelo .item > .faisca {
  top: 8%; border-radius: 1px; background: #f2fbff;
  animation: faisca-cai var(--d, 5s) linear var(--atraso, 0s) infinite;
}
@keyframes faisca-cai {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  15% { opacity: 1; }
  85% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx, -5px), 26px) rotate(180deg); }
}
/* ouro: brilhinhos em cruz que acendem e apagam no lugar */
.ovl.pele-ouro .item > .faisca {
  top: calc(18% + var(--y, 0%)); width: calc(9px * var(--s, 1)); height: calc(9px * var(--s, 1)); margin-left: calc(-4.5px * var(--s, 1));
  background: radial-gradient(circle, #fff 0 14%, transparent 15%), linear-gradient(90deg, transparent 38%, #fff 38% 62%, transparent 62%), linear-gradient(0deg, transparent 38%, #fff 38% 62%, transparent 62%);
  border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 3px rgba(var(--pl-luz), 0.95));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: faisca-brilha var(--d, 3.6s) ease-in-out var(--atraso, 0s) infinite;
}
@keyframes faisca-brilha {
  0%, 55%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  72% { opacity: 1; transform: scale(1.1) rotate(45deg); }
  88% { opacity: 0.4; transform: scale(0.6) rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovl.pele-neon .item,
  html:not([data-overlay-tv]) .ovl.pele-holo .item::before { animation: none; }
  html:not([data-overlay-tv]) .ovl:is(.pele-sangue, .pele-veneno) .item > .gota,
  html:not([data-overlay-tv]) .ovl:is(.pele-sangue, .pele-veneno) .item > .gota::before,
  html:not([data-overlay-tv]) .ovl .item > .faisca { animation: none; }
  html:not([data-overlay-tv]) .ovl:is(.pele-sangue, .pele-veneno, .pele-gelo, .pele-brasa, .pele-vazio, .pele-ouro) .item.desafio { animation: none; }
}

/* =====================================================================
   Layout "lateral": pilha vertical de placas inclinadas, o MESMO desenho do Lateral do
   Streak (overlay-streak.css): paralelogramo com borda de luz, miolo de vidro escuro
   tingido pela cor do item e um reflexo que varre de tempos em tempos.
   Não usa .item (que as peles pintam como pílula) e sim .lateral-item > .placa: a pele
   escolhida só troca o "material" da placa (::before = borda, ::after = miolo).
   Pixel e ticket mudam a FORMA do item (cantos em degrau, entalhes), e aqui a forma é
   sempre o paralelogramo: ficam de fora deste layout (PELES_POR_LAYOUT em web/queue.js).
   Cores: placa na cor de destaque (survivor, na de survivor); número na cor do número.
   ===================================================================== */
.ovl.lateral { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; }

/* "N na fila": aba dourada, a mesma do título do ranking do Streak. */
/* Direção horizontal: as mesmas placas deitadas numa fileira (o "N na fila" abre a fileira). */
.ovl.lateral.horizontal { flex-direction: row; align-items: flex-start; gap: 12px; }
.ovl.lateral.horizontal .placa { width: 244px; }
.ovl.lateral.horizontal .total, .ovl.lateral.horizontal .mais { align-self: flex-start; }
.ovl.lateral.horizontal .lateral-item { animation-name: lateral-entra-h; }
@keyframes lateral-entra-h {
  from { opacity: 0; transform: translateY(-18px) skewX(-8deg); }
  to { opacity: 1; transform: none; }
}

.ovl.lateral .total {
  gap: 9px; padding: 7px 26px 8px 18px; border: 0; border-radius: 0;
  background: linear-gradient(180deg, #fff4c6, #f2c64f 52%, #b8841f);
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}
.ovl.lateral .total b { font-size: 20px; color: #20180a; text-shadow: none; }
.ovl.lateral .total span { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #20180a; text-shadow: none; }
.ovl.lateral .mais {
  padding: 5px 24px 5px 20px; border: 0; border-radius: 0; font-weight: 700; letter-spacing: 0.1em;
  background: rgba(10, 12, 18, 0.88);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.ovl.lateral .lateral-item {
  --cor: var(--destaque);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  animation: lateral-entra 520ms cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.ovl.lateral .lateral-item.survivor { --cor: var(--surv); }
@keyframes lateral-entra {
  from { opacity: 0; transform: translateX(-34px) skewX(-8deg); }
  to { opacity: 1; transform: none; }
}

/* A placa. Material padrão (pele clássica): borda de luz + miolo de vidro escuro. */
.ovl.lateral .placa {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px;
  width: 276px; height: 42px; padding: 0 22px 0 24px; 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));
}
.ovl.lateral .placa::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%);
}
.ovl.lateral .placa::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(transparent, transparent),
    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: lateral-varre 5.5s ease-in-out infinite;
}
.ovl.lateral .lateral-item:nth-child(even) .placa::after { animation-delay: 1.4s; }
@keyframes lateral-varre {
  0%, 55% { background-position: 150% 0, 0 0, 0 0; }
  100% { background-position: -50% 0, 0 0, 0 0; }
}

.ovl.lateral .placa .retrato {
  width: 28px; height: 28px; font-size: 12px; border: 2px solid var(--cor); background: #1c232c;
  box-shadow: 0 0 8px color-mix(in srgb, var(--cor) 55%, transparent);
}
.ovl.lateral.quadrado .placa .retrato { border-radius: 8px; }
.ovl.lateral .placa .nome {
  flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
}
.ovl.lateral .placa .contagem {
  flex: 0 0 auto; padding-left: 6px; font-size: 24px; line-height: 1;
  text-shadow: 0 0 4px color-mix(in srgb, var(--contagem) 70%, transparent), 0 0 12px var(--cor), 0 0 24px color-mix(in srgb, var(--cor) 70%, transparent);
}
.ovl.lateral .placa .contagem span { font-size: 14px; font-weight: 600; color: #cfd5da; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }

/* Build (as perks) do desafio: fileira embaixo da placa. */
.ovl.lateral .lateral-item .perks { gap: 5px; margin: 0 0 2px 24px; }
.ovl.lateral .lateral-item .perks img {
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--cor) 60%, transparent); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}
.ovl.lateral.quadrado .lateral-item .perks img { border-radius: 5px; }

/* Desafio: placa mais acesa (halo maior, miolo mais tingido, retrato com anel branco). */
.ovl.lateral .lateral-item.desafio .placa {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px color-mix(in srgb, var(--cor) 72%, transparent));
}
.ovl.lateral .lateral-item.desafio .placa::after {
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.26) 50%, transparent 60%) 150% 0 / 260% 100% no-repeat,
    linear-gradient(transparent, transparent),
    linear-gradient(180deg, color-mix(in srgb, var(--cor) 58%, rgba(12, 14, 20, 0.94)), color-mix(in srgb, var(--cor) 24%, rgba(8, 9, 14, 0.96)));
}
.ovl.lateral .lateral-item.desafio .retrato { border-color: #fff; box-shadow: 0 0 12px var(--cor); }
/* Moldura de destaque desligada: desafio igual a um pedido comum (a tarja da cor de survivor continua). */
.ovl.lateral.sem-moldura .lateral-item.desafio .placa {
  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));
}
.ovl.lateral.sem-moldura .lateral-item.desafio .placa::after {
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.2) 50%, transparent 60%) 150% 0 / 260% 100% no-repeat,
    linear-gradient(transparent, transparent),
    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)));
}
.ovl.lateral.sem-moldura .lateral-item.desafio .retrato { border-color: var(--cor); box-shadow: 0 0 8px color-mix(in srgb, var(--cor) 55%, transparent); }

/* ---------------------------------------------------------- peles = materiais -- */

/* contorno: miolo quase transparente, só o filete colorido (deixa o jogo aparecer). */
.ovl.lateral.pele-contorno .placa { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)); }
.ovl.lateral.pele-contorno .placa::before { background: var(--cor); }
.ovl.lateral.pele-contorno .placa::after,
.ovl.lateral.pele-contorno .lateral-item.desafio .placa::after,
.ovl.lateral.pele-contorno.sem-moldura .lateral-item.desafio .placa::after { inset: 2px; animation: none; background: rgba(12, 17, 20, 0.55); }
.ovl.lateral.pele-contorno .lateral-item.desafio .placa::after { background: linear-gradient(90deg, color-mix(in srgb, var(--cor) 20%, transparent), rgba(12, 17, 20, 0.6)); }
.ovl.lateral.pele-contorno.sem-moldura .lateral-item.desafio .placa::after { background: rgba(12, 17, 20, 0.55); }
.ovl.lateral.pele-contorno .lateral-item.desafio .placa,
.ovl.lateral.pele-contorno.sem-moldura .lateral-item.desafio .placa { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)); }

/* sólido: a "faixa" do Streak — contorno escuro, placa cheia na cor do item, texto escuro. */
.ovl.lateral.pele-solido .placa,
.ovl.lateral.pele-solido .lateral-item.desafio .placa,
.ovl.lateral.pele-solido.sem-moldura .lateral-item.desafio .placa { filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.6)); }
.ovl.lateral.pele-solido .placa::before { background: #08090c; }
.ovl.lateral.pele-solido .placa::after,
.ovl.lateral.pele-solido .lateral-item.desafio .placa::after,
.ovl.lateral.pele-solido.sem-moldura .lateral-item.desafio .placa::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.28) 0 46%, transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--cor) 92%, #fff), color-mix(in srgb, var(--cor) 72%, #000));
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}
.ovl.lateral.pele-solido .placa .nome,
.ovl.lateral.pele-solido .placa .contagem,
.ovl.lateral.pele-solido .placa .contagem span { color: #0c1114; text-shadow: none; }
.ovl.lateral.pele-solido .placa .retrato,
.ovl.lateral.pele-solido .lateral-item.desafio .retrato { border-color: rgba(12, 17, 20, 0.55); background: rgba(12, 17, 20, 0.18); box-shadow: none; }
.ovl.lateral.pele-solido .lateral-item.desafio .retrato { border-color: #0c1114; }

/* neon: tubo aceso na borda, halo e piscar raro. */
.ovl.lateral.pele-neon .placa {
  filter: drop-shadow(0 0 3px var(--cor)) drop-shadow(0 0 14px color-mix(in srgb, var(--cor) 70%, transparent));
  animation: neon-pisca 8s linear infinite;
}
.ovl.lateral.pele-neon .lateral-item.desafio .placa {
  filter: drop-shadow(0 0 4px var(--cor)) drop-shadow(0 0 22px var(--cor)) drop-shadow(0 0 38px color-mix(in srgb, var(--cor) 55%, transparent));
}
.ovl.lateral.pele-neon.sem-moldura .lateral-item.desafio .placa {
  filter: drop-shadow(0 0 3px var(--cor)) drop-shadow(0 0 14px color-mix(in srgb, var(--cor) 70%, transparent));
}
.ovl.lateral.pele-neon .placa::before { background: color-mix(in srgb, var(--cor) 80%, #fff); }
.ovl.lateral.pele-neon .placa::after,
.ovl.lateral.pele-neon .lateral-item.desafio .placa::after,
.ovl.lateral.pele-neon.sem-moldura .lateral-item.desafio .placa::after {
  inset: 2px; animation: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 24%, rgba(6, 8, 12, 0.72)), rgba(6, 8, 12, 0.72));
}
.ovl.lateral.pele-neon .placa .nome { text-shadow: 0 0 3px #fff, 0 0 9px var(--cor), 0 0 18px var(--cor); }
.ovl.lateral.pele-neon .placa .contagem { text-shadow: 0 0 3px #fff, 0 0 8px var(--contagem), 0 0 16px var(--contagem); }
.ovl.lateral.pele-neon .placa .retrato,
.ovl.lateral.pele-neon .lateral-item.desafio .retrato { border-color: var(--cor); box-shadow: 0 0 8px var(--cor); }

/* vidro: fosco, embaça o que está atrás; filete da cor do item embaixo. Sem filter na placa:
   um filter em volta faria o backdrop-filter enxergar só a própria placa (o jogo não embaçaria). */
.ovl.lateral.pele-vidro .placa,
.ovl.lateral.pele-vidro .lateral-item.desafio .placa,
.ovl.lateral.pele-vidro.sem-moldura .lateral-item.desafio .placa { filter: none; }
.ovl.lateral.pele-vidro .placa::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.3) 55%, color-mix(in srgb, var(--cor) 85%, transparent)); }
.ovl.lateral.pele-vidro .placa::after,
.ovl.lateral.pele-vidro .lateral-item.desafio .placa::after,
.ovl.lateral.pele-vidro.sem-moldura .lateral-item.desafio .placa::after {
  animation: none;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--cor) 70%, transparent) 0 3px, transparent 3px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.07) 70%);
  /* (sem backdrop-filter: no OBS não há fundo a embaçar e ele pesa na GPU por pílula) */
}
.ovl.lateral.pele-vidro .lateral-item.desafio .placa::after {
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--cor) 70%, transparent) 0 3px, transparent 3px),
    linear-gradient(135deg, color-mix(in srgb, var(--cor) 38%, rgba(255, 255, 255, 0.2)), rgba(255, 255, 255, 0.07) 70%);
}
.ovl.lateral.pele-vidro .placa .nome,
.ovl.lateral.pele-vidro .placa .contagem { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.ovl.lateral.pele-vidro .placa .nome { color: #fff; }
.ovl.lateral.pele-vidro .placa .retrato,
.ovl.lateral.pele-vidro .lateral-item.desafio .retrato { border: 1.5px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.15); box-shadow: none; }

/* holo: borda iridescente girando em volta de um miolo escuro. */
.ovl.lateral.pele-holo .placa,
.ovl.lateral.pele-holo .lateral-item.desafio .placa { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(170, 120, 255, 0.35)); }
.ovl.lateral.pele-holo .lateral-item.desafio .placa { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 20px rgba(170, 120, 255, 0.6)); }
.ovl.lateral.pele-holo .placa::before {
  background: conic-gradient(from var(--holo-ang), #ff6ec7, #ffe66d, #6effc4, #6ec7ff, #b76eff, #ff6ec7);
  animation: holo-gira 4.5s linear infinite;
}
.ovl.lateral.pele-holo .placa::after,
.ovl.lateral.pele-holo.sem-moldura .lateral-item.desafio .placa::after {
  inset: 2px;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%) 150% 0 / 260% 100% no-repeat,
    linear-gradient(transparent, transparent),
    rgba(9, 11, 18, 0.92);
}
.ovl.lateral.pele-holo .lateral-item.desafio .placa::after {
  inset: 2px;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%) 150% 0 / 260% 100% no-repeat,
    linear-gradient(transparent, transparent),
    linear-gradient(110deg, color-mix(in srgb, var(--cor) 24%, rgba(9, 11, 18, 0.92)), rgba(9, 11, 18, 0.92));
}
.ovl.lateral.pele-holo.sem-moldura .lateral-item.desafio .placa { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(170, 120, 255, 0.35)); }
.ovl.lateral.pele-holo .placa .nome,
.ovl.lateral.pele-holo .placa .contagem { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }

/* sangue: couro escuro manchado de vermelho (sem as gotas: elas caem da pílula e, numa pilha, cairiam em cima da placa de baixo). */
.ovl.lateral.pele-sangue .placa,
.ovl.lateral.pele-sangue .lateral-item.desafio .placa { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 8px rgba(190, 20, 28, 0.4)); }
.ovl.lateral.pele-sangue .lateral-item.desafio .placa { animation: lateral-sangue-pulso 2.4s ease-in-out infinite; }
.ovl.lateral.pele-sangue.sem-moldura .lateral-item.desafio .placa { animation: none; }
.ovl.lateral.pele-sangue .placa::before { background: linear-gradient(100deg, #ff9d8f 0%, #b3121f 24%, #5b1015 62%, #a3101a 100%); }
.ovl.lateral.pele-sangue .placa::after,
.ovl.lateral.pele-sangue.sem-moldura .lateral-item.desafio .placa::after {
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 150, 140, 0.16) 50%, transparent 60%) 150% 0 / 260% 100% no-repeat,
    radial-gradient(130% 200% at 0% 50%, rgba(160, 12, 20, 0.4), transparent 70%),
    linear-gradient(180deg, #2b0609, #12060a);
}
.ovl.lateral.pele-sangue .lateral-item.desafio .placa::after {
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 150, 140, 0.2) 50%, transparent 60%) 150% 0 / 260% 100% no-repeat,
    radial-gradient(130% 200% at 0% 50%, rgba(190, 14, 22, 0.55), transparent 70%),
    linear-gradient(180deg, #3b080c, #16070b);
}
@keyframes lateral-sangue-pulso {
  0%, 100% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 8px rgba(190, 20, 28, 0.4)); }
  50% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 22px rgba(225, 30, 38, 0.85)); }
}
.ovl.lateral.pele-sangue .placa .nome { color: #f4e6dc; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(190, 20, 28, 0.55); }
.ovl.lateral.pele-sangue .placa .contagem { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(190, 20, 28, 0.6); }
.ovl.lateral.pele-sangue .placa .contagem span { color: #d5b9ae; }
.ovl.lateral.pele-sangue .placa .retrato,
.ovl.lateral.pele-sangue .lateral-item.desafio .retrato { border-color: #a3101a; background: #1a0a0d; box-shadow: 0 0 8px rgba(190, 20, 28, 0.5); }

/* ------------------------------------------------------- destaque animado -- */
/* Mesmos dois enfeites do resto da fila, adaptados à placa (box-shadow não segue o recorte
   inclinado, então o halo é drop-shadow e o reflexo é um elemento próprio, .reflexo). */
.ovl.lateral .placa .reflexo {
  display: none; position: absolute; inset: 1.5px; pointer-events: none;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}
.ovl.lateral.enfeite-brilho .lateral-item.desafio .reflexo,
.ovl.lateral.enfeite-brilho.alcance-todos .lateral-item .reflexo {
  display: block; animation: lateral-reflexo 3.4s ease-in-out infinite;
  background: linear-gradient(100deg, transparent 35%, var(--enfeite) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat;
}
.ovl.lateral.enfeite-brilho.alcance-todos .lateral-item.desafio .reflexo { animation-duration: 2.4s; }
.ovl.lateral.enfeite-brilho .lateral-item.desafio .placa,
.ovl.lateral.enfeite-brilho.alcance-todos .lateral-item .placa {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 3px var(--enfeite)) drop-shadow(0 0 14px color-mix(in srgb, var(--enfeite) 65%, transparent));
}
@keyframes lateral-reflexo {
  0%, 55% { background-position: 150% 0; }
  85%, 100% { background-position: -50% 0; }
}
.ovl.lateral.enfeite-pulso .lateral-item.desafio .placa,
.ovl.lateral.enfeite-pulso.alcance-todos .lateral-item .placa { animation: lateral-pulso 1.6s ease-in-out infinite; }
@keyframes lateral-pulso {
  0%, 100% { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 3px var(--enfeite)) drop-shadow(0 0 12px color-mix(in srgb, var(--enfeite) 60%, transparent)); }
  50% { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px var(--enfeite)) drop-shadow(0 0 30px var(--enfeite)); }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .ovl.lateral .lateral-item,
  html:not([data-overlay-tv]) .ovl.lateral .placa,
  html:not([data-overlay-tv]) .ovl.lateral .placa::before,
  html:not([data-overlay-tv]) .ovl.lateral .placa::after,
  html:not([data-overlay-tv]) .ovl.lateral .placa .reflexo { animation: none !important; }
  html:not([data-overlay-tv]) .ovl.lateral.enfeite-brilho .reflexo { display: none !important; }
}