/* ══════════════════════════════════════════════════════════════════
   tenis.css — sistema visual das chaves de tênis (admin + público)

   Segue a referência de layout fornecida: hero escuro, colunas por fase
   com contador, cartões de confronto com anel verde (classificatória) ou
   dourado (repescagem), disputa de 3º lugar, coluna do campeão e grade de
   regras. As cores de TEXTO foram escurecidas em relação à referência
   para passar AA — o dourado #d99a00 dá 2.3:1 sobre branco e some no sol.
   ══════════════════════════════════════════════════════════════════ */

.tn {
  --tn-paper:   #FFFFFF;
  --tn-bg:      #F4F7FB;
  --tn-sunk:    #FBFCFE;
  --tn-line:    #DCE3EE;
  --tn-line-2:  #C3CEDF;

  --tn-ink:     #13203A;   /* 14.7:1 */
  --tn-ink-2:   #3B4A63;   /*  8.5:1 */
  --tn-mut:     #5F6E85;   /*  5.3:1 — a referência usa #718096 (4.1:1) */

  --tn-acc:     #4B2FD6;   /*  8.0:1 — roxo da referência, escurecido p/ texto */
  --tn-acc-pure:#5B3DF5;   /* o roxo original, só para preenchimento */
  --tn-acc-bg:  #EFEAFF;
  --tn-acc-ln:  #D6CBFF;

  --tn-win:     #0E7A4F;   /*  5.2:1 */
  --tn-win-bg:  #EAF9F2;
  --tn-win-ln:  #BCEBD7;

  --tn-gold:    #8A6200;   /*  5.6:1 */
  --tn-gold-bg: #FFF8DF;
  --tn-gold-ln: #F1D680;

  --tn-warn:    #B3261E;   /*  6.2:1 */
  --tn-warn-bg: #FEF2F2;

  --tn-r:       13px;
  --tn-gap:     30px;
  --tn-col:     300px;
  --tn-shadow:  0 8px 22px rgba(28, 50, 82, .05);
  --tn-shadow-l:0 14px 36px rgba(27, 45, 78, .08);
  --tn-ease:    cubic-bezier(.22, 1, .36, 1);

  font-family: var(--font, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif);
  color: var(--tn-ink);
}

/* ─────────────────────────────────────────────
   Voltar — pílula clara de propósito: no público ela fica sobre o fundo
   ESCURO da página e no admin sobre o claro; texto solto sumiria num dos dois.
   ───────────────────────────────────────────── */
.tn-voltar {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 12px; padding: 7px 13px;
  background: var(--tn-paper); border: 1px solid var(--tn-line-2);
  border-radius: 999px; color: var(--tn-ink-2);
  font-size: .78rem; font-weight: 800; text-decoration: none;
  transition: color .18s var(--tn-ease), border-color .18s var(--tn-ease);
}
.tn-voltar:hover { color: var(--tn-acc); border-color: var(--tn-acc); }
.tn-voltar:focus-visible { outline: 2px solid var(--tn-acc); outline-offset: 2px; }

