/* ==========================================================================
   NFLS.AI Arena · Sistema de design
   Redesign de 07/10/2026 (versão B) e blend Estádio de 09/10/2026.
   Carregado por último em todas as páginas. Duas camadas:
   1. Fundação: fontes próprias, tokens, escala tipográfica e componentes ds-*.
   2. Harmonização: alinha os componentes antigos (cabeçalho, botões, rótulos,
      breadcrumbs, rodapé) à mesma escala, sem mexer no conteúdo das páginas.

   Blend Estádio: noite de estádio editada como jornal. Três famílias, um papel
   para cada uma:
   - Arena Serif (Source Serif 4): títulos e leitura;
   - Arena Display (Archivo): interface, placar e números grandes;
   - Arena Mono (Martian Mono): dado, horário e rótulo.
   Escala única de 8 tamanhos: 12, 14, 16, 18, 22, 28, 40 e 56 px.
   Regras da casa: um H1 por página; caixa alta só em rótulos; nada abaixo de
   12px; vermelho para a ação principal e para alerta; ciano para links e dados;
   ouro para resultado final e destaque.
   ========================================================================== */

/* Archivo: instância com largura 62–100% (todas as larguras usadas no portal). */
@font-face { font-family: "Arena Display"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 100%; src: url("assets/fonts/archivo-var-latin.woff2") format("woff2-variations"), url("assets/fonts/archivo-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Arena Display"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 100%; src: url("assets/fonts/archivo-var-latin-ext.woff2") format("woff2-variations"), url("assets/fonts/archivo-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Arena Serif: Source Serif 4 com peso 400–700 e tamanho óptico automático (OFL, renomeada). */
@font-face { font-family: "Arena Serif"; font-style: normal; font-display: swap; font-weight: 400 700; src: url("assets/fonts/arena-serif-latin-normal.woff2") format("woff2-variations"), url("assets/fonts/arena-serif-latin-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Arena Serif"; font-style: normal; font-display: swap; font-weight: 400 700; src: url("assets/fonts/arena-serif-latin-ext-normal.woff2") format("woff2-variations"), url("assets/fonts/arena-serif-latin-ext-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Arena Serif"; font-style: italic; font-display: swap; font-weight: 400 700; src: url("assets/fonts/arena-serif-latin-italic.woff2") format("woff2-variations"), url("assets/fonts/arena-serif-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Arena Serif"; font-style: italic; font-display: swap; font-weight: 400 700; src: url("assets/fonts/arena-serif-latin-ext-italic.woff2") format("woff2-variations"), url("assets/fonts/arena-serif-latin-ext-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Arena Mono: Martian Mono com peso 400–700 e largura 75–100%. */
@font-face { font-family: "Arena Mono"; font-style: normal; font-display: swap; font-weight: 400 700; font-stretch: 75% 100%; src: url("assets/fonts/martian-mono-latin-wdth-normal.woff2") format("woff2-variations"), url("assets/fonts/martian-mono-latin-wdth-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Arena Mono"; font-style: normal; font-display: swap; font-weight: 400 700; font-stretch: 75% 100%; src: url("assets/fonts/martian-mono-latin-ext-wdth-normal.woff2") format("woff2-variations"), url("assets/fonts/martian-mono-latin-ext-wdth-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Reservas com as medidas das fontes próprias: enquanto a fonte chega, a fonte do
   sistema ocupa quase o mesmo espaço e a troca não muda as quebras de linha (deslocamento ~0).
   Uma face regular (até 549) e uma negrita (550 em diante) por família, para o negrito usar
   a negrita de verdade, que é mais larga, e não um negrito sintético com a largura da regular.
   Tamanhos medidos no Chromium sem hinting (avanço fracionário, como no iPhone, Android, Mac e
   Windows), com texto em português; Liberation Serif, Sans e Mono têm as medidas de Times New
   Roman, Arial e Courier New: Arena Serif 400 a 16-20 px pede 108,9%, 600 a 28-40 px pede
   101,5% (o tamanho óptico estreita a serifada nos títulos); Arena Display pede 98,5% na regular
   (entre 400 e 500) e 96% na negrita (600); Arena Mono, 116,65%. Georgia, Noto Serif, Helvetica
   Neue e Roboto saem da largura média de cada uma (capsize) em relação a Times New Roman ou
   Arial. Droid Sans Mono e Noto Sans Mono têm a mesma largura de 0,6 em de Courier New (Android). */
@font-face { font-family: "Arena Serif Georgia"; font-weight: 100 549; src: local("Georgia"); size-adjust: 99.23%; ascent-override: 104.41%; descent-override: 33.76%; line-gap-override: 0%; }
@font-face { font-family: "Arena Serif Georgia"; font-weight: 550 900; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 84.67%; ascent-override: 122.36%; descent-override: 39.57%; line-gap-override: 0%; }
@font-face { font-family: "Arena Serif Noto"; font-weight: 100 549; src: local("Noto Serif"), local("NotoSerif"); size-adjust: 91.97%; ascent-override: 112.65%; descent-override: 36.43%; line-gap-override: 0%; }
@font-face { font-family: "Arena Serif Noto"; font-weight: 550 900; src: local("Noto Serif Bold"), local("NotoSerif-Bold"); size-adjust: 85.76%; ascent-override: 120.80%; descent-override: 39.06%; line-gap-override: 0%; }
@font-face { font-family: "Arena Serif Times"; font-weight: 100 549; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif"); size-adjust: 108.90%; ascent-override: 95.13%; descent-override: 30.76%; line-gap-override: 0%; }
@font-face { font-family: "Arena Serif Times"; font-weight: 550 900; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("LiberationSerif-Bold"); size-adjust: 101.50%; ascent-override: 102.07%; descent-override: 33.00%; line-gap-override: 0%; }
@font-face { font-family: "Arena UI Helvetica"; font-weight: 100 549; src: local("Helvetica Neue"), local("HelveticaNeue"); size-adjust: 97.58%; ascent-override: 89.98%; descent-override: 21.52%; line-gap-override: 0%; }
@font-face { font-family: "Arena UI Helvetica"; font-weight: 550 900; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"); size-adjust: 96.00%; ascent-override: 91.46%; descent-override: 21.88%; line-gap-override: 0%; }
@font-face { font-family: "Arena UI Arial"; font-weight: 100 549; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); size-adjust: 98.50%; ascent-override: 89.14%; descent-override: 21.32%; line-gap-override: 0%; }
@font-face { font-family: "Arena UI Arial"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 96.00%; ascent-override: 91.46%; descent-override: 21.88%; line-gap-override: 0%; }
@font-face { font-family: "Arena UI Roboto"; font-weight: 100 549; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 98.72%; ascent-override: 88.94%; descent-override: 21.27%; line-gap-override: 0%; }
@font-face { font-family: "Arena UI Roboto"; font-weight: 550 900; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 101.92%; ascent-override: 86.14%; descent-override: 20.60%; line-gap-override: 0%; }
@font-face { font-family: "Arena Mono Courier"; font-weight: 100 900; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("LiberationMono"), local("Droid Sans Mono"), local("DroidSansMono"), local("Noto Sans Mono"), local("NotoSansMono-Regular"); size-adjust: 116.65%; ascent-override: 85.73%; descent-override: 17.15%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  /* Superfícies: a noite do estádio */
  --ds-night: #060c18;
  --ds-night-deep: #040912;
  --ds-night-2: #0b1528;
  --ds-night-3: #122039;
  --ds-night-4: #1a2c4c;
  --ds-line: rgba(237, 242, 249, .10);
  --ds-line-strong: rgba(237, 242, 249, .22);
  /* Texto (contraste sobre a Noite: 17,4 · 10,1 · 6,9 para 1; sobre a superfície mais clara, a night-4: 12,4 · 7,2 · 4,9) */
  --ds-ink: #edf2f9;
  --ds-ink-2: #aebbd0;
  --ds-ink-3: #8a9bb4;
  /* Papéis de cor: ciano = link e dado; ouro = final e destaque; vermelho = ação principal (fundo) e alerta (texto) */
  --ds-red: #c8283d;
  --ds-red-hover: #d6334a;
  --ds-red-ink: #ff6b7d;
  --ds-cyan: #3fd3f2;
  --ds-cyan-soft: rgba(63, 211, 242, .12);
  --ds-gold: #f4c35a;
  --ds-gold-soft: rgba(244, 195, 90, .12);
  --ds-win: #4be0a0;
  /* Tipografia: três papéis */
  --ds-font-serif: "Arena Serif", "Arena Serif Georgia", "Arena Serif Noto", "Arena Serif Times", Georgia, "Times New Roman", serif;
  --ds-font-ui: "Arena Display", "Arena UI Helvetica", "Arena UI Arial", "Arena UI Roboto", "Helvetica Neue", Arial, sans-serif;
  --ds-font-mono: "Arena Mono", "Arena Mono Courier", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ds-font-display: var(--ds-font-ui);
  --ds-font-text: var(--ds-font-ui);
  /* Escala de 8 tamanhos. Os fluidos vão do celular (até 800px) ao desktop (1440px). */
  --ds-h1: clamp(40px, 2.5vw + 20px, 56px);
  --ds-h2: clamp(22px, .9375vw + 14.5px, 28px);
  --ds-h3: clamp(18px, .625vw + 13px, 22px);
  --ds-lede: clamp(18px, .625vw + 13px, 22px);
  --ds-num: clamp(40px, 2.5vw + 20px, 56px);
  --ds-num-sm: clamp(28px, 1.875vw + 13px, 40px);
  --ds-body: 18px;
  --ds-ui: 16px;
  --ds-small: 14px;
  --ds-label: 12px;
  /* Espaço (grade de 8px) */
  --ds-gutter: clamp(20px, 5vw, 72px);
  --ds-max: 1240px;
  --ds-read: 68ch;
  --ds-section: clamp(64px, 8vw, 104px);
  --ds-radius: 10px;
  --ds-radius-sm: 6px;
  --ds-shadow: 0 24px 48px -28px rgba(0, 0, 0, .8);
  --ds-header-h: 72px;
  --ds-tabbar-h: 0px;
  --ds-ease: cubic-bezier(.2, .7, .2, 1);

  /* Mantém os tokens antigos coerentes com o sistema novo */
  --navy: var(--ds-night);
  --red: var(--ds-red);
  --cyan: var(--ds-cyan);
  --white: var(--ds-ink);
  --steel: var(--ds-ink-3);
  --display: var(--ds-font-display);
  --body: var(--ds-font-text);
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--ds-font-ui); font-size: var(--ds-ui); line-height: 1.55; color: var(--ds-ink); background: var(--ds-night); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; font-synthesis-style: none; }
/* Atmosfera: luz fria de refletor no alto à esquerda e calor de placar à direita, com grão de
   filme que evita degraus no degradê. Fica no topo do documento (rola junto com a página, sem
   camada fixa) e some antes do fim da primeira tela. */
body::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: min(1100px, 150vh); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), radial-gradient(70vw 42vw at 6% -10%, rgba(63, 211, 242, .11), transparent 62%), radial-gradient(56vw 36vw at 98% -8%, rgba(244, 195, 90, .06), transparent 60%), linear-gradient(180deg, #08132a, rgba(6, 12, 24, 0) 70%); -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); }
:where(h1, h2, h3) { font-family: var(--ds-font-serif); color: var(--ds-ink); text-wrap: balance; }
:where(h4, h5, h6) { font-family: var(--ds-font-ui); color: var(--ds-ink); text-wrap: balance; }
/* dd entra junto: definições (Método dos Palpites, fichas) não terminam com uma palavra sozinha */
:where(p, li, dd) { text-wrap: pretty; }
::selection { background: var(--ds-cyan); color: var(--ds-night); }
img { max-width: 100%; }

/* Escala única. O H1 é o maior texto da página: serifa, em frase normal (sem caixa alta).
   Palavra em itálico no título ganha o ouro do placar. */
main h1, body > section h1, .ds-h1 {
  font-family: var(--ds-font-serif) !important;
  font-size: var(--ds-h1) !important;
  font-stretch: normal !important;
  font-weight: 600 !important;
  line-height: 1.04 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  margin: 0;
}
main h1 em, main h1 i { font-style: italic; font-weight: 500; color: var(--ds-gold); }
main h2, .ds-h2 {
  font-family: var(--ds-font-serif) !important;
  font-size: var(--ds-h2) !important;
  font-stretch: normal !important;
  font-weight: 600 !important;
  line-height: 1.14 !important;
  letter-spacing: -.012em !important;
  text-transform: none !important;
}
main h2 em { font-style: italic; color: var(--ds-ink-2); }
main h3, .ds-h3 {
  font-family: var(--ds-font-serif) !important;
  font-size: var(--ds-h3) !important;
  font-stretch: normal !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
}
main h4 { font-family: var(--ds-font-ui); font-size: var(--ds-ui); font-weight: 700; letter-spacing: 0; text-transform: none; }
/* Títulos dentro de cartões e listas densas ficam um degrau abaixo */
main :is(article, li, .card, [class*="card"], [class*="tile"], dialog, details, aside) h2:not(.ds-h2) { font-size: var(--ds-h3) !important; }
main :is(article, li, [class*="card"], [class*="tile"], aside) h3 { font-size: var(--ds-body) !important; }

main p { font-size: inherit; }
/* Leitura em serifa: parágrafo sem classe, citação e definição. Em :where() para que o
   componente que escolheu a própria fonte prevaleça. */
main :where(p:not([class]), blockquote, dd:not([class])) { font-family: var(--ds-font-serif); }
/* Link no meio de texto ou de título fica com a letra do texto (styles.css punha a da interface em todo link) */
main :is(h1, h2, h3, h4, p, li, dd, blockquote, figcaption) > a:not([class]) { font-family: inherit; font-size: inherit; }
/* Data e hora ficam com a letra e o tamanho da linha em que estão: mono na linha de dados,
   serifa no meio da frase (styles.css punha a da interface, em 12px, em todo <time>) */
main time { font-family: inherit; font-size: inherit; line-height: inherit; }
/* Texto miúdo: 14px no texto de 16 e 18, 12px no de 14 (arredondado para a escala) */
main small, main figcaption, main caption { font-size: max(12px, .82em); font-size: round(down, max(12px, .875em), 2px); }

/* Rótulo (eyebrow) em monoespaçada: no máximo um por seção */
.ds-label,
main :is(.eyebrow, .kicker, .welcome-kicker, [class*="__eyebrow"], [class$="-eyebrow"], [class*="-kicker"], .answer-kicker) {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-family: var(--ds-font-mono) !important;
  font-size: var(--ds-label) !important;
  font-stretch: normal !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
  color: var(--ds-cyan);
}
main :is(.welcome-kicker, .kicker)::before, main .eyebrow::before { content: none !important; }

/* Piso de legibilidade: nada abaixo de 12px */
/* Em :where() para que o tamanho definido por cada componente prevaleça */
:where(body :is(small, sup, sub, .label, [class*="__meta"], [class*="__source"], [class*="__note"], [class*="caption"])) { font-size: max(12px, 1em); }

a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
main a:not([class]) { color: var(--ds-cyan); }
/* Hover só em quem tem mouse: no toque, o estado de hover ficava preso no último link ou botão tocado */
@media (hover: hover) { main a:not([class]):hover { color: var(--ds-ink); } }

/* --------------------------------------------------------------------------
   2. Componentes ds-*
   -------------------------------------------------------------------------- */
.ds-wrap { width: min(100% - 2 * var(--ds-gutter), var(--ds-max)); margin-inline: auto; }
.ds-section { padding-block: var(--ds-section); }
.ds-section + .ds-section { border-top: 1px solid var(--ds-line); }
.ds-section--deep { background: var(--ds-night-deep); }
.ds-section--raised { background: linear-gradient(180deg, var(--ds-night-2), var(--ds-night)); }

.ds-pagehead { position: relative; padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--ds-line); overflow: hidden; }
.ds-pagehead::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, var(--ds-red) 0 96px, transparent 96px); }
.ds-pagehead__inner { width: min(100% - 2 * var(--ds-gutter), var(--ds-max)); margin-inline: auto; display: grid; gap: 18px; }
/* Larguras de lede em em, não em ch: o "0" da Arena Serif mede 0,5 em (60ch = 30em), mas o da fonte
   reserva é mais largo, e o lede mudava de quebra quando a fonte chegava (até 0,28 de CLS no iPad). */
.ds-pagehead__lede { max-width: 30em; margin: 0; font-family: var(--ds-font-serif); font-size: var(--ds-lede); line-height: 1.5; color: var(--ds-ink-2); }
.ds-pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
/* No celular, botão e link do cabeçalho sempre um embaixo do outro (já era assim a 390 px em
   todas as páginas com dois): a fileira não muda de uma para duas linhas quando a fonte chega. */
@media (max-width: 480px) { .ds-pagehead__actions:has(> :nth-child(2)) { flex-direction: column; align-items: flex-start; } }

.ds-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; font-size: 14px !important; font-weight: 500; color: var(--ds-ink-3); }
.ds-crumbs a, nav .ds-crumbs a { display: inline; min-height: 0; padding: 0; color: var(--ds-ink-2) !important; font: 500 14px/1.4 var(--ds-font-text) !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none; }
@media (hover: hover) { .ds-crumbs a:hover { color: var(--ds-cyan); } }
.ds-crumbs [aria-current] { color: var(--ds-ink); }
/* A página atual (repetida no título logo abaixo) fica na linha dos níveis de cima e encurta
   com reticências em vez de descer para uma segunda linha; no celular, sai da vista (continua
   para o leitor de tela) e a trilha mostra só os níveis de cima. A altura do cabeçalho não
   depende de um punhado de pixels de largura das letras (a troca da fonte não empurra a página). */
.ds-crumbs > li[aria-current="page"]:last-child { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .ds-crumbs > li[aria-current="page"]:last-child { position: absolute; flex: none; width: 1px; height: 1px; clip-path: inset(50%); }
}

.ds-sectionhead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(24px, 3vw, 40px); }
.ds-sectionhead > div { max-width: 62ch; }
.ds-sectionhead h2 { margin: 0; }
.ds-sectionhead p { margin: 10px 0 0; color: var(--ds-ink-2); font-family: var(--ds-font-serif); font-size: var(--ds-body); line-height: 1.5; }

.ds-btn, .ds-btn--primary, .ds-btn--secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-text); font-size: 16px; font-weight: 650; letter-spacing: 0; text-transform: none; text-decoration: none;
  cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.ds-btn--primary { background: var(--ds-red); color: #fff; }
@media (hover: hover) { .ds-btn--primary:hover { background: var(--ds-red-hover); transform: translateY(-1px); } }
.ds-btn--secondary { background: transparent; color: var(--ds-ink); border-color: var(--ds-line-strong); }
@media (hover: hover) { .ds-btn--secondary:hover { border-color: var(--ds-ink-2); } }
.ds-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ds-cyan); font-weight: 650; text-decoration: none; }
/* Setas e sinais desenhados pelo CSS não entram no nome lido pelo leitor de tela ("Abrir o guia", não
   "Abrir o guia seta para a direita"). A primeira declaração fica para navegador sem texto alternativo. */
.ds-link::after { content: "→"; content: "→" / ""; transition: transform .18s ease; }
@media (hover: hover) { .ds-link:hover::after { transform: translateX(3px); } }
@media (hover: hover) { .ds-link:hover { color: var(--ds-ink); } }
/* Link longo que pode quebrar linha: inline, para a seta seguir a última palavra (no inline-flex ela ficaria na borda) */
.ds-link.ds-link--flow { display: inline; }
.ds-link.ds-link--flow::after { content: "\00a0→"; content: "\00a0→" / ""; position: relative; left: 0; transition: left .18s ease; }
@media (hover: hover) { .ds-link.ds-link--flow:hover::after { transform: none; left: 3px; } }

.ds-card { position: relative; display: block; padding: clamp(20px, 2vw, 28px); background: var(--ds-night-2); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); color: inherit; text-decoration: none; transition: border-color .18s ease, transform .18s ease, background-color .18s ease; }
@media (hover: hover) { a.ds-card:hover, .ds-card:has(> a:hover) { border-color: rgba(63, 211, 242, .55); transform: translateY(-2px); } }
.ds-card h3 { margin: 0 0 8px; }
.ds-card p { margin: 0; color: var(--ds-ink-2); font-family: var(--ds-font-serif); font-size: 16px; line-height: 1.5; }
.ds-card .ds-label { margin-bottom: 10px; }
.ds-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.ds-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.ds-note { margin: 0; padding: 14px 16px; border-left: 2px solid var(--ds-line-strong); color: var(--ds-ink-3); font-size: 14px; line-height: 1.55; }
details.ds-note > summary { cursor: pointer; color: var(--ds-ink-2); font-weight: 600; }

.ds-team { display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 6px; background: linear-gradient(180deg, #17375f, #102b4d); color: #fff; font-family: var(--ds-font-display); font-stretch: 80%; font-weight: 800; font-size: 14px; letter-spacing: .02em; box-shadow: inset 0 -3px 0 var(--team, var(--ds-cyan)), inset 0 0 0 1px rgba(255,255,255,.1); }

.ds-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--ds-line); scrollbar-width: none; }
.ds-tabs > :is(a, button) { flex: 0 0 auto; min-height: 48px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ds-ink-3); font: 600 16px/1 var(--ds-font-text); text-decoration: none; cursor: pointer; }
.ds-tabs > :is([aria-selected="true"], [aria-current="page"], .is-current) { color: var(--ds-ink); border-bottom-color: var(--ds-cyan); }
/* Fileiras que rolam para o lado cortam o que sai da caixa: nelas o anel de foco fica por dentro do controle */
body :is(.ds-tabs, .ds-subnav, .dd-chips-scroll, .playbook-library .playbook-families, .rules-head .rules-topics) :is(a, button):focus-visible { outline-offset: -3px !important; }

/* --------------------------------------------------------------------------
   3. Harmonização: cabeçalho e navegação (todas as páginas)
   -------------------------------------------------------------------------- */
.demo-notice { display: none !important; }

.site-header {
  height: var(--ds-header-h) !important; min-height: var(--ds-header-h);
  padding: 0 var(--ds-gutter) !important;
  grid-template-columns: 168px minmax(0, 1fr) auto !important;
  column-gap: 24px;
  background: rgba(6, 12, 24, .92) !important;
  border-bottom: 1px solid var(--ds-line) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
}
.site-header .brand, .site-header .wordmark { display: flex; align-items: center; }
.site-header .brand img, .site-header .wordmark img { width: 150px !important; height: 54px !important; object-fit: contain; }
.site-header nav { min-width: 0; }
.site-header nav #main-menu { justify-content: flex-end; align-items: center; gap: 4px !important; }
.site-header nav #main-menu a,
.site-header nav #main-menu .nav-group__home {
  min-height: 44px; padding: 0 14px !important;
  font-family: var(--ds-font-text) !important; font-size: 16px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--ds-ink-2);
}
.site-header nav #main-menu a:hover, .site-header nav #main-menu .nav-group__home:hover,
.site-header nav #main-menu a.active, .site-header nav #main-menu .nav-group.contains-current > .nav-group__heading > .nav-group__home { color: var(--ds-ink) !important; }
.site-header nav #main-menu a.active::after,
.site-header nav #main-menu .nav-group__home.active::after,
.site-header nav #main-menu .nav-group.contains-current > .nav-group__heading > .nav-group__home::after { content: ""; position: absolute; inset: auto 14px 6px; height: 2px; background: var(--ds-cyan); }
.site-header nav #main-menu .nav-group__heading { gap: 0; }
.site-header .nav-group__toggle { min-width: 28px !important; width: 28px; min-height: 44px; margin-left: -10px; border: 0 !important; color: transparent !important; font-size: 0 !important; position: relative; background: none !important; }
.site-header .nav-group__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--ds-ink-3); border-bottom: 1.5px solid var(--ds-ink-3); transform: translate(-50%, -70%) rotate(45deg); transition: transform .18s ease; }
.site-header .nav-group__toggle[aria-expanded="true"]::after { transform: translate(-50%, -30%) rotate(-135deg); border-color: var(--ds-cyan); }
/* Desktop: o link do grupo ("Jogos") termina 4 px depois do texto e a seta começa ali, sem
   sobrepor o link; assim o anel de foco do link não passa por cima da seta. A seta fica no
   mesmo lugar de antes (o recuo de 14 px virou 4 px, e a margem de -10 px virou 0). */
