/* ==========================================================================
   PLACAR — layout próprio. Carrega depois de overlay.css e reaproveita dele
   as fontes, os tokens, .topography, .sweep, .corners, .socials,
   .supporters, os chanfros (.ch-tl-br / .ch-tr-bl) e os keyframes.
   Só o que é exclusivo desta tela mora aqui.

   Coordenadas em cqw sobre a base de 1920×1080 (1cqw = 19.2px).
   ========================================================================== */

/* O peso dos números do placar, o mesmo que a fonte de texto do OBS usava.
   Só esta tela usa, então a declaração mora aqui e não em base.css.      */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: block;
}

/* --- Fundo ---------------------------------------------------------------
   A base radial fica no próprio .broadcast porque .topography tem
   z-index -1: assim o mapa passa por cima do gradiente e por baixo do
   resto. Nesta tela o centro do radial é 50%, não 26% — placar é a única
   tela do pacote onde assimetria seria erro.                             */
.broadcast[data-scene="placar"] {
  background-image: radial-gradient(120% 96% at 50% 38%, #0e1520 0%, #080c13 46%, #04070b 100%);
}
[data-scene="placar"] .topography { --pace: 150s; opacity: .05; }

/* Retícula de 96px e os dois halos laterais, espelhados.

   Os halos preenchem a região central inteira, de fita a fita: 7.813cqw
   (150px) até 48.438cqw (930px). Antes eram uma faixa solta de 640px que
   começava e morria no meio do nada, e as duas bordas horizontais do
   gradiente ficavam à mostra. Agora quem fecha as pontas são as fitas,
   então o corte vira intenção.                                          */
.field {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(100deg, #f593101a, transparent 60%),
    linear-gradient(260deg, #f593101a, transparent 60%),
    repeating-linear-gradient(0deg, #b7bdc50b 0 .052cqw, transparent .052cqw 5cqw),
    repeating-linear-gradient(90deg, #b7bdc50b 0 .052cqw, transparent .052cqw 5cqw);
  background-size: 54% 40.625cqw, 54% 40.625cqw, auto, auto;
  background-position: left 7.813cqw, right 7.813cqw, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}

/* Eixo central: o fiel da balança entre as duas equipes. */
.axis {
  position: absolute;
  left: 50%; top: 7.813cqw; bottom: 10.417cqw;
  width: .052cqw;
  background-image: linear-gradient(180deg, transparent, #b7bdc538 16%, #b7bdc538 84%, transparent);
}

.vignette {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(130% 100% at 50% 48%, transparent 32%, #04070bdb 100%);
}

/* --- Fita ----------------------------------------------------------------
   Do sistema de design, e são três regras, não uma:

   1. Gradiente repetido a 135°, barras grossas — não hachura fina.
   2. A fita nunca encosta nas bordas: uma máscara apaga as pontas.
   3. Dourada é aviso; steel a 10% é decoração estrutural.

   Duas faixas atravessando a tela inteira são estrutura, não aviso, então
   estas vão de steel. Era a regra 3 que estava sendo quebrada antes: ouro
   em toda a largura, duas vezes, é o que fazia a faixa gritar.

   O passo do crawl sai do período: num gradiente a 135° o eixo está a 45°
   da horizontal, então andar um período custa período × √2 em x. Quatro
   períodos fecham o loop sem salto.                                     */
.rail {
  --tape-p: 2.6cqw;                                  /* período no eixo do gradiente */
  --tape-bar: 1.2cqw;                                /* barra — ~46% do período */
  --tape-ink: #b7bdc51a;                             /* steel 10% */
  position: absolute;
  left: 0; right: 0;
  height: 1.15cqw;
  --tape-volta: calc(var(--tape-p) * 1.41421356 * 4);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 13%, #000 87%, #0000);
          mask-image: linear-gradient(90deg, #0000, #000 13%, #000 87%, #0000);
}
.rail::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: calc(var(--tape-volta) * -1);
  background-image: repeating-linear-gradient(135deg,
    transparent 0 .05cqw,
    var(--tape-ink) .12cqw var(--tape-bar),
    transparent calc(var(--tape-bar) + .07cqw) var(--tape-p));
  will-change: transform;
  animation: railCrawl 44s linear infinite;
}
.rail-top { top: 7.813cqw; }
.rail-bottom { bottom: 7.813cqw; }
.rail-bottom::before { animation-direction: reverse; }
/* Sem background-position: a tela tem 1920px, que não é múltiplo do passo
   (70,6px), e a emenda do fundo repetido atravessaria a fita. O padrão mora
   numa peça mais comprida, sem repetição, que anda por transform. */
@keyframes railCrawl {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--tape-volta), 0, 0); }
}

/* --- Moldura da tela ----------------------------------------------------- */
[data-scene="placar"] .sweep {
  background-image: linear-gradient(180deg, #f5931000 0%, #f593100a 72%, #f5931017 100%);
  animation-duration: 13s;
}
[data-scene="placar"] .sweep::after {
  background-image: linear-gradient(90deg, transparent, #f5931080 22%, #f5931047 64%, transparent);
}
[data-scene="placar"] .corners {
  top: 2.083cqw; left: 2.292cqw; right: 2.292cqw;
  bottom: auto; height: 2.917cqw;
}
[data-scene="placar"] .corners i { border-color: #f5931099; }
[data-scene="placar"] .corners i:nth-child(1) { border-top-width: .104cqw; border-left-width: .104cqw; }
[data-scene="placar"] .corners i:nth-child(2) { border-top-width: .104cqw; border-right-width: .104cqw; }

.headrule {
  position: absolute;
  left: 0; right: 0; top: 9.063cqw;
  height: .469cqw;
  background-image:
    linear-gradient(#161c25, #161c25),
    repeating-linear-gradient(90deg, #161c25 0 .052cqw, transparent .052cqw 1.667cqw);
  background-size: 100% .052cqw, auto;
  background-repeat: no-repeat, repeat;
}

/* --- Marca nos dois cantos ----------------------------------------------- */
[data-scene="placar"] .brand {
  top: 3.021cqw; left: 3.8cqw;
  width: 11cqw; height: 4.4cqw;
}
[data-scene="placar"] .brand-end { left: auto; right: 5.5cqw; }

/* Selo e relógio no canto superior direito, como nas outras telas. Ancorados
   pela direita, na mesma margem de 5.5cqw da marca, e alinhados pelo centro
   dela. O ponto continua vermelho e pulsando, só troca o texto.         */
[data-scene="placar"] .live {
  top: 3.8cqw;
  left: auto;
  right: 21.8cqw;
}
[data-scene="placar"] .broadcast-clock {
  top: 3.8cqw;
  left: auto;
  right: 5.5cqw;
}

/* --- Rótulo PLACAR ------------------------------------------------------- */
.board-label {
  position: absolute;
  left: 50%; top: 10.938cqw;
  transform: translateX(-50%);
  margin: 0;
  display: flex; align-items: center; gap: .729cqw;
}
.board-label span {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: .885cqw;
  letter-spacing: .354cqw;
  padding-left: .354cqw;
  color: var(--gold);
}
.board-label i { width: .469cqw; height: .469cqw; transform: rotate(45deg); }
.board-label i:first-child { border-left: .104cqw solid var(--gold); border-bottom: .104cqw solid var(--gold); }
.board-label i:last-child  { border-right: .104cqw solid var(--gold); border-top: .104cqw solid var(--gold); }

/* --- Equipes -------------------------------------------------------------
   Sem estado, a moldura fica vazia e continua marcando onde o logo cai; o
   chanfro dourado faz o canto cortado valer como acento.                 */
.team { position: absolute; top: 15.729cqw; width: 28.958cqw; }
.team-a { left: 4.583cqw; }
.team-b { right: 4.583cqw; }

.team-frame {
  position: relative;
  height: 19.375cqw;
  border: .086cqw solid #2a323d;
  --ch: 1.146cqw;
  --bw: .086cqw;
  --ch-edge: #f59310a6;
}
.frame-fill { position: absolute; inset: 0; }
.team-a .frame-fill {
  background-image:
    repeating-linear-gradient(115deg, #f5931009 0 .104cqw, transparent .104cqw .469cqw),
    linear-gradient(140deg, #121822f0, #070a10f0);
}
.team-b .frame-fill {
  background-image:
    repeating-linear-gradient(65deg, #f5931009 0 .104cqw, transparent .104cqw .469cqw),
    linear-gradient(220deg, #121822f0, #070a10f0);
}
.frame-bar { position: absolute; left: 0; right: 0; top: 0; height: .208cqw; }
.team-a .frame-bar { background-image: linear-gradient(90deg, #f59310, #f5931014); }
.team-b .frame-bar { background-image: linear-gradient(270deg, #f59310, #f5931014); }

.frame-tick { position: absolute; background: #f593108c; }

/* Logo com respiro de 46px (2.396cqw) dentro do quadro de 556×372: a mesma
   zona de pouso que a fonte de imagem do OBS ocupava. `contain` aceita
   escudo quadrado e logo horizontal sem deformar. Fica por cima dos ticks —
   com logo no ar eles já cumpriram a função de guia.                     */
.team-logo {
  position: absolute;
  inset: 2.396cqw;
  width: calc(100% - 4.792cqw);
  height: calc(100% - 4.792cqw);
  object-fit: contain;
  filter: drop-shadow(0 .417cqw 1.042cqw #0009);
}
.team-logo[hidden] { display: none; }
.frame-tick-l { left: .833cqw;  top: 50%; width: .729cqw; height: .104cqw; }
.frame-tick-r { right: .833cqw; top: 50%; width: .729cqw; height: .104cqw; }
.frame-tick-b { left: 50%; bottom: .833cqw; width: .104cqw; height: .729cqw; }

/* --- Placa do nome -------------------------------------------------------
   Chanfro só no canto inferior de fora, traçado pela mesma técnica.      */
.team-plate { display: flex; align-items: stretch; margin-top: 1.354cqw; min-height: 5.417cqw; }

/* Mesma fita na versão de aviso: Tracer Gold, e a máscara é vertical
   porque aqui as pontas da fita são em cima e embaixo. */
.plate-stripe {
  width: 1.146cqw;
  flex: none;
  background-image: repeating-linear-gradient(135deg,
    transparent 0 .05cqw,
    var(--gold) .12cqw 1.2cqw,
    transparent 1.27cqw 2.6cqw);
  -webkit-mask-image: linear-gradient(180deg, #0000, #000 16%, #000 84%, #0000);
          mask-image: linear-gradient(180deg, #0000, #000 16%, #000 84%, #0000);
}

.plate-box {
  flex: 1;
  min-width: 0;
  border: .086cqw solid #2a323d;
  background-size: 1.042cqw 1.042cqw, auto;
  background-repeat: no-repeat, repeat;
  background-origin: border-box;
}
/* Nome: Barlow Condensed 800, o mesmo corpo da fonte do OBS (~104px de
   caixa). Sempre uma linha: nome longo encolhe pelo placar.js até caber,
   nunca quebra — duas linhas numa placa de 104px liam como dois nomes.

   Alinhado pela placa, não centrado: o da esquerda encosta à esquerda, o da
   direita à direita, e os dois guardam 24px da faixa listrada, que é o
   lado de onde o nome "sai".                                            */
.plate-box {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.team-a .plate-box { justify-content: flex-start; padding: 0 1.563cqw 0 1.25cqw; }
.team-b .plate-box { justify-content: flex-end;   padding: 0 1.25cqw 0 1.563cqw; }
.team-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 3.646cqw;
  line-height: 1;
  letter-spacing: .052cqw;
  color: #d2d5da;
  white-space: nowrap;
  /* Nome de time é sempre em caixa alta, em toda tela do pacote. */
  text-transform: uppercase;
}

.team-a .plate-box {
  border-left: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.042cqw), calc(100% - 1.042cqw) 100%, 0 100%);
  background-image:
    linear-gradient(-45deg, #2a323d calc(50% + .086cqw), transparent 0),
    linear-gradient(180deg, #111720eb, #080b11eb);
  background-position: bottom right, 0 0;
}
.team-b .plate-box {
  border-right: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 1.042cqw 100%, 0 calc(100% - 1.042cqw));
  background-image:
    linear-gradient(45deg, #2a323d calc(50% + .086cqw), transparent 0),
    linear-gradient(180deg, #111720eb, #080b11eb);
  background-position: bottom left, 0 0;
}

/* --- Centro: mostrador, VS e placar -------------------------------------- */
.versus {
  position: absolute;
  left: 50%; top: 16.771cqw;
  transform: translateX(-50%);
  width: 30cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Posicionado sem transform, senão o orbitSpin sobrescreve a centralização. */
.dial {
  position: absolute;
  left: calc(50% - 7.708cqw);
  top: 5.833cqw;
  width: 15.417cqw; height: 15.417cqw;
  border: .052cqw dashed #f593102b;
  border-radius: 50%;
  will-change: transform;
  animation: orbitSpin 56s linear infinite;
}
.vs {
  position: relative;
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: .521cqw;
}
.vs i { width: .104cqw; height: 1.354cqw; }
.vs i:first-child { background-image: linear-gradient(180deg, transparent, #3a414c); }
.vs i:last-child  { background-image: linear-gradient(0deg, transparent, #3a414c); }
.vs span {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 3.333cqw;
  line-height: 1;
  letter-spacing: .733cqw;
  padding-left: .733cqw;
  color: #48505c;
}

/* Chanfro nos quatro cantos: os dois pares de gradiente somados. */
.score {
  position: relative;
  margin-top: 2.292cqw;
  width: 24.583cqw;
  height: 9.479cqw;
  border: .086cqw solid #2a323d;
  --ch: .938cqw;
  --bw: .086cqw;
  --ch-edge: #2a323d;
  clip-path: polygon(
    0 var(--ch),
    var(--ch) 0,
    calc(100% - var(--ch)) 0,
    100% var(--ch),
    100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,
    var(--ch) 100%,
    0 calc(100% - var(--ch))
  );
  background-image:
    linear-gradient(45deg,  transparent calc(50% - var(--bw)), var(--ch-edge) 0),
    linear-gradient(45deg,  var(--ch-edge) calc(50% + var(--bw)), transparent 0),
    linear-gradient(-45deg, transparent calc(50% - var(--bw)), var(--ch-edge) 0),
    linear-gradient(-45deg, var(--ch-edge) calc(50% + var(--bw)), transparent 0),
    repeating-linear-gradient(115deg, #f5931007 0 .104cqw, transparent .104cqw .469cqw),
    linear-gradient(180deg, #111720f0, #06090ef5);
  background-size: var(--ch) var(--ch), var(--ch) var(--ch), var(--ch) var(--ch), var(--ch) var(--ch), auto, auto;
  background-position: top right, bottom left, top left, bottom right, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-origin: border-box;
}
/* Traço central: separa os dois números. Fica no centro exato da caixa —
   x 960, y 593 em 1920×1080.                                           */
.score-sep {
  position: absolute;
  left: 50%; top: 50%;
  width: 1.667cqw;
  height: .208cqw;
  transform: translate(-50%, -50%);
  background: #48505c;
}
/* Os dois números, um em cada metade da caixa, centrados nela. O traço
   fica no meio exato (x 960, y 593) e separa os dois.                    */
.score {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
}
.score-num {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 7.292cqw;
  line-height: 1;
  color: #d2d5da;
  font-variant-numeric: tabular-nums;
}
/* Ponto marcado: o número acende em ouro e volta. Só cor e escala — nada
   que mexa no layout da caixa ao redor.                                  */
.score-num.bump { animation: scoreBump .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes scoreBump {
  0%   { color: var(--gold); transform: scale(1.14); text-shadow: 0 0 1.5cqw #f5931080; }
  100% { color: #d2d5da; transform: scale(1); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .score-num.bump { animation: none; } }

.score::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: .156cqw;
  background-image: linear-gradient(90deg, #f5931019, #f59310 50%, #f5931019);
}

/* --- Rodapé --------------------------------------------------------------
   Mesma divisão do resto do pacote: canais à esquerda, apoio à direita.  */
.deck {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7.813cqw;
  border-top: .086cqw solid #2a323d;
  background-image:
    repeating-linear-gradient(115deg, #f5931008 0 .104cqw, transparent .104cqw .521cqw),
    linear-gradient(180deg, #11161ff5, #090d13fa);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.583cqw;
}
[data-scene="placar"] .socials { position: static; }
[data-scene="placar"] .supporters { position: relative; right: auto; bottom: auto; }