/* ─────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────── */
.tn-hero {
  background: linear-gradient(135deg, #0D1D35 0%, #12365A 55%, #0D513B 100%);
  color: #fff; border-radius: var(--tn-r);
  padding: 26px 28px; margin-bottom: 20px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
}
.tn-hero-brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.tn-ball {
  width: 58px; height: 58px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #D6F87A 0%, #B7E74A 45%, #8FC22E 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  position: relative; overflow: hidden;
}
/* as duas costuras da bola */
.tn-ball::before, .tn-ball::after {
  content: ''; position: absolute; inset: -22% -46%;
  border: 3px solid rgba(255, 255, 255, .72); border-radius: 50%;
}
.tn-ball::after { inset: -22% -46%; transform: translateX(74%); }
/* Com logo do torneio ela substitui a bolinha desenhada. */
.tn-hero-logo {
  width: 74px; height: 74px; flex: none; object-fit: contain;
  border-radius: 12px; padding: 5px;
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.tn-kicker {
  font-size: .68rem; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.tn-hero h1 {
  margin: 6px 0 6px; font-size: clamp(1.4rem, 3.4vw, 2rem);
  letter-spacing: -.03em; line-height: 1.1; text-wrap: balance;
}
.tn-hero-sub { font-size: .84rem; color: rgba(255, 255, 255, .8); }
.tn-hero-box {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px; padding: 14px 16px; min-width: 260px; max-width: 380px;
}
.tn-hero-box b {
  display: block; font-size: .68rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 7px; color: rgba(255, 255, 255, .82);
}
.tn-hero-box span { font-size: .8rem; color: rgba(255, 255, 255, .9); line-height: 1.55; }

/* ─────────────────────────────────────────────
   Cabeçalho do torneio
   ───────────────────────────────────────────── */
.tn-head {
  background: var(--tn-paper); border: 1px solid var(--tn-line); border-radius: 17px;
  padding: 17px 20px; box-shadow: var(--tn-shadow-l); margin-bottom: 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
}
.tn-head h2 { margin: 0 0 7px; font-size: 1.15rem; letter-spacing: -.02em; }
.tn-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.tn-pill {
  padding: 6px 11px; border-radius: 999px; font-size: .7rem; font-weight: 800;
  background: #EEF3F8; color: #465A72; white-space: nowrap;
}
.tn-pill--green { background: var(--tn-win-bg);  color: var(--tn-win); }
.tn-pill--gold  { background: var(--tn-gold-bg); color: var(--tn-gold); }
.tn-pill--acc   { background: var(--tn-acc-bg);  color: var(--tn-acc); }
.tn-pill--live  { background: #EFF6FF; color: #1D4ED8; }
.tn-note { font-size: .8rem; color: var(--tn-mut); max-width: 62ch; line-height: 1.5; }

.tn-prog { display: flex; align-items: center; gap: 10px; font-size: .74rem; color: var(--tn-mut); font-weight: 700; }
.tn-prog-track { width: 108px; height: 5px; border-radius: 999px; background: var(--tn-line); overflow: hidden; }
.tn-prog-fill {
  height: 100%; width: 100%; border-radius: 999px; background: var(--tn-acc-pure);
  transform: scaleX(var(--tn-p, 0)); transform-origin: left center;
  transition: transform .5s var(--tn-ease);   /* scaleX, não width: sem layout */
}

/* ─────────────────────────────────────────────
   O bracket
   ───────────────────────────────────────────── */
/* Painel de navegação: a chave inteira vive dentro dele e se arrasta nos dois
   eixos, como no app do US Open. Rolar a página não é o mesmo que percorrer a
   chave — separar os dois é o que deixa a árvore navegável no celular. */
.tn-bkt-wrap {
  overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  max-height: min(80vh, 940px); padding: 16px;
  background: var(--tn-bg); border: 1px solid var(--tn-line); border-radius: var(--tn-r);
}
.tn-bkt { display: flex; gap: var(--tn-gap); min-width: min-content; align-items: stretch; }
.tn-col { display: flex; flex-direction: column; width: var(--tn-col); flex: none; }
/* Rodada filtrada pela régua: escolher "Semifinal" tira da frente tudo que já
   passou. No papel volta sempre (ver @media print). */
.tn-col.is-off { display: none; }

/* Níveis de zoom: menos detalhe = mais rodadas na tela de uma vez.
   --tn-row é a altura da FATIA e precisa ser um pouco maior que o cartão
   daquele nível; se ficar menor, os cartões da 1ª coluna se encostam e o
   alinhamento com a coluna seguinte deixa de fechar. */
.tn-bkt { --tn-row: calc(var(--tn-row-base, 110px) + var(--tn-row-x, 0px)); }
.tn-bkt[data-z="1"] { --tn-col: 330px; --tn-gap: 34px; --tn-row-base: 120px; --tn-fs: .75rem; }
.tn-bkt[data-z="2"] { --tn-col: 268px; --tn-gap: 26px; --tn-row-base: 114px; --tn-fs: .70rem; }
.tn-bkt[data-z="3"] { --tn-col: 222px; --tn-gap: 20px; --tn-row-base: 110px; --tn-fs: .64rem; }
.tn-bkt[data-z="4"] { --tn-col: 176px; --tn-gap: 15px; --tn-row-base:  90px; --tn-fs: .58rem; }
.tn-bkt[data-z="5"] { --tn-col: 136px; --tn-gap: 11px; --tn-row-base:  74px; --tn-fs: .52rem; }
/* No admin o cartão ganha o rodapé "Lançar resultado" e fica bem mais alto que
   no público. Sem essa folga a fatia fica menor que o cartão e os confrontos se
   sobrepõem. Margem larga de propósito: aqui é a tela de trabalho, ar sobrando
   é aceitável, sobreposição não. */
.tn-bkt[data-adm="1"] { --tn-row-x: 44px; }

/* Longe, o cartão encolhe junto — senão a fatia teria de crescer e a chave
   inteira deixaria de caber, que é justamente o objetivo do zoom. */
.tn-bkt[data-z="4"] .tn-m-hd { padding: 3px 8px; font-size: .5rem; }
.tn-bkt[data-z="4"] .tn-side { padding: 5px 8px; }
.tn-bkt[data-z="5"] .tn-m-hd { padding: 2px 6px; font-size: .46rem; }
.tn-bkt[data-z="5"] .tn-side { padding: 4px 6px; gap: 4px; }
.tn-bkt[data-z="5"] .tn-nm .tn-n1, .tn-bkt[data-z="5"] .tn-nm .tn-n2 { line-height: 1.12; }
.tn-bkt[data-z="5"] .tn-m-dt { display: none; }
.tn-bkt[data-z="4"] .tn-seed,
.tn-bkt[data-z="5"] .tn-seed { display: none; }

.tn-col-h {
  text-align: center; margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--tn-line);
}
.tn-col-h b {
  display: block; font-weight: 900; font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; color: #47586F;
}
.tn-col-h small { display: block; margin-top: 3px; font-size: .68rem; font-weight: 700; color: var(--tn-mut); }
.tn-col--final .tn-col-h b { color: var(--tn-gold); }
.tn-col--repesca .tn-col-h b { color: var(--tn-gold); }

/* Geometria de árvore: todas as colunas repartem a MESMA altura em fatias
   iguais. A rodada com metade dos jogos ganha o dobro de altura por fatia e o
   cartão cai exatamente no meio do par que o alimenta — é isso que faz a chave
   ser lida como bracket. (A 1ª coluna recebe vagas vazias no PHP quando não é
   o dobro exato da seguinte; sem elas o encaixe não fecha.) */
.tn-cells { display: flex; flex-direction: column; flex: 1; gap: 0; justify-content: space-around; }
.tn-cell {
  position: relative; flex: 1 1 0; min-height: var(--tn-row, 64px);
  display: flex; align-items: center;
}
.tn-cell--vazio { pointer-events: none; }

/* Formulário de resultado aberto (admin). O cartão fica MUITO mais alto que a
   fatia e, sendo irmão anterior, era pintado por baixo dos cartões seguintes —
   os campos ficavam cobertos e não dava para lançar o placar. Aberto, o cartão
   sobe para cima da vizinhança e ganha uma largura mínima utilizável, mesmo
   nos zooms em que a coluna é estreita. */
.tn-cell:has(.tn-m-foot details[open]),
.tn-cell.is-editing { z-index: 30; }
.tn-cell:has(.tn-m-foot details[open]) > .tn-m,
.tn-cell.is-editing > .tn-m {
  min-width: 248px;
  background: var(--tn-paper);
  box-shadow: 0 0 0 2px var(--tn-acc-pure), 0 18px 40px rgba(20, 32, 56, .22);
}
/* Nos zooms distantes o cartão fica compacto demais para o formulário:
   enquanto ele está aberto o conteúdo volta ao tamanho de leitura. */
.tn-bkt[data-z="4"] .tn-cell.is-editing .tn-side,
.tn-bkt[data-z="5"] .tn-cell.is-editing .tn-side { padding: 7px 10px; font-size: .7rem; }
.tn-bkt[data-z="4"] .tn-cell.is-editing .tn-m-hd,
.tn-bkt[data-z="5"] .tn-cell.is-editing .tn-m-hd { padding: 5px 11px; font-size: .62rem; }
.tn-bkt[data-z="4"] .tn-cell.is-editing .tn-seed,
.tn-bkt[data-z="5"] .tn-cell.is-editing .tn-seed { display: inline-flex; }
.tn-cell > .tn-m, .tn-cell > .tn-third, .tn-cell > .tn-champ-card { width: 100%; }
.tn-col:last-child .tn-cell { padding-right: 0; }

.tn-col--sem-linha .tn-cell { padding-right: 0; }

/* ─────────────────────────────────────────────
   Cartão de confronto
   ───────────────────────────────────────────── */
.tn-m {
  background: var(--tn-paper); border: 1px solid var(--tn-line);
  border-radius: var(--tn-r); overflow: hidden; box-shadow: var(--tn-shadow);
  transition: box-shadow .18s var(--tn-ease), border-color .18s var(--tn-ease);
}
.tn-m:hover { box-shadow: 0 10px 26px rgba(28, 50, 82, .1); }
.tn-m--direct  { box-shadow: 0 0 0 1px var(--tn-win-ln),  var(--tn-shadow); }
.tn-m--repesca { box-shadow: 0 0 0 1px var(--tn-gold-ln), var(--tn-shadow); }
.tn-m--bye     { background: var(--tn-sunk); border-style: dashed; }
.tn-m--open    { box-shadow: 0 0 0 1px var(--tn-acc-ln),  var(--tn-shadow); }
.tn-m--decisiva {
  border: 1.5px solid #EFC84F; background: #FFFDF7;
  box-shadow: 0 10px 28px rgba(217, 154, 0, .14);
}

/* Separador das duas chaves do torneio (ouro e prata). Cada uma é um bracket
   inteiro, com trilho e final próprios — por isso precisa de um título forte
   entre elas, senão a segunda parece continuação da primeira. */
.tn-chv-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 2px 0 14px;
}
.tn-print {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--tn-line-2); background: var(--tn-paper); color: var(--tn-ink-2);
  font: inherit; font-size: .76rem; font-weight: 800;
  transition: border-color .16s var(--tn-ease), color .16s var(--tn-ease);
}
.tn-print:hover { border-color: var(--tn-acc-ln); color: var(--tn-acc); }
.tn-print:focus-visible { outline: 2px solid var(--tn-acc); outline-offset: 2px; }
.tn-saidas { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.tn-print--pdf { border-color: var(--tn-acc-ln); color: var(--tn-acc); background: var(--tn-acc-bg); }
.tn-print--pdf:hover { border-color: var(--tn-acc); }
.tn-print[disabled] { opacity: .6; cursor: progress; }

/* Enquanto o PDF é montado, a chave é desenhada inteira e sem os controles —
   o mesmo recorte que vai para o papel. */
.tn-capturando .tn-rail,
.tn-capturando .tn-chv-bar,
.tn-capturando .tn-m-foot { display: none !important; }
.tn-capturando .tn-bkt-wrap {
  max-height: none !important; overflow: visible !important;
  border: 0 !important; background: #fff !important; padding: 0 !important;
}
/* O container da página trava em 1560px e a chave de 7 colunas passa disso.
   Durante a foto ele solta, senão a árvore sai cortada na largura. */
.tn-capturando .container { max-width: none !important; width: auto !important; }
.tn-capturando .tn-chv { max-width: none !important; }

/* O html2canvas desenha o texto um pouco mais baixo do que a caixa de linha
   calculada pelo navegador. Com entrelinha justa (1 no horário, 1.25 nos
   nomes) a última linha ficava cortada ao meio no PDF — na tela está certo.
   Só durante a captura, então, tudo ganha folga vertical.

   E quem de fato corta é o `overflow: hidden` das reticências: no PDF o
   "Vencedor do jogo N" (que não tem overflow) sai inteiro, e só o nome e o
   horário — que têm — aparecem cortados pela metade. Na captura eles abrem
   mão das reticências; com as colunas atuais os nomes cabem sem elas. */
.tn-capturando .tn-m { overflow: visible !important; }
/* No papel e na foto do PDF o cartao em edicao volta ao normal. */
.tn-capturando .tn-cell.is-editing > .tn-m { min-width: 0 !important; box-shadow: none !important; }
.tn-capturando .tn-m-hd { line-height: 1.45 !important; padding: 6px 11px !important; }
.tn-capturando .tn-side { padding: 9px 11px !important; }
.tn-capturando .tn-nm .tn-n1,
.tn-capturando .tn-nm .tn-n2,
.tn-capturando .tn-m-no,
.tn-capturando .tn-m-dt {
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.45 !important;
}
.tn-capturando .tn-tbd { line-height: 1.45 !important; }
/* Cartão mais alto pede fatia mais alta, senão os confrontos se sobrepõem
   justamente no arquivo que vai para a gráfica. */
.tn-capturando .tn-bkt[data-z] { --tn-row-x: 46px; }

/* Cabeçalho da chave: a folha que vai para a gráfica tem de se identificar
   sozinha — logo, torneio, qual das duas chaves e o resumo. */
.tn-chv-hd {
  display: flex; align-items: center; gap: 18px;
  padding: 0 0 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--tn-line);
}
.tn-chv-logo {
  width: 62px; height: 62px; flex: none; object-fit: contain;
  border-radius: 10px; background: var(--tn-sunk); padding: 4px;
  border: 1px solid var(--tn-line);
}
.tn-chv-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tn-chv-torneio {
  font-size: .68rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tn-mut);
}
.tn-chv-nome {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 1.22rem; font-weight: 900; letter-spacing: -.025em; line-height: 1.15;
}
.tn-chv-nome::before { content: ''; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.tn-chv-nome--ouro::before  { background: #E0AE28; }
.tn-chv-nome--prata::before { background: #9AA6B4; }
.tn-chv-meta {
  font-size: .74rem; font-weight: 700; color: var(--tn-ink-2);
  font-variant-numeric: tabular-nums;
}
.tn-chv-sub { margin: 2px 0 0; font-size: .74rem; color: var(--tn-mut); }

.tn-chv-tabs {
  display: inline-flex; gap: 3px; margin: 2px 0 10px; padding: 3px;
  border-radius: 11px; background: var(--tn-sunk); border: 1px solid var(--tn-line);
}
.tn-chv-t {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--tn-mut);
  font: inherit; font-size: .78rem; font-weight: 800; letter-spacing: -.01em;
  transition: background .16s var(--tn-ease), color .16s var(--tn-ease);
}
.tn-chv-t:hover { color: var(--tn-ink); }
.tn-chv-t.is-on {
  background: var(--tn-paper); color: var(--tn-ink);
  box-shadow: 0 1px 3px rgba(28, 50, 82, .12);
}
.tn-chv-t:focus-visible { outline: 2px solid var(--tn-acc); outline-offset: 2px; }
.tn-chv-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tn-chv-dot--ouro  { background: #E0AE28; }
.tn-chv-dot--prata { background: #9AA6B4; }
.tn-chv-sub { margin: 0 0 12px; font-size: .74rem; color: var(--tn-mut); }

/* Cabeçalho do cartão: número do jogo (o mesmo da chave impressa) e quando é.
   Fica acima dos dois lados para não competir com os nomes. */
.tn-m-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 11px; background: var(--tn-sunk);
  border-bottom: 1px solid #EDF1F5; font-size: .62rem; line-height: 1;
}
.tn-m-no {
  font-weight: 900; letter-spacing: .03em; color: var(--tn-acc);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tn-m-dt {
  color: var(--tn-mut); font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tn-m--decisiva .tn-m-hd { background: #FFF8E6; border-bottom-color: #F2E4BC; }

.tn-side {
  min-height: 0; display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; font-size: var(--tn-fs, .75rem); line-height: 1.25;
  border-bottom: 1px solid #EDF1F5;
}
.tn-side:last-child { border-bottom: none; }
.tn-side--win  { background: var(--tn-win-bg); font-weight: 800; }
.tn-side--lose { color: var(--tn-mut); }
.tn-side--tbd  { color: var(--tn-mut); font-style: italic; }

.tn-seed {
  display: inline-flex; width: 21px; height: 21px; flex: none;
  align-items: center; justify-content: center; border-radius: 6px;
  background: var(--tn-acc-bg); color: var(--tn-acc);
  font-weight: 900; font-size: .62rem; font-variant-numeric: tabular-nums;
}
/* Sem cabeça de chave o selo sai da linha em vez de ficar transparente: ele
   comia ~29px de cada cartão (selo + vão) e era esse espaço que faltava para
   o nome caber sem reticências. */
.tn-seed--none { display: none; }
/* Em duplas o nome ocupa DUAS linhas — cabe inteiro em vez de virar "…". */
.tn-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tn-nm .tn-n1, .tn-nm .tn-n2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.tn-nm .tn-n2 { font-weight: inherit; opacity: .82; }
.tn-nm .tn-tbd { color: var(--tn-mut); font-style: italic; }
/* "Perdedor do jogo 10 da chave OURO" — a palavra da chave sai um tom mais
   escura e reta, porque é ela que responde "de onde vem essa dupla?". */
.tn-vaga-ch { color: var(--tn-ink-2); font-weight: 800; font-style: normal; }
.tn-sets { flex: none; font-weight: 900; font-variant-numeric: tabular-nums; min-width: 13px; text-align: right; }
.tn-wo {
  flex: none; font-size: .56rem; font-weight: 900; letter-spacing: .04em;
  padding: 2px 5px; border-radius: 4px; background: var(--tn-warn-bg); color: var(--tn-warn);
}

.tn-status {
  font-size: .68rem; padding: 7px 10px; color: var(--tn-mut); font-style: italic;
  background: var(--tn-sunk); border-top: 1px solid #EEF2F6;
}

/* Rodapé de ação (admin) */
.tn-m-foot { padding: 6px 10px; border-top: 1px solid #EEF2F6; background: var(--tn-sunk); font-size: .7rem; }
.tn-m-foot summary {
  cursor: pointer; list-style: none; font-weight: 800; color: var(--tn-mut);
  display: flex; align-items: center; gap: 5px; transition: color .15s var(--tn-ease);
}
.tn-m-foot summary::-webkit-details-marker { display: none; }
.tn-m-foot summary:hover, .tn-m-foot details[open] summary { color: var(--tn-acc); }
.tn-m-foot details[open] summary { margin-bottom: 9px; }
.tn-f-sec {
  font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tn-mut); margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
}
.tn-f .tn-f-sec:not(:first-of-type) { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--tn-line-2); }
.tn-f-acoes { display: flex; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--tn-line-2); }
.tn-f { display: flex; flex-direction: column; gap: 7px; padding-bottom: 3px; }
.tn-f-row { display: flex; align-items: center; gap: 8px; font-size: .74rem; }
.tn-f-row .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tn-ink-2); }
.tn-f input[type=number], .tn-f input[type=date], .tn-f input[type=time], .tn-f input[type=text], .tn-f select {
  padding: 6px 8px; border-radius: 7px; border: 1px solid var(--tn-line-2);
  background: var(--tn-paper); color: var(--tn-ink); font-family: inherit;
  font-size: .8rem; font-weight: 700;
}
.tn-f input[type=number] { width: 50px; text-align: center; font-variant-numeric: tabular-nums; }
.tn-f input:focus-visible, .tn-f select:focus-visible {
  outline: 2px solid var(--tn-acc); outline-offset: 1px; border-color: var(--tn-acc);
}
.tn-hint { font-size: .68rem; color: var(--tn-mut); line-height: 1.45; }

/* ─────────────────────────────────────────────
   3º lugar e campeão
   ───────────────────────────────────────────── */
.tn-third {
  margin-top: 16px; border: 1px dashed var(--tn-line-2); border-radius: 12px;
  padding: 12px; background: var(--tn-sunk);
}
.tn-third > b { display: block; font-size: .72rem; font-weight: 900; margin-bottom: 7px; }
.tn-third .tn-m { box-shadow: none; }
.tn-third p { font-size: .68rem; color: var(--tn-mut); margin: 7px 0 0; }

.tn-champ-card {
  text-align: center; padding: 24px 14px;
  background: var(--tn-paper); border: 1px solid var(--tn-line);
  border-radius: 14px; box-shadow: var(--tn-shadow-l);
}
.tn-champ-card .cup { font-size: 1.9rem; line-height: 1; }
.tn-champ-card b {
  display: block; margin: 9px 0 5px; font-size: .72rem;
  font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--tn-gold);
}
.tn-champ-card span { font-size: .8rem; color: var(--tn-mut); font-weight: 700; }
.tn-champ-card.is-on { border-color: var(--tn-gold-ln); background: var(--tn-gold-bg); }
.tn-champ-card.is-on span { color: var(--tn-ink); font-weight: 800; }

/* Faixa do campeão no topo, quando já houver */
.tn-champ {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 18px;
  border: 1px solid var(--tn-gold-ln); border-radius: var(--tn-r); background: var(--tn-gold-bg);
}
.tn-champ-ico { font-size: 1.7rem; color: var(--tn-gold); line-height: 1; }
.tn-champ-k { font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--tn-gold); }
.tn-champ-n { font-size: 1.05rem; font-weight: 800; }