@media (min-width: 1181px) {
  .site-header nav #main-menu .nav-group__home { padding: 0 4px 0 14px !important; }
  .site-header .nav-group__toggle { margin-left: 0; }
  .site-header nav #main-menu .nav-group__home.active::after,
  .site-header nav #main-menu .nav-group.contains-current > .nav-group__heading > .nav-group__home::after { inset: auto 4px 6px 14px; }
  /* O anel da seta fica por dentro dela, sem cobrir o fim do "Jogos". */
  .site-header .nav-group__toggle:focus-visible { outline-offset: -3px !important; }
}
.site-header .nav-group__list { min-width: 248px !important; padding: 8px !important; gap: 2px !important; background: var(--ds-night-2) !important; border: 1px solid var(--ds-line-strong) !important; border-radius: var(--ds-radius); box-shadow: var(--ds-shadow) !important; }
.site-header nav #main-menu .nav-group__list a { min-height: 44px; padding: 0 12px !important; border-radius: 6px; font-size: 16px !important; font-weight: 500 !important; color: var(--ds-ink-2); }
.site-header nav #main-menu .nav-group__list a:hover { background: var(--ds-night-3) !important; color: var(--ds-ink) !important; }
.site-header nav #main-menu .nav-group__list a.active::after { inset: 10px auto 10px 0 !important; width: 2px; height: auto; }
.site-header .search-button, .site-header .ds-search { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ds-ink-2); font-size: 16px; text-decoration: none; }
.site-header :is(.search-button, .ds-search) svg { display: block; width: 20px; height: 20px; }
.site-header .search-button:hover, .site-header .ds-search:hover { color: var(--ds-ink); background: var(--ds-night-3); }
.site-header > .header-back { display: none; }
.site-header .menu-toggle { font-family: var(--ds-font-text) !important; font-size: 16px !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ds-ink); border: 1px solid var(--ds-line-strong) !important; border-radius: 999px; padding: 0 16px; min-height: 40px; }
.site-header .nav-current { display: none !important; }

