/* Componentes da tela inicial e da tela de partida. * * Separado de `estilo.css` porque aquele é o sistema — tokens, cards, números, * zonas — e este é a montagem de duas telas. Quem for trocar a cor da marca mexe * lá; quem for mexer no player mexe aqui. * * Depende dos tokens de `estilo.css`, que precisa vir antes no . */ /* ═══ Grade de partidas ══════════════════════════════════════════════════ * * A tela é uma grade de vídeos, não uma tabela. A tabela pressupunha quadra e * nome de jogador — dois dados que podem não existir a tempo. O frame do vídeo * existe sempre, é o que identifica a partida de relance, e é o que faz a página * parecer o que ela é: um catálogo de jogo analisado. */ /* `auto-fill`, não `auto-fit`. Com `auto-fit`, um dia de 2 partidas esticava os cards para a linha inteira e eles saíam com o dobro da altura dos outros — a página perdia a régua. Dois espaços vazios no dia da final custam menos que cards de tamanhos diferentes na mesma rolagem, e agora a faixa de números segura o topo da página de qualquer jeito. */ .grade-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; } .card-video { position: relative; display: block; border-radius: var(--raio); overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); aspect-ratio: 16 / 10; box-shadow: var(--sombra); transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao); } .card-video:hover { border-color: var(--rm-vermelho-borda); transform: translateY(-3px); box-shadow: 0 10px 30px -8px rgba(255, 0, 0, 0.22), var(--sombra); } /* ── O preview, desfocado até o hover ───────────────────────────────────── * * Desfocado no repouso e nítido ao passar o mouse. Além do efeito, resolve dois * problemas reais: um frame parado de quadra vazia é feio, e o desfoque dá um * fundo uniforme sobre o qual o texto branco se lê sem precisar de tarja. * * `scale(1.06)` junto com o blur porque desfocar recorta a borda do elemento e * deixaria uma orla clara nas bordas do card. */ .card-video video, .card-video .capa-vazia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(5px) saturate(0.9) brightness(0.92); transform: scale(1.06); transition: filter 420ms cubic-bezier(0.33, 1, 0.68, 1), transform 420ms cubic-bezier(0.33, 1, 0.68, 1); pointer-events: none; } .card-video:hover video, .card-video:focus-visible video, .card-video:hover .capa-vazia { filter: blur(0) saturate(1.05) brightness(1); transform: scale(1.02); } .capa-vazia { background: linear-gradient(150deg, var(--superficie-3), var(--superficie)); } /* Véu de baixo para cima: é o que garante contraste do texto sobre qualquer frame, inclusive quadra clara ao sol. */ .card-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(8, 8, 10, 0.42) 0%, rgba(8, 8, 10, 0.04) 36%, rgba(8, 8, 10, 0.78) 100% ); pointer-events: none; transition: background var(--transicao); } .card-video:hover::after { background: linear-gradient( 180deg, rgba(8, 8, 10, 0.34) 0%, rgba(8, 8, 10, 0) 40%, rgba(8, 8, 10, 0.86) 100% ); } .card-video .conteudo { position: absolute; inset: auto 0 0 0; padding: 12px 15px 13px; z-index: 1; } .card-video .topo { position: absolute; inset: 12px 14px auto 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 1; } .hora-video { font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); } .play-flutuante { position: absolute; /* Centro do card inteiro. Era `inset: 0 0 auto 0; height: 56%`, ajustado para quando o card tinha o bloco de confronto ocupando a metade de baixo: centrar nos 56% de cima punha o play no meio do espaço que sobrava. Com o confronto removido, esses 56% deixaram o botão visivelmente alto. */ inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; } .play-flutuante i { width: 46px; height: 46px; border-radius: 50%; background: var(--rm-vermelho); color: #fff; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 16px; padding-left: 3px; box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4); transform: scale(0.9); opacity: 0.86; transition: transform var(--transicao), opacity var(--transicao); } .card-video:hover .play-flutuante i { transform: scale(1); opacity: 1; } .sem-nome { color: rgba(255, 255, 255, 0.6); font-weight: 500; font-style: italic; } .meta-video { /* Era a segunda linha do card, abaixo do confronto. Virou a única, então sobe de tamanho e ganha contraste — texto de 10px cinza fazia sentido como legenda de outra coisa, não como a informação principal. */ margin-top: 0; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); } /* Selo de IA em cada card: é a peça que faz o catálogo virar propaganda. */ .selo-ia { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 20px; background: rgba(255, 0, 0, 0.9); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .selo-ia.pendente { background: rgba(8, 8, 10, 0.7); border: 1px solid rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.8); } /* --- agrupamento por dia --- */ .dia { margin-bottom: 34px; } .dia:first-child { margin-top: 40px; } .cabecalho-dia { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 800; font-style: italic; margin: 0 0 14px; color: var(--texto); text-transform: uppercase; letter-spacing: 0.06em; } .cabecalho-dia::before { content: ""; width: 3px; height: 15px; background: var(--rm-vermelho); border-radius: 2px; flex: none; } .cabecalho-dia::after { content: ""; flex: 1; height: 1px; background: var(--borda); } .contagem-dia { font-size: 10.5px; font-weight: 800; font-style: normal; color: var(--rm-vermelho-claro); background: var(--rm-vermelho-fundo); border-radius: 20px; padding: 1px 8px; } /* ═══ Tela da partida ════════════════════════════════════════════════════ */ .voltar-link { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-3); transition: color var(--transicao); } .voltar-link:hover { color: var(--texto); } .palco-e-controles { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; margin-top: 24px; } /* A janela é fixa e o palco se move atrás dela. Vídeo e overlay são irmãos dentro do palco: recebem a mesma `transform` e continuam alinhados sem o código de desenho saber que existe recorte. Mesma escolha do `PalcoRecorte` do argos — o compositor da GPU resolve, e o custo por frame é escrever uma string de estilo em vez de um blit da resolução inteira. Pressupõe fonte 16:9: com `contain` numa janela 16:9 o vídeo preenche exato, e é isso que faz a coordenada em fração 0..1 mapear direto na janela. */ .janela-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid var(--borda); border-radius: var(--raio); } .palco { position: absolute; inset: 0; will-change: transform; } .palco video, .palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .palco canvas { pointer-events: none; } /* Irmão da janela, não do palco: nenhuma transformação de recorte o alcança. */ #hud { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .sem-video { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--texto-3); font-size: 13px; text-align: center; padding: 0 24px; } /* O atributo `hidden` do UA tem especificidade menor que a regra de classe acima, então `display: flex` o vencia e o aviso aparecia por cima do vídeo carregado. Precisa ser explícito. */ .sem-video[hidden] { display: none; } .sem-video strong { color: var(--texto-2); font-size: 15px; } .sem-video code { color: var(--fip-azul); } .controles-video { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .controles-video input[type="range"] { flex: 1; accent-color: var(--rm-vermelho); } .controles-video button { width: 40px; padding: 8px 0; } .tempo { font-size: 12px; color: var(--texto-3); min-width: 92px; text-align: right; } /* --- câmera virtual --- */ .painel-camera { margin-top: 16px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 15px 17px; } .linha-alvo { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; } .rotulo-controle { font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--texto-3); } .alvos { display: flex; gap: 7px; flex-wrap: wrap; } /* O botão veste a cor do slot quando ativo — a mesma do círculo sobre o vídeo, então "quem estou seguindo" se lê sem legenda nenhuma. */ .alvo { --cor: var(--borda-forte); padding: 7px 13px; font-size: 12.5px; } .alvo[aria-pressed="true"] { background: color-mix(in srgb, var(--cor) 22%, var(--fundo)); border-color: var(--cor); color: #fff; } .ajustes { margin-top: 14px; border-top: 1px solid var(--borda); padding-top: 12px; } .ajustes summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--texto-2); list-style: none; } .ajustes summary::-webkit-details-marker { display: none; } .ajustes summary::before { content: "▸ "; color: var(--texto-3); } .ajustes[open] summary::before { content: "▾ "; } .sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 13px; margin-top: 14px; } .slider-topo { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-3); margin-bottom: 4px; } .slider-topo b { color: var(--rm-vermelho-claro); } .slider input[type="range"] { width: 100%; accent-color: var(--rm-vermelho); } .marcador { display: flex; align-items: center; gap: 7px; margin-top: 13px; font-size: 12px; color: var(--texto-2); } .ressalva { margin: 10px 0 0; font-size: 11px; color: var(--ambar); line-height: 1.5; } /* --- lateral --- */ .lateral-analytics .secao-titulo { margin-top: 0; } .lateral-analytics .secao-titulo ~ .secao-titulo { margin-top: 26px; } .linha-jogador { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-p); margin-bottom: 7px; } .bolinha { width: 9px; height: 9px; border-radius: 50%; background: var(--cor, var(--texto-3)); flex: none; } .linha-jogador .nome { font-size: 13.5px; font-weight: 700; } .linha-jogador .mini { margin-left: auto; text-align: right; } .mini { font-size: 11.5px; color: var(--texto-3); } @media (max-width: 1080px) { .palco-e-controles { grid-template-columns: 1fr; } } /* Quem prefere menos movimento não deveria receber uma animação de desfoque a cada card sob o cursor. */ @media (prefers-reduced-motion: reduce) { .card-video video, .card-video .capa-vazia, .card-video::after, .play-flutuante i, .card-video { transition: none; } } /* ── "Em breve" ────────────────────────────────────────────────────────── * * Ocupa o lugar da lateral enquanto a partida não foi identificada. O vídeo * continua ali ao lado: o que falta não é a gravação, é o nome de quem jogou — * e sem ele todo painel desta tela falaria de "Slot 3". */ .em-breve { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 24px; border: 1px dashed var(--borda-forte); border-radius: var(--raio); background: linear-gradient(160deg, var(--superficie-2), var(--superficie)); } .em-breve[hidden] { display: none; } .em-breve-selo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rm-vermelho-fundo); border: 1px solid var(--rm-vermelho-borda); color: var(--rm-vermelho-claro); font-size: 15px; } .em-breve strong { font-size: 15px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; } .em-breve span:not(.em-breve-selo) { font-size: 12px; color: var(--texto-3); line-height: 1.6; } /* O `hidden` do UA perde para `display: flex`/`grid` das regras de classe, e o painel apareceria por cima do conteúdo certo. Precisa ser explícito. */ .lateral-analytics[hidden], .painel-camera[hidden], .grade[hidden], .secao-titulo[hidden] { display: none; } /* ── Camadas do vídeo ──────────────────────────────────────────────────── * * Mesmos nove papéis do MatchPlayer do argos. Botão de alternar, e não * checkbox: numa fileira de nove, a caixinha some e o rótulo vira o alvo de * clique — o botão inteiro sendo o alvo é mais rápido de operar. */ .painel-camadas { margin-top: 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 13px 16px 15px; } .painel-camadas[hidden] { display: none; } .camadas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .camada { padding: 6px 11px; font-size: 11.5px; font-weight: 600; color: var(--texto-3); background: var(--superficie-2); border: 1px solid var(--borda); } .camada:hover { color: var(--texto-2); } .camada[aria-pressed="true"] { background: var(--rm-vermelho-fundo); border-color: var(--rm-vermelho-borda); color: var(--texto); } /* ── Linha do tempo ────────────────────────────────────────────────────── * * Canvas e não DOM: uma partida de 40 min tem centenas de golpes, e um nó por * golpe deixaria a página pesada para redesenhar a cada frame do playhead. */ .painel-linha { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px 12px; } .painel-linha[hidden] { display: none; } .painel-linha canvas { display: block; width: 100%; cursor: pointer; } .painel-linha .mini { margin: 10px 0 0; } /* ───────────────────────────────────────────────────────────────────────── PAINÉIS DE ANALYTICS Portados do argos. A moldura é daqui (superfície, borda, raio, o título em itálico pesado); o conteúdo e as proporções são de lá. ───────────────────────────────────────────────────────────────────────── */ /* Calor e duplas lado a lado: o mapa mostra ONDE a partida aconteceu, os cards mostram QUEM estava lá. Empilhados, a pessoa rola entre a pergunta e a resposta. A proporção 1.15fr dá ao mapa a folga que ele precisa sem deixar os cards estreitos demais para a barra de zona ler. */ .calor-e-duplas { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; } .calor-e-duplas[hidden] { display: none; } @media (max-width: 900px) { .calor-e-duplas { grid-template-columns: 1fr; } } .painel-calor { margin: 0; } .painel-calor canvas { display: block; width: 100%; max-width: 320px; height: auto; margin: 12px auto 0; border-radius: var(--raio-p); /* A superfície afundada separa a planta do card sem precisar de borda: o minicourt já tem contorno próprio, e duas bordas concêntricas brigam. */ background: var(--fundo); } .duplas { display: flex; flex-direction: column; gap: 14px; } .dupla { padding: 15px 16px; } /* Os pontos dos jogadores sobrepostos, como no argos: diz "estes dois são uma dupla" antes de qualquer texto ser lido. */ .dupla-pontos { display: inline-flex; } .dupla-pontos i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--superficie); margin-right: -4px; } .dupla-jogador { margin-top: 14px; } .dupla-jogador:first-of-type { margin-top: 10px; } .dupla-topo { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 7px; } .dupla-meta { margin-left: auto; color: var(--texto-2); font-size: 11.5px; } .selo-slot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; font-size: 10.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } /* A barra empilhada, com 2px de folga entre segmentos. A folga é o que separa três tons vizinhos da mesma rampa; sem ela viram uma barra contínua e a divisão — a única coisa que a barra tem a dizer — some. */ .barra-zona { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; } .barra-zona span:first-child { border-radius: 999px 0 0 999px; } .barra-zona span:last-child { border-radius: 0 999px 999px 0; } .zona-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; font-size: 10.5px; color: var(--texto-3); } .zona-item { display: inline-flex; align-items: center; gap: 5px; } .zona-item i { width: 6px; height: 6px; border-radius: 50%; } .zona-item b { color: var(--texto-2); font-weight: 700; } /* ── Ocupação 3×3 ─────────────────────────────────────────────────────── */ .ocupacao { padding: 15px; } .grade-3x3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 12px 0 10px; } .celula { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background var(--transicao); } /* Célula vazia é ausência, não zero: fica como o fundo com um contorno de hairline, sem número. Escrever "0" daria a ela o mesmo peso visual de uma célula com dado. */ .celula.vazia { background: var(--fundo); box-shadow: inset 0 0 0 1px var(--borda); } .rampa-legenda { display: flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.08em; } .rampa-legenda i { width: 16px; height: 6px; border-radius: 2px; } /* ── Tabela por jogador ───────────────────────────────────────────────── */ .tabela-envolucro { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); } .tabela { width: 100%; border-collapse: collapse; min-width: 620px; } .tabela th { text-align: left; padding: 10px 14px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-3); border-bottom: 1px solid var(--borda); } .tabela td { padding: 10px 14px; font-size: 12.5px; border-bottom: 1px solid var(--borda-subtil, rgba(38,38,44,0.6)); } .tabela tr:last-child td { border-bottom: 0; } .tabela .num { text-align: right; font-variant-numeric: tabular-nums; } .ponto-slot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; } .tag-time { margin-left: 6px; font-size: 9.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.1em; } /* O âmbar não é destaque de recorde, é bandeira de erro: acima de 35 km/h o tracker trocou dois jogadores, e o número impressionante é o artefato. */ .tabela .suspeito { color: var(--ambar); } .marca-suspeito { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; } .ressalva { margin: 10px 2px 0; font-size: 11px; line-height: 1.6; color: var(--texto-3); max-width: 78ch; } /* ── Golpes por jogador ───────────────────────────────────────────────── */ .golpes-card { padding: 15px 16px; } .golpe-linha { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin-top: 11px; font-size: 12px; } .golpe-nome { font-weight: 600; } .golpe-num { color: var(--texto-3); font-size: 11px; font-variant-numeric: tabular-nums; } .golpe-barra { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; } .golpe-barra i { display: block; height: 100%; border-radius: 999px; } .golpes-meta { display: flex; flex-direction: column; gap: 5px; margin: 14px 0 0; padding-top: 11px; border-top: 1px solid var(--borda); font-size: 11px; } .golpes-meta > div { display: flex; justify-content: space-between; } .golpes-meta dt { color: var(--texto-3); } .golpes-meta dd { margin: 0; color: var(--texto-2); font-weight: 600; font-variant-numeric: tabular-nums; }