/* ─────────────────────────────────────────────
   Conectores (só nas fases em que dois cartões
   realmente se encontram no seguinte)
   ───────────────────────────────────────────── */
/* Conectores. Com a geometria de árvore os dois cartões de um par ficam em
   fatias vizinhas, então a chave "⊐" tem exatamente a altura de uma fatia e
   encosta no cartão seguinte. (Ficaram desligados enquanto as colunas eram
   empilhadas do topo: ali a linha apontaria para o lugar errado.) */
.tn-join {
  /* left:100% = começa no VÃO entre as colunas. Com `100% - gap` a chave era
     desenhada por cima do cartão. */
  position: absolute; left: 100%; top: 50%;
  width: calc(var(--tn-gap) / 2); height: 100%;
  border-top: 2px solid var(--tn-line-2);
  border-right: 2px solid var(--tn-line-2);
  border-bottom: 2px solid var(--tn-line-2);
  border-radius: 0 8px 8px 0; pointer-events: none;
}
.tn-join::after {
  content: ''; position: absolute; left: 100%; top: 50%;
  width: calc(var(--tn-gap) / 2); height: 2px; margin-top: -1px;
  background: var(--tn-line-2);
}
.tn-join--reta {
  top: 50%; margin-top: -1px; width: var(--tn-gap); height: 2px;
  border: 0; border-radius: 0; background: var(--tn-line-2);
}
.tn-join--reta::after { display: none; }