@media (max-width: 1180px) {
  .site-header { grid-template-columns: 150px minmax(0, 1fr) auto !important; }
  .site-header nav #main-menu { top: calc(var(--ds-header-h) - 16px) !important; right: 0; width: min(340px, calc(100vw - 32px)) !important; padding: 8px !important; background: var(--ds-night-2) !important; border: 1px solid var(--ds-line-strong) !important; border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); }
  .site-header nav #main-menu a, .site-header nav #main-menu .nav-group__home { width: 100%; padding: 0 12px !important; font-size: 16px !important; }
  .site-header nav #main-menu a.active::after, .site-header nav #main-menu .nav-group.contains-current > .nav-group__heading > .nav-group__home::after { inset: 10px auto 10px 0 !important; width: 2px; height: auto; }
  .site-header .nav-group__toggle { width: 44px; min-width: 44px !important; margin-left: 0; }
  .site-header .nav-group__list { min-width: 0 !important; padding: 0 0 6px 12px !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
}
/* Com JavaScript, o menu do celular nasce recolhido desde o primeiro quadro. Antes ele esperava
   navigation.js pôr .nav-enhanced no <html>, e o cabeçalho encolhia com a página já desenhada
   (salto de layout em aparelho lento). Sem JavaScript, continua o menu aberto de styles.css. */
@media (max-width: 1180px) and (scripting: enabled) {
  html:not(.nav-enhanced) .site-header { height: var(--ds-header-h) !important; min-height: var(--ds-header-h); }
  html:not(.nav-enhanced) .menu-toggle { display: block; }
  html:not(.nav-enhanced) .site-header nav #main-menu:not(.open) { display: none; }
}
@media (max-width: 640px) {
  :root { --ds-header-h: 64px; }
  .site-header { padding: 0 16px !important; grid-template-columns: 128px minmax(0, 1fr) auto !important; column-gap: 8px; }
  .site-header .brand img, .site-header .wordmark img { width: 128px !important; height: 46px !important; }
}

/* Faixa de jogos (ticker) e selos de fonte saem da primeira tela */
.score-ribbon { display: none !important; }

/* --------------------------------------------------------------------------
   4. Harmonização: botões e chamadas
   -------------------------------------------------------------------------- */
main :is(.button, .welcome-button, .ia-button, .cta, a.button--plain) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px !important;
  border-radius: var(--ds-radius-sm) !important;
  font-family: var(--ds-font-text) !important; font-size: 16px !important; font-weight: 650 !important;
  letter-spacing: 0 !important; text-transform: none !important; text-decoration: none;
  box-shadow: none !important;
}
main :is(.button--red, .welcome-button--primary, .button--primary) { background: var(--ds-red) !important; border: 1px solid var(--ds-red) !important; color: #fff !important; }
@media (hover: hover) { main :is(.button--red, .welcome-button--primary, .button--primary):hover { background: var(--ds-red-hover) !important; } }
main :is(.button--ghost, .welcome-button--secondary, .button--secondary) { background: transparent !important; border: 1px solid var(--ds-line-strong) !important; color: var(--ds-ink) !important; }
@media (hover: hover) { main :is(.button--ghost, .welcome-button--secondary, .button--secondary):hover { border-color: var(--ds-ink-2) !important; } }

/* Breadcrumbs antigos: uma linha, mesmo tamanho, discretos */
main nav:has(> .ds-crumbs) { display: block !important; }
main nav:is(.breadcrumbs, [class$="-breadcrumbs"]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start !important; gap: 8px; font-family: var(--ds-font-text); font-size: 14px !important; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ds-ink-3); }
main nav:is(.breadcrumbs, [class$="-breadcrumbs"]) > * { font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; }
main nav:is(.breadcrumbs, [class$="-breadcrumbs"]) a { color: var(--ds-ink-2); text-decoration: none; }
@media (hover: hover) { main nav:is(.breadcrumbs, [class$="-breadcrumbs"]) a:hover { color: var(--ds-cyan); } }

