/* ==========================================================================
   PAINEL DO EC PINHEIROS
   Cores, fontes e proporções saem de marca/identidade-da-marca.md. O verde
   Recanto Pinheiros ocupa o lugar que o dourado ocupa na referência do Galo, e
   o vinho marca o que é do adversário. Os caminhos são relativos a esta pasta,
   e ao publicar o publicar.py troca "./" por "./".
   ========================================================================== */

@font-face{font-family:'URW DIN';src:url('./marca/fontes/URWDIN-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'URW DIN';src:url('./marca/fontes/URWDIN-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'URW DIN';src:url('./marca/fontes/URWDIN-Demi.otf') format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:'URW DIN';src:url('./marca/fontes/URWDIN-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'URW DIN Cond';src:url('./marca/fontes/URWDINCond-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'URW DIN Cond';src:url('./marca/fontes/URWDINCond-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'URW DIN Cond';src:url('./marca/fontes/URWDINCond-BlackItalic.otf') format('opentype');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:'SeriEa';src:url('./marca/fontes/SeriEa.ttf') format('truetype');font-display:swap}

:root{
  --branco:#FFFFFF;
  --verde:#C1FF73;
  --vermelho:#ED3237;
  --vinho:#8E1418;
  --azul:#2957A4;
  --noite:#0B1B33;
  --nevoa:#A8B6CE;

  --fundo:#071223;
  --card:#0E1F3A;
  --card-alto:#132745;
  --borda:rgba(168,182,206,.14);
  --borda-viva:rgba(193,255,115,.32);

  --din:'URW DIN',Archivo,system-ui,sans-serif;
  --cond:'URW DIN Cond','Barlow Condensed',system-ui,sans-serif;
  --camisa:'SeriEa','URW DIN Cond',sans-serif;

  --rail:264px;
  --raio:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--fundo);color:var(--branco);font-family:var(--din);font-size:16px;
  -webkit-font-smoothing:antialiased;display:flex;min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--verde);color:var(--noite)}

/* foco de teclado sempre visível, porque o lançamento é todo teclado */
:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:8px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* ---------- menu lateral ---------- */

.rail{
  width:var(--rail);flex:0 0 var(--rail);background:var(--noite);
  border-right:1px solid var(--borda);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;overflow:hidden;
}
.rail .trama{
  position:absolute;inset:0;background:url('./marca/padrao-posts/elementos/trama-azul.png?v=1786560739') repeat;
  background-size:300px auto;opacity:.16;pointer-events:none;
}
.rail-topo{position:relative;padding:22px 22px 16px;text-align:center;border-bottom:1px solid var(--borda)}
.rail-topo img{width:88px;height:auto;display:block;margin:0 auto 10px}
.rail-topo h1{font-family:var(--cond);font-weight:900;font-size:22px;letter-spacing:.02em;line-height:1}
.rail-topo p{color:var(--nevoa);font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-top:7px}

.menu{position:relative;padding:12px 12px;display:flex;flex-direction:column;gap:2px;flex:1;
  overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
/* o menu cabe inteiro na tela; a rolagem fica só como socorro em janela
   muito baixa, e sem barra visível, que polui o painel */
.menu::-webkit-scrollbar{width:0;height:0;display:none}
.menu a{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
  color:var(--nevoa);font-weight:500;letter-spacing:.02em;transition:background .15s,color .15s;
}
.menu a svg{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.menu a:hover{background:rgba(255,255,255,.05);color:#fff}
.menu a.on{background:var(--verde);color:var(--noite);font-weight:700}
.menu a.on svg{opacity:1}
.menu .sep{height:1px;background:var(--borda);margin:12px 13px}

.rail-pe{position:relative;padding:12px 20px 14px;border-top:1px solid var(--borda);color:var(--nevoa);font-size:14px;line-height:1.5}
.rail-pe b{color:var(--verde);font-weight:600}
.rail-pe .desde{display:block;margin-top:7px;opacity:.72;letter-spacing:.02em}
.rail-pe .linha-pe{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.rail-pe .linha-pe button{
  color:var(--verde);font-size:14px;border:1px solid var(--borda-viva);
  border-radius:7px;padding:4px 10px;line-height:1.2;
}
.rail-pe .linha-pe button:hover{background:rgba(193,255,115,.12)}

/* ---------- área principal ---------- */

.tela{flex:1;min-width:0;display:flex;flex-direction:column}

.topo{
  position:sticky;top:0;z-index:9;background:rgba(7,18,35,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borda);padding:16px 30px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.topo h2{font-family:var(--cond);font-weight:900;font-size:30px;line-height:1;letter-spacing:.01em}
.topo .sub{color:var(--nevoa);font-size:15px;margin-top:5px}
.topo .direita{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.filtro{display:flex;align-items:center;gap:8px}
.filtro label{color:var(--nevoa);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
select,input,textarea{
  font:inherit;background:var(--card);color:#fff;border:1px solid var(--borda);
  border-radius:9px;padding:8px 11px;
}
select:focus,input:focus,textarea:focus{border-color:var(--borda-viva)}
select{cursor:pointer;min-width:130px}

.tri{display:inline-flex;background:var(--card);border:1px solid var(--borda);border-radius:9px;overflow:hidden}
.tri button{padding:8px 14px;color:var(--nevoa);font-size:16px}
.tri button.on{background:var(--verde);color:var(--noite);font-weight:700}

.corpo{padding:24px 30px 46px;display:flex;flex-direction:column;gap:18px}

/* ---------- faixa de números ---------- */

.faixa{
  background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
}
.faixa .num{padding:18px 16px;min-width:0;border-left:1px solid var(--borda)}
.faixa .num:first-child{border-left:0}
/* A Artilharia tem oito indicadores. Com auto-fit sobrava um sozinho na
   segunda linha, entao aqui a conta fecha: 8, 4 ou 2 por linha, e quem abre
   cada linha perde o risco da esquerda. */
.faixa.oito{grid-template-columns:repeat(2,1fr)}
.faixa.oito .num:nth-child(2n+1){border-left:0}
@media (min-width:620px){
  .faixa.oito{grid-template-columns:repeat(4,1fr)}
  .faixa.oito .num{border-left:1px solid var(--borda)}
  .faixa.oito .num:nth-child(4n+1){border-left:0}
}
@media (min-width:1560px){
  .faixa.oito{grid-template-columns:repeat(8,1fr)}
  .faixa.oito .num{border-left:1px solid var(--borda)}
  .faixa.oito .num:first-child{border-left:0}
}
.num .rot{color:var(--nevoa);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.num .val{font-family:var(--cond);font-weight:900;font-size:42px;line-height:1.05;margin-top:6px}
/* coluna com espaço próprio entre a barra e o texto. Solto, o trilho era o
   primeiro filho e a margem dele grudava no topo do pé, deixando o texto
   encostado logo abaixo dos 5px da barra */
.num .pe{color:var(--nevoa);font-size:14px;margin-top:7px;display:flex;flex-direction:column;gap:7px}
.num.v .val{color:var(--verde)}
.num.d .val{color:#E28B8E}
.num.destaque{background:var(--card-alto)}

.trilho{height:5px;border-radius:3px;background:rgba(168,182,206,.16);overflow:hidden;flex:none}
.trilho i{display:block;height:100%;border-radius:3px;background:var(--verde)}

/* ---------- cards ---------- */

.grade{display:grid;gap:18px}
/* o min() é o que segura a coluna em tela estreita: só minmax(330px,1fr) manda
   a coluna ficar com 330px mesmo quando o celular só tem 292px de espaço, e o
   card escorre para fora da tela */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
/* duas colunas de verdade, e nao "quantas couberem". Serve onde os cards se
   leem em pares, como falta e penalti embaixo do par de cima na Artilharia.
   No celular vira uma coluna, como todo o resto. */
.g2par{grid-template-columns:1fr}
@media (min-width:760px){ .g2par{grid-template-columns:1fr 1fr} }
/* Trajetória ao lado de Casa e fora, na mesma grade de três colunas da linha de
   baixo: o gráfico ocupa duas e Casa e fora fica exatamente em cima do Momento. */
.g-traj{grid-template-columns:1fr}
@media (min-width:1240px){
  .g-traj,.g3-traj{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-traj>:first-child{grid-column:span 2}
}

.card{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);padding:20px 22px}
.card h3{font-family:var(--cond);font-weight:900;font-size:20px;letter-spacing:.01em}
.card .desc{color:var(--nevoa);font-size:15px;margin-top:4px}
.card .topo-card{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.card .selo{color:var(--verde);font-size:14px;letter-spacing:.12em;text-transform:uppercase}

.lista{display:flex;flex-direction:column;gap:11px}
.linha{display:flex;align-items:center;gap:12px}
.linha .camisa{font-family:var(--camisa);color:var(--verde);font-size:22px;min-width:34px;text-align:right;line-height:1}
.linha .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha .tot{font-family:var(--cond);font-weight:900;font-size:22px;min-width:34px;text-align:right}
/* selo do gol de bola parada, ao lado do nome no ranking e no detalhe do jogo */
.marca{
  font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--verde);border:1px solid rgba(193,255,115,.35);border-radius:999px;
  padding:3px 9px;white-space:nowrap;line-height:1;
}
.barra{display:block;height:5px;border-radius:3px;background:rgba(168,182,206,.14);overflow:hidden;margin-top:6px}
.barra i{display:block;height:100%;border-radius:3px}

/* o primeiro colocado da lista, de rosto e com o número grande, para o pódio
   do Dashboard não virar mais uma linha igual às outras */
.lider{display:flex;align-items:center;gap:14px;padding-bottom:15px;margin-bottom:15px;
  border-bottom:1px solid var(--borda)}
.retrato{
  width:62px;height:62px;flex:0 0 62px;border-radius:50%;overflow:hidden;
  background:var(--card-alto);border:1px solid var(--borda);display:grid;place-items:center;
}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:top center}
.retrato .semfoto{font-family:var(--camisa);font-size:28px;color:rgba(193,255,115,.5);line-height:1}
.lider .quem{flex:1;min-width:0}
.lider .quem .nome{font-weight:600;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lider .quem .desc{margin-top:3px}
.lider .val{font-family:var(--cond);font-weight:900;font-size:38px;line-height:1;font-variant-numeric:tabular-nums}

.vazio{color:var(--nevoa);font-size:16px;padding:12px 0;line-height:1.6}

/* ---------- tabelas ----------
   A tabela rola dentro dela mesma, senão no celular ela empurra a página
   inteira para o lado e o menu anda junto. */

.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rolagem table{min-width:520px}

table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{
  color:var(--nevoa);font-size:13px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  text-align:right;padding:0 10px 12px;border-bottom:1px solid var(--borda);white-space:nowrap;
}
th:first-child{text-align:left}
th.ord{cursor:pointer;user-select:none}
th.ord:hover{color:#fff}
td{padding:11px 10px;border-bottom:1px solid rgba(168,182,206,.07);text-align:right;white-space:nowrap}
td:first-child{text-align:left;white-space:normal}
tbody tr:hover{background:rgba(255,255,255,.03)}
tbody tr.clicavel{cursor:pointer}

/* O cabeçalho não é sticky de propósito. Com overflow-x:auto na .rolagem o
   navegador liga o eixo vertical junto, a caixa vira o container da rolagem e
   um sticky de topo empurra o thead para baixo, em cima da primeira linha. E
   soltar o overflow no desktop faz a tabela larga arrastar a página inteira
   para o lado. Tabela rola sozinha na horizontal, cabeçalho no lugar dele. */

.time{display:flex;align-items:center;gap:10px}
.escudo{width:30px;height:30px;object-fit:contain;flex:0 0 30px}
.placa{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--card-alto);
  border:1px solid var(--borda);display:grid;place-items:center;
  font-family:var(--cond);font-weight:900;font-size:14px;color:var(--nevoa);
}

.res{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;
  font-family:var(--cond);font-weight:900;font-size:16px}
.res.v{background:var(--verde);color:var(--noite)}
.res.e{background:rgba(168,182,206,.22);color:#fff}
.res.d{background:var(--vinho);color:#fff}

.placar{font-family:var(--cond);font-weight:900;font-style:italic;font-size:23px;letter-spacing:.01em}
.placar .x{color:var(--nevoa);font-style:normal;font-weight:700;margin:0 6px;font-size:16px}
.mando{color:var(--nevoa);font-size:14px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- elenco ---------- */

/* a largura mínima do card é ditada pelo rodapé: cada rótulo precisa caber
   inteiro na sua coluna, senão "presença" encosta no vizinho */
.elenco{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(262px,1fr))}
/* goleiro e treinador levam mais contas no rodapé, então pedem mais largura */
.elenco.goleiros{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.elenco.comissao{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.atleta{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden}
.atleta .foto{
  position:relative;height:186px;background:var(--card-alto);display:grid;place-items:center;overflow:hidden;
}
.atleta .foto img{width:100%;height:100%;object-fit:cover;object-position:top center}
.atleta .foto .semfoto{font-family:var(--camisa);font-size:70px;color:rgba(193,255,115,.32)}
.atleta .id{padding:13px 15px 4px;display:flex;align-items:baseline;gap:8px}
.atleta .id b{font-family:var(--camisa);color:var(--verde);font-size:20px;line-height:1}
.atleta .id span{font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atleta .pos{padding:0 15px 12px;color:var(--nevoa);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
/* o número de colunas vem do card, porque goleiro e treinador mostram outras contas */
.atleta .nums{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));border-top:1px solid var(--borda)}
.atleta .nums div{padding:9px 3px;text-align:center;border-left:1px solid var(--borda);min-width:0}
.atleta .nums div:first-child{border-left:0}
.atleta .nums b{display:block;font-family:var(--cond);font-weight:900;font-size:18px}
.atleta .nums span{display:block;color:var(--nevoa);font-size:11px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;margin-top:2px;white-space:nowrap}

/* ---------- formulário de lançamento ---------- */

.form{display:flex;flex-direction:column;gap:18px;max-width:960px}
.campos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{color:var(--nevoa);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.campo input,.campo select{width:100%}

.golLinha{display:grid;grid-template-columns:26px 1fr 1fr 150px 34px;gap:10px;align-items:center;margin-bottom:9px}
/* gol sofrido tem só o goleiro, então a linha fecha em três colunas */
.golLinha.sofrido{grid-template-columns:26px 1fr 34px;max-width:520px}
.golLinha .ord{color:var(--nevoa);font-family:var(--cond);font-weight:900;font-size:17px;text-align:center}
.golLinha button{color:var(--nevoa);font-size:20px;line-height:1;border-radius:8px;padding:4px 0}
.golLinha button:hover{color:var(--vermelho)}

.presenca{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.chip{
  display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;
  background:var(--card-alto);border:1px solid var(--borda);cursor:pointer;user-select:none;
}
.chip:hover{border-color:var(--borda-viva)}
.chip input{width:16px;height:16px;accent-color:#C1FF73;cursor:pointer;padding:0}
.chip b{font-family:var(--camisa);color:var(--verde);font-size:17px;min-width:22px;line-height:1}
.chip span{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.marcado{background:rgba(193,255,115,.1);border-color:var(--borda-viva)}

.acoes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn{background:var(--verde);color:var(--noite);font-weight:700;padding:12px 22px;border-radius:10px}
.btn:hover{filter:brightness(1.06)}
.btn.fantasma{background:none;color:var(--nevoa);border:1px solid var(--borda)}
.btn.fantasma:hover{color:#fff;border-color:var(--borda-viva)}
.btn[disabled]{opacity:.45;cursor:default;filter:none}

.aviso{padding:12px 16px;border-radius:10px;font-size:16px;line-height:1.5}
.aviso.erro{background:rgba(142,20,24,.35);border:1px solid rgba(237,50,55,.4)}
.aviso.ok{background:rgba(193,255,115,.12);border:1px solid var(--borda-viva);color:var(--verde)}

/* ---------- detalhe do jogo ---------- */

.veu{position:fixed;inset:0;background:rgba(3,8,17,.72);backdrop-filter:blur(3px);z-index:40;
  display:grid;place-items:center;padding:24px}
.modal{background:var(--card);border:1px solid var(--borda);border-radius:18px;width:min(620px,100%);
  max-height:86vh;overflow-y:auto;padding:26px 28px}
.modal .fechar{position:absolute;top:26px;right:30px;color:var(--nevoa);font-size:25px;line-height:1}

/* data e local do jogo em bloco próprio, com o fechar ao lado e não por cima:
   soltos, os dois se encontravam quando o nome do local quebrava linha */
.cabeca-jogo{display:flex;align-items:stretch;gap:12px;margin-bottom:4px}
.cabeca-jogo .quando{
  flex:1;min-width:0;background:var(--card-alto);border:1px solid var(--borda);
  border-radius:12px;padding:11px 15px;
}
.cabeca-jogo .quando .dia{
  font-family:var(--cond);font-weight:900;font-size:19px;line-height:1.1;letter-spacing:.01em;
}
.cabeca-jogo .quando .onde{color:var(--nevoa);font-size:15px;margin-top:4px;line-height:1.35}
.cabeca-jogo .fechar{
  position:static;flex:0 0 44px;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;font-size:25px;line-height:1;
  color:var(--nevoa);border:1px solid var(--borda);
}
.cabeca-jogo .fechar:hover{background:rgba(255,255,255,.06);color:#fff}
.modal .cabeca{display:flex;align-items:center;justify-content:center;gap:22px;margin:18px 0 6px}
.modal .cabeca .escudo{width:56px;height:56px;flex:0 0 56px}
.modal .cabeca .placa{width:56px;height:56px;flex:0 0 56px;font-size:18px}
.modal .cabeca .n{font-family:var(--cond);font-weight:900;font-style:italic;font-size:48px;color:var(--verde)}

.gol{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(168,182,206,.07)}
.gol .camisa{font-family:var(--camisa);color:var(--verde);font-size:18px;min-width:26px;text-align:right}
.gol .assist{color:var(--nevoa);font-size:15px}

.presentes{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.presentes span{background:var(--card-alto);border:1px solid var(--borda);border-radius:8px;
  padding:6px 10px;font-size:15px}
.presentes span b{font-family:var(--camisa);color:var(--verde);margin-right:6px}

/* ---------- rodapé, a mesma assinatura das artes de jogo ----------
   Os patrocinadores vêm primeiro, na ordem fixa, e o clube assina embaixo,
   menor. As alturas seguem o peso ótico de base.css, não a altura igual. */

.rodape{margin-top:auto;padding:30px 30px 34px;border-top:1px solid var(--borda);background:var(--noite)}
.rodape .patro{
  display:flex;align-items:center;justify-content:center;gap:64px;flex-wrap:wrap;
  padding-bottom:28px;
}
.rodape .patro img{opacity:.9;transition:opacity .15s}
.rodape .patro a:hover img{opacity:1}
.rodape .patro img.fazan{height:32px}
.rodape .patro img.dalufra{height:40px}
.rodape .patro img.itamaraty{height:36px}
.rodape .patro img.rodo{height:38px}
.rodape .patro img.volare{height:32px}

.rodape .clube{
  display:flex;align-items:stretch;justify-content:center;gap:32px;
  border-top:1px solid rgba(255,255,255,.14);padding-top:32px;
}
.rodape .clube > a{display:flex;align-items:center}
.rodape .clube img.escudo{height:96px;width:auto;flex:none}
/* o Recanto na mesma altura do escudo, para os dois pesarem igual */
.rodape .clube img.recanto{height:96px;width:auto;flex:none}
.rodape .clube .risco{width:1px;background:rgba(255,255,255,.2);flex:none}

/* Instagram e endereço ganham uma linha própria cada, centralizadas sob as logos */
.rodape .local{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px}

.rodape .contato{
  display:inline-flex;align-items:center;gap:10px;color:var(--nevoa);font-size:15px;
  letter-spacing:.04em;line-height:1.4;text-decoration:none;transition:color .15s ease;
}
.rodape .contato address{font-style:normal}
.rodape .contato address .ponto{margin:0 4px;opacity:.55}
.rodape .contato svg{width:18px;height:18px;flex:none;color:var(--verde)}
.rodape .contato.insta{color:var(--branco);font-weight:600}
.rodape .contato:hover{color:var(--verde)}

/* faixa fina de assinatura, de ponta a ponta e bem discreta */
.assina-send{
  padding:10px 30px;background:#050E1C;border-top:1px solid var(--borda);
  text-align:center;color:var(--nevoa);font-size:14px;letter-spacing:.06em;
}
.assina-send a{color:var(--verde)}
.assina-send a:hover{text-decoration:underline}

/* ---------- entrar ---------- */

.login{width:min(380px,100%)}
.login h3{font-family:var(--cond);font-weight:900;font-size:25px;margin-bottom:6px}
.login .campo{margin-top:14px}
.login .acoes{margin-top:20px}

/* ---------- estado inicial e carregamento ---------- */

.abertura{max-width:560px;margin:60px auto;text-align:center;color:var(--nevoa);line-height:1.7}
.abertura h3{font-family:var(--cond);font-weight:900;font-size:30px;color:#fff;margin-bottom:12px}
.abertura .btn{margin-top:20px;display:inline-block}

/* ---------- dica dos pontos do gráfico ---------- */

.dica{
  position:fixed;z-index:60;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--card-alto);border:1px solid var(--borda-viva);border-radius:10px;
  padding:9px 12px;font-size:15px;line-height:1.45;box-shadow:0 10px 26px rgba(0,0,0,.45);
  max-width:220px;
}
.dica.on{opacity:1}
.dica b{display:block;font-family:var(--cond);font-weight:900;font-size:16px;margin-bottom:2px}
.dica span{color:var(--nevoa)}
.dica i{color:var(--verde);font-style:normal;font-weight:600}

/* ---------- esqueleto de carregamento ---------- */

.esqueleto{display:flex;flex-direction:column;gap:18px}
.esqueleto div{
  height:96px;border-radius:var(--raio);border:1px solid var(--borda);
  background:linear-gradient(100deg,var(--card) 30%,var(--card-alto) 50%,var(--card) 70%);
  background-size:220% 100%;animation:respira 1.4s ease-in-out infinite;
}
.esqueleto div:nth-child(2){height:230px}
.esqueleto div:nth-child(3){height:170px}
@keyframes respira{0%{background-position:120% 0}100%{background-position:-20% 0}}

/* ---------- celular: barra compacta e folha de seções ----------
   Em pé o menu inteiro não cabe: ele embrulhava em quatro linhas e empurrava
   os números para fora da tela. Vira uma barra de topo com os três pontinhos,
   e as seções sobem numa folha de baixo, que é onde o polegar alcança. */

.bt-secao{display:none}
.veu-menu{display:none}
.puxador{display:none}
.rail-baixo{display:contents}

/* texto que só o leitor de tela pega */
.so-leitor{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

@media (max-width:900px){
  body{flex-direction:column}

  /* A barra é fixa, e não sticky: o body tem altura limitada, então a faixa de
     grude do sticky acabava no meio da página e a barra desprendia justamente
     em quem rolou até o fim. Fixa, o botão de seção e os filtros ficam à mão
     em qualquer ponto da rolagem. */
  :root{--barra:63px}

  .rail{
    width:100%;flex:none;position:fixed;top:0;left:0;right:0;z-index:30;
    display:block;height:var(--barra);border-right:none;border-bottom:1px solid var(--borda);
  }
  /* a .rail abre contexto de empilhamento próprio, então o z-index da folha lá
     dentro não disputa com o do véu aqui fora: quem sobe é a barra inteira */
  body.menu-aberto .rail{z-index:42}

  .tela{padding-top:var(--barra)}          /* o lugar que a barra fixa deixou */
  .topo{top:var(--barra)}                  /* os filtros grudam logo abaixo dela */
  /* o nome da seção já está no botão da barra, então o título sai da vista mas
     continua na página, senão o leitor de tela perde o cabeçalho da seção */
  .titulo-tela{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .topo{padding-top:10px;padding-bottom:10px}
  .topo .direita{margin-left:0;width:100%}
  .rail-topo{
    display:flex;align-items:center;gap:10px;text-align:left;
    padding:0 14px;border-bottom:none;height:62px;
  }
  .rail-topo img{width:34px;margin:0;flex:0 0 34px}
  /* o min-width:0 é o que deixa o nome encolher: sem ele o item de flex se
     recusa a ficar menor que o texto e empurra a barra para fora da tela */
  .rail-topo h1{
    font-size:18px;line-height:1.15;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .rail-topo p{display:none}   /* a temporada já está no filtro de ano logo abaixo */

  /* o acionador diz onde se está e que dá para trocar: só um ícone solto no
     canto tem cara de ajuste, não de menu */
  .bt-secao{
    display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto;
    min-height:44px;padding:0 14px;border-radius:12px;
    background:var(--card-alto);border:1px solid var(--borda-viva);
    color:#fff;font-size:17px;font-weight:600;cursor:pointer;
    transition:background .15s,border-color .15s;
  }
  .bt-secao svg{width:19px;height:19px;flex:0 0 19px;color:var(--verde)}
  .bt-secao:hover,.bt-secao[aria-expanded="true"]{background:rgba(193,255,115,.12);border-color:var(--verde)}

  /* o véu vive na tela inteira, então fechado ele precisa sair do caminho do
     toque de verdade: opacidade zero sozinha deixaria a página inteira morta */
  .veu-menu{
    display:block;position:fixed;inset:0;z-index:40;background:rgba(4,10,20,.6);
    opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s;
  }
  body.menu-aberto .veu-menu{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}

  .rail-baixo{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:41;
    background:var(--card);border-top:1px solid var(--borda-viva);
    border-radius:18px 18px 0 0;max-height:84vh;overflow-y:auto;
    padding-bottom:max(14px,env(safe-area-inset-bottom));
    transform:translateY(100%);visibility:hidden;
    /* a visibilidade só cai depois que a folha termina de descer, e sobe no
       ato ao abrir: se ela entrar na transição, o foco não acha a folha */
    transition:transform .22s ease,visibility 0s linear .22s;
  }
  body.menu-aberto .rail-baixo{
    transform:none;visibility:visible;transition:transform .22s ease,visibility 0s;
  }

  .puxador{
    display:block;width:42px;height:4px;border-radius:2px;
    background:var(--borda-viva);margin:10px auto 4px;
  }

  /* alvo de toque grande, que dedo não acerta linha fina */
  .menu{padding:8px 12px 4px;overflow:visible}
  .menu a{padding:14px 14px;min-height:50px;font-size:17px}
  .menu a svg{width:19px;height:19px;flex:0 0 19px}
  .rail-pe{padding:12px 20px 6px}

  .corpo,.topo{padding-left:18px;padding-right:18px}
  .rodape,.assina-send{padding-left:18px;padding-right:18px}
  .rodape .patro{gap:30px}
  .rodape .clube{gap:20px;padding-top:24px}
  .rodape .contato{font-size:14px}
  .rodape .local{margin-top:24px}
  .rodape .clube img.escudo{height:72px}
  .rodape .clube img.recanto{height:72px}
}

/* no celular a tabela mostra só o que decide, e o resto sai de cena */
@media (max-width:720px){
  .rolagem table{min-width:0}
  th.opt,td.opt{display:none}
  th{padding:0 6px 10px}
  td{padding:9px 6px}
  .so-desk{display:none}      /* dia da semana e ano saem da data */
  .card{padding:16px 14px}
  .corpo{padding:18px 14px 40px}
  .topo{padding-top:12px;padding-bottom:12px}
  .topo h2{font-size:25px}

  /* a escala do desktop é para tela de 1,5 metro de distância: no celular ela
     estoura, os nove números do Dashboard ocupavam a tela inteira e nada mais
     aparecia. Aqui tudo desce um degrau. */
  body{font-size:15px}
  select,input,textarea{padding:7px 10px}

  /* rótulo em cima do campo: ao lado, "ADVERSÁRIO" comia a largura e o select
     ficava espremido sem mostrar o nome do time */
  .topo .direita{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;align-items:end}
  .filtro{flex-direction:column;align-items:stretch;gap:3px;min-width:0}
  .filtro label{font-size:11px}
  .filtro select{min-width:0;width:100%}
  .tri{width:100%}
  .tri button{flex:1;font-size:15px;padding:7px 10px}

  .faixa .num{padding:12px 14px}
  .num .rot{font-size:11px}
  .num .val{font-size:30px;margin-top:3px}
  .num .pe{font-size:12.5px;margin-top:4px;gap:5px}

  .card h3{font-size:18px}
  .card .desc{font-size:13.5px}
  .card .selo{font-size:12px}
  .card .topo-card{margin-bottom:12px}
  .linha .camisa,.linha .tot{font-size:19px}
  .lider .quem .nome{font-size:16px}
  .lider .val{font-size:32px}
  .retrato{width:52px;height:52px;flex:0 0 52px}
  .vazio{font-size:14.5px}

  th{font-size:11px}
  .placar{font-size:19px}
  .placar .x{font-size:14px;margin:0 4px}
  .mando{font-size:12px}
  .escudo,.placa{width:26px;height:26px;flex:0 0 26px}

  /* no celular a linha do gol empilha os campos, senão três selects lado a
     lado ficam estreitos demais para ler o nome */
  .golLinha{grid-template-columns:26px 1fr 34px}
  .golLinha .ord{grid-row:1;grid-column:1}
  .golLinha select{grid-column:2}
  .golLinha button{grid-row:1;grid-column:3}
}

/* abaixo daqui o card do elenco ocupa a linha inteira, e a altura fixa de
   186px vira uma faixa larga que corta o rosto. A foto passa a acompanhar a
   largura do card, e quem ainda não tem foto fica na altura antiga, senão o
   número da camisa apareceria sozinho num quadro enorme. */
@media (max-width:520px){
  .atleta .foto:has(img){height:auto;aspect-ratio:4/3}
}

@media print{
  .rail,.topo .direita{display:none}
  body{background:#fff;color:#000}
}