/* Alimentador único (uma preliminar caindo num lado só): o destino está meia
   fatia acima ou abaixo, então a linha desvia no vão em vez de sair reta e
   apontar para o vazio entre os dois cartões. */
.tn-join--desce, .tn-join--sobe {
  left: 100%; width: calc(var(--tn-gap) / 2); height: 50%;
  border: 0; border-right: 2px solid var(--tn-line-2); border-radius: 0;
}
.tn-join--desce { top: 50%;  border-top: 2px solid var(--tn-line-2);    border-top-right-radius: 8px; }
.tn-join--sobe  { top: auto; bottom: 50%; border-bottom: 2px solid var(--tn-line-2); border-bottom-right-radius: 8px; }
.tn-join--desce::after, .tn-join--sobe::after {
  content: ''; position: absolute; left: 100%; top: auto;
  width: calc(var(--tn-gap) / 2); height: 2px; margin: 0;
  background: var(--tn-line-2);
}
.tn-join--desce::after { bottom: -2px; }
.tn-join--sobe::after  { top: -2px; }

.tn-cell.is-path > .tn-m { box-shadow: 0 0 0 2px var(--tn-acc-pure), var(--tn-shadow); }
.tn-cell.is-path .tn-join { border-color: var(--tn-acc-pure); }
.tn-cell.is-path .tn-join::after { background: var(--tn-acc-pure); }
.tn-bkt.is-filtering .tn-cell:not(.is-path) > .tn-m { opacity: .32; }