/* Botão flutuante de glossário: discreto */
.nfla-glossary-button { border-radius: 999px !important; box-shadow: var(--ds-shadow) !important; background: var(--ds-night-2) !important; border: 1px solid var(--ds-line-strong) !important; font-family: var(--ds-font-text) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 650 !important; font-size: 14px !important; }
.nfla-glossary-button { transition: opacity .18s ease, transform .18s ease; }
.nfla-glossary-button--occluded { opacity: 0 !important; pointer-events: none; transform: translateY(6px); }
/* Escondido sobre o conteúdo, o botão ainda é a última parada do Tab: com foco de teclado
   ele reaparece, para o anel não ficar invisível */
.nfla-glossary-button--occluded:focus-visible { opacity: 1 !important; pointer-events: auto; transform: none; }
@media (max-width: 640px) { .nfla-glossary-button { font-size: 0 !important; } .nfla-glossary-button span { font-size: 18px !important; color: var(--ds-cyan); } }

/* --------------------------------------------------------------------------
   5. Rodapé unificado e subnavegação local
   -------------------------------------------------------------------------- */
body > footer.ds-footer { display: block; margin: 0; padding: clamp(48px, 6vw, 80px) var(--ds-gutter) 32px; background: var(--ds-night-deep); border-top: 1px solid var(--ds-line); color: var(--ds-ink-3); font-size: 14px; line-height: 1.55; grid-template-columns: none; }
body > footer.ds-footer .ds-footer__inner { width: min(100%, var(--ds-max)); margin-inline: auto; display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(5, minmax(0, 1fr)); gap: 32px; }
body > footer.ds-footer .ds-footer__brand img { width: 132px; height: auto; display: block; margin-bottom: 14px; }
body > footer.ds-footer .ds-footer__brand p { margin: 0; max-width: 32ch; font-size: 14px; }
body > footer.ds-footer h2 { margin: 0 0 12px; font-family: var(--ds-font-mono); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; color: var(--ds-ink-2); }
body > footer.ds-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
body > footer.ds-footer a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ds-ink-3); font-size: 14px; text-decoration: none; }
@media (hover: hover) { body > footer.ds-footer a:hover { color: var(--ds-cyan); } }
body > footer.ds-footer .ds-footer__legal { width: min(100%, var(--ds-max)); margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--ds-line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; font-size: 12px; }
body > footer.ds-footer .ds-footer__legal p { margin: 0; max-width: 90ch; font-size: 12px; }
body > footer.ds-footer .ds-footer__legal .ds-footer__page { grid-column: 1; grid-row: 2; }
@media (max-width: 960px) { body > footer.ds-footer .ds-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } body > footer.ds-footer .ds-footer__brand { grid-column: 1 / -1; } body > footer.ds-footer .ds-footer__legal { grid-template-columns: 1fr; } body > footer.ds-footer .ds-footer__legal .ds-footer__page { grid-row: auto; } }