/* ─────────────────────────────────────────────
   Trilho de fases (telas estreitas)
   ───────────────────────────────────────────── */
.tn-rail {
  display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 4px 0 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.tn-rail::-webkit-scrollbar { display: none; }
.tn-rail-b {
  flex: none; scroll-snap-align: start; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 12px; border-radius: 10px; white-space: nowrap;
  border: 1px solid var(--tn-line); background: var(--tn-paper); color: var(--tn-ink-2);
  font-family: inherit; font-size: .72rem; font-weight: 800;
  transition: background .15s var(--tn-ease), color .15s var(--tn-ease), border-color .15s var(--tn-ease);
}
.tn-rail-b small { font-size: .6rem; font-weight: 700; opacity: .7; }

/* Zoom: quantas rodadas cabem de uma vez. Fica na ponta da régua. */
.tn-zoom {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 10px; border: 1px solid var(--tn-line); background: var(--tn-paper);
}
.tn-zoom-b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--tn-ink-2); font-size: .8rem;
}
.tn-zoom-b:hover:not(:disabled) { background: var(--tn-sunk); color: var(--tn-acc); }
.tn-zoom-b:disabled { opacity: .3; cursor: default; }
.tn-zoom-b:focus-visible { outline: 2px solid var(--tn-acc); outline-offset: 1px; }
.tn-zoom-n {
  min-width: 34px; text-align: center; font-size: .62rem; font-weight: 900;
  color: var(--tn-mut); font-variant-numeric: tabular-nums;
}
.tn-rail-b:hover { border-color: var(--tn-line-2); }
.tn-rail-b:focus-visible { outline: 2px solid var(--tn-acc); outline-offset: 2px; }
.tn-rail-b[aria-selected="true"] {
  background: var(--tn-acc-pure); border-color: var(--tn-acc-pure); color: #fff;
}
.tn-rail-b[aria-selected="true"] small { opacity: .85; }

/* ─────────────────────────────────────────────
   Regras
   ───────────────────────────────────────────── */
.tn-rules {
  margin-top: 22px; background: var(--tn-paper); border: 1px solid var(--tn-line);
  border-radius: 17px; padding: 18px 20px; box-shadow: var(--tn-shadow-l);
}
.tn-rules h3 { margin: 0 0 14px; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.tn-rules h3 i { color: var(--tn-acc); }
.tn-rules-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.tn-rule { border: 1px solid #E8EDF3; border-radius: 12px; padding: 13px; background: var(--tn-sunk); }
.tn-rule b { display: block; font-size: .74rem; margin-bottom: 5px; font-weight: 900; }
.tn-rule p { margin: 0; font-size: .74rem; color: var(--tn-mut); line-height: 1.5; }

/* ─────────────────────────────────────────────
   Barra, busca, avisos, vazios
   ───────────────────────────────────────────── */
.tn-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px; margin-bottom: 16px;
  background: var(--tn-paper); border: 1px solid var(--tn-line); border-radius: var(--tn-r);
}
.tn-find { position: relative; flex: 1; min-width: 190px; max-width: 340px; }
.tn-find input {
  width: 100%; padding: 9px 32px 9px 34px; border-radius: 9px;
  border: 1px solid var(--tn-line-2); background: var(--tn-paper);
  color: var(--tn-ink); font-family: inherit; font-size: .8rem;
}
.tn-find input::placeholder { color: var(--tn-mut); }
.tn-find input:focus-visible { outline: 2px solid var(--tn-acc); outline-offset: 1px; border-color: var(--tn-acc); }
.tn-find .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tn-mut); font-size: .86rem; pointer-events: none; }
.tn-find .clr {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--tn-mut); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 3px 5px; border-radius: 5px;
}
.tn-find .clr:hover { color: var(--tn-warn); background: var(--tn-warn-bg); }