.ds-subnav { display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--ds-gutter); background: var(--ds-night-deep); border-bottom: 1px solid var(--ds-line); scrollbar-width: none; }
nav.ds-subnav { justify-content: flex-start !important; }
/* Links dentro de nav no conteúdo: sem a caixa alta do menu antigo (styles.css "nav a") */
main nav a { min-height: 0; padding: 0; font-family: var(--ds-font-text); font-size: inherit; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ds-cyan); }
main nav a.active::after { display: none; }
.ds-subnav a, nav.ds-subnav a { font-family: var(--ds-font-text) !important; letter-spacing: 0 !important; text-transform: none !important; }
.ds-subnav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--ds-line); border-radius: 999px; color: var(--ds-ink-2); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .ds-subnav a:hover { border-color: var(--ds-cyan); color: var(--ds-ink); } }

/* --------------------------------------------------------------------------
   5b. Componentes de dados (agenda, placar, tabela, filtros, estado)
   Use-os em vez de criar variações por página.
   -------------------------------------------------------------------------- */
.ds-team--sm { width: 32px; height: 32px; font-size: 12px; border-radius: 5px; box-shadow: inset 0 -2px 0 var(--team, var(--ds-cyan)), inset 0 0 0 1px rgba(255,255,255,.1); }
.ds-team--lg { width: 64px; height: 64px; font-size: 22px; border-radius: 8px; box-shadow: inset 0 -4px 0 var(--team, var(--ds-cyan)), inset 0 0 0 1px rgba(255,255,255,.12); }
.ds-matchup { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ds-matchup__sep { color: var(--ds-ink-3); font-weight: 500; }

/* Lista de jogos/itens: uma linha por item, hora | conteúdo | meta | seta */
.ds-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ds-line); }
.ds-rows > li { border-bottom: 1px solid var(--ds-line); }
.ds-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto 24px; align-items: center; gap: 16px; min-height: 68px; padding: 12px 8px; color: inherit; text-decoration: none; transition: background-color .15s ease; }
@media (hover: hover) { a.ds-row:hover { background: var(--ds-night-2); } }
.ds-row__time { font-family: var(--ds-font-ui); font-stretch: 74%; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--ds-ink); }
/* Data e hora sob o horário: mono sem caixa alta ("21h20", não "21H20") */
.ds-row__time small { display: block; margin-top: 4px; color: var(--ds-ink-3); font-family: var(--ds-font-mono); font-stretch: normal; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: none; }
.ds-row__meta { color: var(--ds-ink-3); font-size: 14px; text-align: right; }
.ds-row__go { color: var(--ds-cyan); text-align: right; }
.ds-dayhead { margin: 32px 0 8px; color: var(--ds-ink-2); font: 500 12px/1.4 var(--ds-font-mono) !important; letter-spacing: .07em !important; text-transform: uppercase !important; }

/* Placar */
.ds-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 3vw, 40px); padding: clamp(20px, 3vw, 32px); background: var(--ds-night-2); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); }
.ds-scoreboard__team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ds-scoreboard__team:last-child { flex-direction: row-reverse; text-align: right; }
.ds-scoreboard__team b { display: block; font-size: clamp(18px, 1.6vw, 22px); color: var(--ds-ink); }
.ds-scoreboard__team small { color: var(--ds-ink-3); font-family: var(--ds-font-mono); font-size: 12px; letter-spacing: .04em; }
.ds-scoreboard__score { font-family: var(--ds-font-display); font-stretch: 62%; font-weight: 800; font-size: var(--ds-num); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ds-ink); white-space: nowrap; }
.ds-scoreboard__score .is-loser { color: var(--ds-ink-3); }
.ds-scoreboard__status { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--ds-ink-3); font-family: var(--ds-font-mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }

/* Tabela */
.ds-table-wrap { overflow-x: auto; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); }
.ds-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ds-table td:nth-child(n) { color: var(--ds-ink-2); font-family: var(--ds-font-text); font-weight: 400; }
.ds-table td:first-child { color: var(--ds-ink); font-weight: 600; }
.ds-table :is(th, td) { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--ds-line); }
.ds-table th { color: var(--ds-ink-3); font-family: var(--ds-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; background: var(--ds-night-2); white-space: nowrap; }
.ds-table td { color: var(--ds-ink-2); }
.ds-table tbody tr:hover { background: rgba(255,255,255,.02); }
.ds-table .is-num { text-align: right; }
.ds-table td.is-num { font-family: var(--ds-font-mono); font-size: 14px; letter-spacing: -.01em; }

/* Filtros em chips */
.ds-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--ds-line-strong); border-radius: 999px; background: transparent; color: var(--ds-ink-2); font: 600 14px/1 var(--ds-font-text); text-decoration: none; cursor: pointer; }
@media (hover: hover) { .ds-chip:hover { border-color: var(--ds-ink-3); color: var(--ds-ink); } }
.ds-chip:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"], .is-active) { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-night-deep); }
.ds-select { min-height: 40px; padding: 0 36px 0 14px; border: 1px solid var(--ds-line-strong); border-radius: 999px; background: var(--ds-night-2); color: var(--ds-ink); font: 500 14px var(--ds-font-text); }

/* Estado (confirmado, reportado, final, ao vivo) */
.ds-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ds-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ds-ink-3); }
.ds-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ds-status--ok { color: var(--ds-win); }
.ds-status--warn { color: var(--ds-gold); }
.ds-status--live { color: var(--ds-red-ink); }
.ds-status--info { color: var(--ds-cyan); }

/* Número de destaque com legenda */
.ds-stat { display: grid; gap: 6px; }
.ds-stat b { font-family: var(--ds-font-display); font-stretch: 62%; font-weight: 800; font-size: var(--ds-num-sm); line-height: 1; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.ds-stat span { color: var(--ds-ink-3); font-size: 14px; }

/* Bloco de método/fonte recolhível */
details.ds-details { border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); }
details.ds-details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; color: var(--ds-ink-2); font-weight: 600; list-style: none; }
details.ds-details > summary::-webkit-details-marker { display: none; }
details.ds-details > summary::after { content: "+"; content: "+" / ""; color: var(--ds-cyan); font-size: 22px; }
details.ds-details[open] > summary::after { content: "−"; content: "−" / ""; }
details.ds-details > :not(summary) { color: var(--ds-ink-3); font-size: 16px; }

/* Texto de leitura */
.ds-prose { max-width: var(--ds-read); }
.ds-prose p, .ds-prose li { font-family: var(--ds-font-serif); font-size: var(--ds-body) !important; line-height: 1.65; color: var(--ds-ink-2); }
.ds-prose h2 { margin: 48px 0 16px; }
.ds-prose h3 { margin: 32px 0 12px; }