.tn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: 9px; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: .78rem; font-weight: 800;
  border: 1px solid var(--tn-line-2); background: var(--tn-paper); color: var(--tn-ink-2);
  transition: background .15s var(--tn-ease), border-color .15s var(--tn-ease), color .15s var(--tn-ease);
}
.tn-btn:hover { background: #F3F6FA; color: var(--tn-ink); }
.tn-btn:focus-visible { outline: 2px solid var(--tn-acc); outline-offset: 2px; }
.tn-btn[disabled] { opacity: .45; cursor: not-allowed; }
.tn-btn--primary { background: var(--tn-acc-pure); border-color: var(--tn-acc-pure); color: #fff; }
.tn-btn--primary:hover { background: var(--tn-acc); border-color: var(--tn-acc); color: #fff; }
.tn-btn--danger { color: var(--tn-warn); border-color: #F3B9B5; }
.tn-btn--danger:hover { background: var(--tn-warn-bg); border-color: var(--tn-warn); color: var(--tn-warn); }
.tn-btn--sm { padding: 5px 10px; font-size: .72rem; border-radius: 7px; }

.tn-note-box {
  padding: 11px 14px; border-radius: 9px; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--tn-line); background: var(--tn-sunk); color: var(--tn-ink-2);
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px;
}
.tn-note-box--ok  { background: var(--tn-win-bg);  border-color: var(--tn-win-ln); color: #0B5F3E; }
.tn-note-box--bad { background: var(--tn-warn-bg); border-color: #F3B9B5; color: #8E1D17; }

.tn-empty { text-align: center; padding: 52px 20px; color: var(--tn-mut); }
.tn-empty i { font-size: 2.1rem; opacity: .4; display: block; margin-bottom: 10px; }
.tn-empty p { font-size: .84rem; margin: 0 0 4px; }

/* Refazer sorteio — recolhido de propósito */
.tn-redo { margin-top: 26px; border-top: 1px solid var(--tn-line); padding-top: 14px; }
.tn-redo summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 800; color: var(--tn-mut); padding: 5px 2px; border-radius: 6px;
}
.tn-redo summary::-webkit-details-marker { display: none; }
.tn-redo summary:hover, .tn-redo[open] summary { color: var(--tn-warn); }
.tn-redo summary:focus-visible { outline: 2px solid var(--tn-acc); outline-offset: 2px; }
.tn-redo-body {
  margin-top: 10px; padding: 14px 16px; max-width: 62ch;
  border: 1px solid #F3B9B5; border-radius: 9px; background: var(--tn-warn-bg);
  font-size: .8rem; color: #8E1D17; line-height: 1.5;
}

/* ─────────────────────────────────────────────
   Estreito: uma fase por vez, escolhida no trilho.
   Mesma árvore de DOM — nada é renderizado duas vezes.
   ───────────────────────────────────────────── */
/* No celular a chave NÃO vira uma fase por vez: ela continua sendo a árvore
   inteira, arrastada dentro do painel — é assim que a chave impressa é lida e
   é o que o app do US Open faz. A régua leva até a rodada; o zoom decide
   quantas cabem na tela. */
@media (max-width: 1079px) {
  .tn-bkt-wrap { max-height: 74vh; padding: 12px; }
  .tn-chv-hd   { gap: 12px; }
  .tn-chv-logo { width: 48px; height: 48px; }
  .tn-chv-nome { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tn *, .tn *::before, .tn *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}

/* ─────────────────────────────────────────────
   Impressão / PDF — a folha que vai para a gráfica
   ─────────────────────────────────────────────
   Na tela só uma chave aparece por vez e, em telas estreitas, só uma fase.
   No papel isso não serve: as DUAS chaves saem inteiras, uma por página,
   com todas as fases lado a lado. A3 deitado porque a chave de 41 duplas
   tem 7 colunas — em A4 os nomes viram tarja preta. */
@media print {
  @page { size: A3 landscape; margin: 10mm; }

  /* Fora tudo que é navegação, aviso e formulário: papel não clica.
     São TRÊS cascas diferentes — a pública (`.pub-topbar`, `.pub-nav`), a do
     admin (`.topbar`, `.sb-nav`, `.sb-overlay`) e os convites de PWA/push
     (`.pwa-install-banner`, `#pushBanner`). Cada uma delas já apareceu no meio
     de um PDF; a do admin é fixa e caía bem em cima da chave. */
  .pub-topbar, .pub-nav, .topbar, .sb-nav, .sb-overlay,
  nav, .nav, footer, #pushBanner, .pwa-install-banner, .tn-voltar,
  .tn-bar, .tn-chv-bar, .tn-chv-tabs, .tn-print, .tn-saidas,
  .tn-rail, .tn-m-foot, .tn-prog, .tn-hero, .tn-head, .tn-rules,
  .tn-note-box, .tn-actions { display: none !important; }

  /* As barras acima são fixas na tela; escondê-las já resolve. Se aparecer
     outra grudada no meio da folha, é só somar a classe dela na lista. */

  body { background: #fff !important; }
  .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }

  .tn {
    --tn-col: 190px; --tn-gap: 14px; --tn-r: 8px;
    --tn-shadow: none; --tn-shadow-l: none;
  }

  /* As duas chaves, cada uma na sua página. */
  .tn-chv[hidden] { display: block !important; }
  .tn-chv { break-inside: avoid; }
  .tn-chv + .tn-chv { break-before: page; }

  /* Nada cortado pelo painel de rolagem: no papel a chave sai inteira. */
  .tn-col.is-off, .tn-col.is-empty { display: flex !important; }
  .tn-bkt-wrap {
    overflow: visible !important; max-height: none !important;
    padding: 0 !important; border: 0 !important; background: none !important;
  }
  .tn-bkt { min-width: 0 !important; }
  /* Zoom fixo no papel: o nível escolhido na tela não manda no PDF.
     A fatia tem de continuar maior que o cartão, senão os confrontos da 1ª
     coluna se encavalam — o tamanho da folha é que se ajusta (ver o @page
     calculado no partial a partir do tamanho real da chave). */
  /* --tn-print-scale é calculado no partial a partir do tamanho real da chave
     e da folha escolhida: sem ele a chave do 130+ ocupava um canto da A4 e o
     resto era papel em branco. */
  .tn-bkt[data-z] {
    --tn-k: var(--tn-print-scale, 1);
    --tn-col: calc(182px * var(--tn-k));
    --tn-gap: calc(13px * var(--tn-k));
    --tn-row-base: calc(74px * var(--tn-k));
    --tn-row-x: 0px;
    --tn-fs: calc(.54rem * var(--tn-k));
  }
  .tn-bkt[data-z] .tn-m-hd {
    padding: calc(2px * var(--tn-k)) calc(7px * var(--tn-k));
    font-size: calc(.47rem * var(--tn-k));
  }
  .tn-bkt[data-z] .tn-side {
    padding: calc(4px * var(--tn-k)) calc(7px * var(--tn-k));
    gap: calc(5px * var(--tn-k));
  }
  .tn-bkt[data-z] .tn-seed { display: none; }
  .tn-bkt[data-z] .tn-m-dt { display: inline; }
  .tn-cell, .tn-m, .tn-third, .tn-champ-card { break-inside: avoid; }

  .tn-chv-hd { padding-bottom: 8px; margin-bottom: 12px; }
  .tn-chv-logo { width: 54px; height: 54px; }
  .tn-chv-nome { font-size: 1.05rem; }

  /* Cartões compactos: 16 confrontos numa coluna precisam caber na altura. */
  .tn-col-h { padding-bottom: 6px; margin-bottom: 8px; }
  .tn-col-h b { font-size: .72rem; }
  .tn-col-h small { font-size: .58rem; }
  .tn-cells { gap: 6px; }
  .tn-m { box-shadow: none !important; border: 1px solid #B9C4D4; }
  .tn-cell.is-editing > .tn-m { min-width: 0 !important; box-shadow: none !important; }
  .tn-m-hd { padding: 2px 7px; font-size: .5rem; }
  .tn-side { min-height: 0; padding: 3px 7px; font-size: .58rem; gap: 5px; }
  .tn-seed { width: 15px; height: 15px; font-size: .5rem; }
  .tn-nm .tn-n1, .tn-nm .tn-n2 { line-height: 1.15; }
  .tn-sets { font-size: .66rem; }

  /* O verde/dourado do anel some na impressão em preto e branco; o
     vencedor precisa continuar legível como vencedor. */
  .tn-side--win { background: #E8E8E8 !important; }
  .tn-side--lose { color: #6B6B6B !important; }
  .tn-tbd { color: #6B6B6B !important; }

  .tn { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}