@media (max-width: 720px) {
  .ds-row { grid-template-columns: 72px minmax(0, 1fr) 20px; gap: 12px; }
  .ds-row__meta { display: none; }
  .ds-scoreboard { grid-template-columns: 1fr auto 1fr; padding: 16px; }
  .ds-scoreboard__team { flex-direction: column; text-align: center; gap: 8px; }
  .ds-scoreboard__team:last-child { flex-direction: column; text-align: center; }
  .ds-scoreboard__team b { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   5c. Busca do portal (painel abaixo do cabeçalho)
   -------------------------------------------------------------------------- */
body .site-search { position: sticky; top: var(--ds-header-h); z-index: 19; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px var(--ds-gutter) 28px; background: var(--ds-night-2); border-bottom: 1px solid var(--ds-line-strong); box-shadow: var(--ds-shadow); }
body .site-search[hidden] { display: none; }
body .site-search > * { width: min(100%, 820px); margin-inline: auto; }
body .site-search .site-search__heading { display: flex; justify-content: space-between; align-items: center; max-width: none; grid-template-columns: none; }
body .site-search .site-search__heading label { margin: 0; color: var(--ds-ink); font: 650 16px/1.3 var(--ds-font-text); letter-spacing: 0; text-transform: none; }
body .site-search #search-close { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ds-line); border-radius: 50%; background: transparent !important; color: var(--ds-ink-2); cursor: pointer; }
body .site-search #search-close:hover { color: var(--ds-ink); border-color: var(--ds-line-strong); }
body .site-search .site-search__field { display: flex; gap: 10px; max-width: none; grid-template-columns: none; }
body .site-search input { flex: 1; min-width: 0; min-height: 52px; padding: 0 18px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius); background: var(--ds-night-deep); color: var(--ds-ink); font: 400 16px var(--ds-font-text); }
body .site-search input::placeholder { color: var(--ds-ink-3); }
body .site-search input:focus-visible { outline: 2px solid var(--ds-cyan); outline-offset: 1px; border-color: transparent; }
body .site-search button[type="submit"] { min-height: 52px; padding: 0 22px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius); background: transparent !important; color: var(--ds-ink); font: 650 16px var(--ds-font-text); letter-spacing: 0; text-transform: none; cursor: pointer; }
body .site-search button[type="submit"]:hover { border-color: var(--ds-ink-2); }
body .site-search #search-status { margin-block: 0; color: var(--ds-ink-3); font-size: 14px; }
body .site-search .search-results { display: grid !important; grid-template-columns: 1fr !important; gap: 0; max-width: 820px; margin-top: 0; border-top: 1px solid var(--ds-line); }
body .site-search .search-results a { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "kind title" "kind text"; column-gap: 16px; row-gap: 2px; align-items: baseline; padding: 12px 8px; border: 0; border-bottom: 1px solid var(--ds-line); border-radius: 0; background: transparent; color: var(--ds-ink); text-decoration: none; }
body .site-search .search-results a:hover, body .site-search .search-results a:focus-visible { background: var(--ds-night-3); outline: none; }
body .site-search .search-results small { grid-area: kind; color: var(--ds-ink-3); font: 500 12px/1.4 var(--ds-font-mono); letter-spacing: .06em; text-transform: uppercase; }
body .site-search .search-results strong { grid-area: title; color: var(--ds-ink); font: 650 16px/1.35 var(--ds-font-text); }
body .site-search .search-results span { grid-area: text; max-width: none; overflow: hidden; color: var(--ds-ink-3); font-size: 14px; line-height: 1.45; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
body .site-search .search-results p { margin: 12px 0 0; color: var(--ds-ink-2); font-size: 14px; }
body .site-search .search-ask { justify-self: start; width: auto; margin-inline: max(0px, calc((100% - 820px) / 2)) auto; color: var(--ds-cyan); font-weight: 600; text-decoration: none; }
body .site-search .search-ask::after { content: " →"; content: " →" / ""; }
body .site-search .search-ask[hidden] { display: none; }
@media (max-width: 640px) {
  body .site-search { padding: 18px 16px 22px; max-height: calc(100dvh - var(--ds-header-h)); overflow-y: auto; }
  body .site-search .search-results a { grid-template-columns: 1fr; grid-template-areas: "kind" "title" "text"; }
  body .site-search .search-results span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* --------------------------------------------------------------------------
   6. Movimento e acessibilidade
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ds-card, .ds-btn, .ds-btn--primary, .ds-link::after { transition: none !important; transform: none !important; }
}

.ds-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Versão B: escudo do time dentro do chip (ds-team-logos.js) */
.ds-team--logo { position: relative; color: transparent !important; font-size: 0 !important; background: #eef2f7; }
.ds-team--logo .ds-team__logo { position: absolute; inset: 14% 14% 18%; width: 72%; height: 68%; object-fit: contain; }

/* --------------------------------------------------------------------------
   7. Revisão visual final (07/10/2026): alinhamento à coluna e componentes
   -------------------------------------------------------------------------- */
/* Cabeçalho alinhado à mesma coluna do conteúdo (.ds-wrap) e opaco o
   bastante para não deixar texto fantasma por trás. */
.site-header { padding: 0 max(var(--ds-gutter), calc((100% - var(--ds-max)) / 2)) !important; background: rgba(6, 12, 24, .97) !important; }
/* O SVG do logo tem 101/1200 de margem interna à esquerda: a bola começa na coluna. */
.site-header .brand img, .site-header .wordmark img { width: auto !important; max-width: none; object-position: left center; margin-left: calc(54px * -101 / 560); }
body > footer.ds-footer .ds-footer__brand img { margin-left: calc(132px * -101 / 1200); }
@media (max-width: 640px) {
  .site-header .brand img, .site-header .wordmark img { margin-left: calc(46px * -101 / 560); }
}
/* Traço vermelho do topo começa na coluna, não na borda da janela */
.ds-pagehead::after { inset: auto auto 0 max(var(--ds-gutter), calc((100% - var(--ds-max)) / 2)); width: 96px; background: var(--ds-red-ink); }

/* Menu do celular: painel preso à direita da coluna, dentro da tela, com fundo escurecido */
@media (max-width: 1180px) {
  .site-header nav { position: static !important; }
  .site-header nav #main-menu { top: calc(var(--ds-header-h) - 6px) !important; left: auto !important; right: max(var(--ds-gutter), calc((100% - var(--ds-max)) / 2)) !important; width: min(360px, calc(100% - 2 * var(--ds-gutter))) !important; max-height: calc(100dvh - var(--ds-header-h) - 16px); overflow-y: auto; }
  .site-header:has(#main-menu.open)::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100dvh; background: rgba(3, 10, 22, .64); z-index: -1; }
}

/* Botão principal: vermelho um tom mais fechado para o texto branco passar de 4,5:1 */
:root { --ds-red-action: var(--ds-red); --ds-red-action-hover: var(--ds-red-hover); }
.ds-btn--primary, main :is(.button--red, .welcome-button--primary, .button--primary) { background: var(--ds-red-action) !important; border-color: var(--ds-red-action) !important; }
@media (hover: hover) { .ds-btn--primary:hover, main :is(.button--red, .welcome-button--primary, .button--primary):hover { background: var(--ds-red-action-hover) !important; border-color: var(--ds-red-action-hover) !important; } }

/* Números tabulares só nas colunas numéricas: em texto, o hífen ficava espaçado ("Raio - X") */
.ds-table { font-variant-numeric: normal; }
.ds-table .is-num { font-variant-numeric: tabular-nums; }

/* Seletor único: seta própria, mesmo raio dos campos e botões */
.ds-select { appearance: none; -webkit-appearance: none; padding-right: 40px; border-radius: var(--ds-radius-sm); background-image: linear-gradient(45deg, transparent 50%, var(--ds-ink-2) 50%), linear-gradient(135deg, var(--ds-ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; background-color: var(--ds-night-2); cursor: pointer; text-overflow: ellipsis; }
@media (hover: hover) { .ds-select:hover:not(:disabled) { border-color: var(--ds-ink-3); } }

/* Fileiras que rolam para o lado avisam que há mais (esmaecem na borda); nav-init.js marca
   data-fade-end enquanto há itens à direita e data-fade-start depois de rolar, então faixa curta
   não esmaece e o chip cortado à esquerda nunca aparece seco */
@media (max-width: 760px) {
  :is(.ds-tabs, .ds-subnav, .dd-chips-scroll, .playbook-library .playbook-families, .rules-head .rules-topics, .a3d .a3d-chips)[data-fade-end] {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  :is(.ds-tabs, .ds-subnav, .dd-chips-scroll, .playbook-library .playbook-families, .rules-head .rules-topics, .a3d .a3d-chips)[data-fade-start] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
    mask-image: linear-gradient(90deg, transparent, #000 40px);
  }
  :is(.ds-tabs, .ds-subnav, .dd-chips-scroll, .playbook-library .playbook-families, .rules-head .rules-topics, .a3d .a3d-chips)[data-fade-start][data-fade-end] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  }
}

/* Campos de busca com o mesmo canto dos seletores (4px); a pílula fica só para chips e filtros */
main :is(input[type="search"], .dd-input), main .a3d-search { border-radius: var(--ds-radius-sm) !important; }
/* Acordeões seguidos formam uma lista: sem vão e sem linha dupla entre eles */
details.ds-details + details.ds-details { margin-top: 0; border-top: 0; }
/* Toque no celular: área de 44 px nos links de ação (pseudo-elemento, sem mudar o layout); trilha e Menu com área maior */
@media (pointer: coarse), (max-width: 760px) {
  main .ds-link { position: relative; }
  main .ds-link::before { content: ""; position: absolute; inset: -10px 0; }
  /* link em linha (20 px de altura): 12 px para cima e para baixo fecham os 44 px */
  main .ds-link.ds-link--flow::before { inset: -12px 0; }
  .ds-crumbs a, nav .ds-crumbs a { padding-block: 8px; }
  .site-header .menu-toggle { min-height: 44px; }
}
/* Trilha: o "/" vai colado ao item seguinte, então nunca fica pendurado no fim da linha */
.ds-crumbs > li[aria-hidden="true"] { display: none; }
.ds-crumbs > li[aria-hidden="true"] + li::before { content: "/"; content: "/" / ""; margin-right: 8px; color: var(--ds-ink-3); }
/* Toque no celular: abas de seção, chips e seletores com 44 px (o hover dos componentes só vale com mouse) */
@media (pointer: coarse), (max-width: 760px) {
  .ds-subnav a, .ds-chip, .ds-select { min-height: 44px; }
}
/* Placar em tela estreita: números menores e nomes que quebram em vez de invadir a margem */
@media (max-width: 420px) {
  .ds-scoreboard { gap: 8px; padding: 16px 12px; }
  .ds-scoreboard__score { font-size: 40px; }
  .ds-scoreboard__team b { font-size: 14px; overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   Rodada 3 (07/10): acabamento do sistema
   -------------------------------------------------------------------------- */
/* Cabeçalho opaco, sem desfoque: o texto que rola por baixo não aparece através dele */
.site-header { background: var(--ds-night) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Menu do celular: subitens alinhados sob o grupo (a regra antiga de "nav ul" centralizava a grade) */
@media (max-width: 1180px) {
  .site-header nav .nav-group__list:not([hidden]) { justify-content: start; grid-template-columns: minmax(0, 1fr); }
}
/* Toque no celular: trilha com 44 px de área (o padding de um inline não muda o layout) e linhas da trilha
   afastadas o bastante para as áreas não cobrirem o texto da linha vizinha; links do rodapé com 44 px */
@media (pointer: coarse), (max-width: 760px) {
  .ds-crumbs { row-gap: 14px; }
  .ds-crumbs a, nav .ds-crumbs a { padding-block: 15px; }
  body > footer.ds-footer a { min-height: 44px; line-height: 1.3; }
}
/* Rodapé: no desktop largo nenhum nome de página quebra na coluna; entre 961 e 1199 px a marca fica
   na linha de cima e os grupos vão em 3 colunas (no celular continuam 2) */
@media (min-width: 1200px) {
  body > footer.ds-footer .ds-footer__inner { grid-template-columns: minmax(200px, 1.1fr) repeat(5, minmax(max-content, 1fr)); gap: 28px; }
}
@media (min-width: 961px) and (max-width: 1199px) {
  body > footer.ds-footer .ds-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body > footer.ds-footer .ds-footer__brand { grid-column: 1 / -1; }
}
/* Cabeçalho de tabela com um tamanho só (12 px, caixa alta, rótulo em mono) em todas as páginas;
   a regra antiga "body th" (styles.css) forçava 14 px e a letra de interface com !important */
body .ds-table thead th { font-family: var(--ds-font-mono) !important; font-size: 12px !important; }
/* Glossário: diálogo no padrão do sistema (sem sombra vermelha, título de seção em frase normal,
   rótulos legíveis, definição na largura toda) */
body .nfla-glossary-dialog { border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius); background: var(--ds-night-2); color: var(--ds-ink); box-shadow: var(--ds-shadow); }
body .nfla-glossary-shell > header > div > p { margin: 0 0 8px; color: var(--ds-ink-3); font: 500 12px/1.3 var(--ds-font-mono); letter-spacing: .07em; text-transform: uppercase; }
body .nfla-glossary-shell h2 { margin: 0 0 20px; color: var(--ds-ink); font: 600 var(--ds-h2)/1.14 var(--ds-font-serif); font-stretch: normal; letter-spacing: -.012em; text-transform: none; }
body .nfla-glossary-shell > label { color: var(--ds-ink-2); font-weight: 600; letter-spacing: 0; text-transform: none; }
body .nfla-glossary-shell > input { border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-sm); background: var(--ds-night); color: var(--ds-ink); }
body .nfla-glossary-shell [data-glossary-close] { border-color: var(--ds-line-strong); border-radius: 50%; color: var(--ds-ink-2); font-size: 22px; line-height: 1; }
body .nfla-glossary-status { color: var(--ds-ink-3); }
body .nfla-glossary-results { grid-template-columns: minmax(0, 1fr); }
body .nfla-glossary-entry { border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: var(--ds-night); }
body .nfla-glossary-entry h3 { color: var(--ds-ink); font: 600 var(--ds-h3)/1.25 var(--ds-font-serif); }
body .nfla-glossary-entry__pt { display: block; margin-top: 2px; color: var(--ds-ink-2); font: 600 14px/1.35 var(--ds-font-text); }
body .nfla-glossary-entry p { color: var(--ds-ink-2); font-family: var(--ds-font-serif); }
body .nfla-glossary-entry small { color: var(--ds-ink-3); }
body .nfla-glossary-entry a { color: var(--ds-cyan); font-weight: 650; letter-spacing: 0; text-transform: none; text-decoration: none; }
@media (hover: hover) { body .nfla-glossary-entry a:hover { color: var(--ds-ink); } }
/* Rodapé no celular: a coluna da direita (Times, IA e Dados) é mais larga, para "Horizonte: IA e
   Tecnologia" (172 px) caber numa linha; os nomes da esquerda vão até 116 px. Proporção fixa, sem
   max-content, porque a marca ocupa as duas colunas e entraria na conta. Abaixo de 356 px as duas
   voltam a ter a mesma largura; acima de 480 px as duas iguais já cabem. */
@media (min-width: 356px) and (max-width: 480px) {
  body > footer.ds-footer .ds-footer__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
/* Rodapé no celular: "Sobre" é o quinto grupo e ficava sozinho na coluna da esquerda, com a direita
   vazia. Ele ocupa as duas colunas, com os links em duas colunas alinhadas às dos grupos de cima. */
@media (max-width: 960px) {
  body > footer.ds-footer .ds-footer__inner > section:last-child { grid-column: 1 / -1; }
  body > footer.ds-footer .ds-footer__inner > section:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 24px; }
}
@media (min-width: 356px) and (max-width: 480px) {
  body > footer.ds-footer .ds-footer__inner > section:last-child ul { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}

/* --------------------------------------------------------------------------
   8. Blend Estádio (09/10): abas no polegar no celular
   Cinco destinos fixos embaixo (Início e os quatro grupos de conteúdo do menu).
   Opaca e sem desfoque, como o cabeçalho: rolar não custa quadro em celular fraco.
   -------------------------------------------------------------------------- */
.ds-tabbar { display: none; }
@media (max-width: 760px) {
  :root { --ds-tabbar-h: 62px; }
  .ds-tabbar { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 4px env(safe-area-inset-bottom, 0px); background: rgba(6, 12, 24, .98); border-top: 1px solid var(--ds-line-strong); }
  .ds-tabbar a { position: relative; display: grid; justify-items: center; align-content: center; gap: 5px; min-height: var(--ds-tabbar-h); padding: 4px 2px 2px; color: var(--ds-ink-3); font: 600 12px/1 var(--ds-font-ui); font-stretch: 88%; letter-spacing: 0; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
  .ds-tabbar svg { display: block; width: 22px; height: 22px; }
  .ds-tabbar a[aria-current] { color: var(--ds-cyan); }
  .ds-tabbar a[aria-current]::before { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; border-radius: 0 0 2px 2px; background: var(--ds-cyan); }
  .ds-tabbar a:focus-visible { outline-offset: -3px !important; }
  body:has(> .ds-tabbar) { padding-bottom: calc(var(--ds-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  /* Glossário e outros botões flutuantes sobem para cima das abas */
  body:has(> .ds-tabbar) .nfla-glossary-button { bottom: calc(var(--ds-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 760px) and (hover: hover) { .ds-tabbar a:hover { color: var(--ds-ink); } }
@media print { .ds-tabbar { display: none !important; } }

/* --------------------------------------------------------------------------
   9. Espera dos dados sem tranco (09/10)
   As páginas que montam a lista com os JSON abrem com um aviso curto. Sem reserva,
   o que vem depois do aviso (notas de método, rodapé) aparece na primeira tela e
   salta para baixo quando a lista chega: é o deslocamento de layout (CLS), que no
   celular com 4G passava de 0,5. Enquanto existe, o aviso guarda uma tela de altura
   e o resto começa abaixo da dobra; a lista entra no lugar dele.
   -------------------------------------------------------------------------- */
:is(#agora-loading, #injury-loading, #games-loading, #teams-loading, #coach-loading, #museum-loading, .dd-state--loading, #guide-modules > .guide-loading):not([hidden]) {
  min-height: 100svh; align-items: flex-start; align-content: flex-start;
}
/* Fileira de botões que o script preenche (dias, temporadas, semanas, temas): nasce com a altura de
   um botão e mostra uma pílula apagada no lugar, para a espera não parecer um buraco */
.ds-filters:empty::before { content: ""; display: block; width: min(264px, 100%); height: 44px; border-radius: 999px; background: linear-gradient(90deg, var(--ds-night-2), var(--ds-night-3) 55%, var(--ds-night-2)); }