/* ==========================================================================
   HoqueiPatins.pt — Design System 2026
   Proposta de novo tema · CSS único, sem frameworks, mobile-first
   --------------------------------------------------------------------------
   1. Tokens          5. Cartões de jogo      9. Notícias
   2. Reset / base    6. Classificações      10. Páginas
   3. Layout          7. Navegação           11. Utilitários
   4. Componentes     8. Formulários         12. Responsivo
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- Marca ------------------------------------------------------------ */
  --hp-navy-900: #050D18;
  --hp-navy-800: #0A1626;
  --hp-navy-700: #0E1F33;
  --hp-navy-600: #16293F;
  --hp-navy-500: #1F3550;
  --hp-green-400: #3CEA90;
  --hp-green-500: #00C56F;
  --hp-green-600: #00A65C;
  --hp-blue-500: #3FA7FF;
  --hp-red-500: #FF3B4E;
  --hp-amber-500: #FFB020;

  /* --- Semântica (tema escuro, por omissão) ----------------------------- */
  --bg: #070F1A;
  --bg-elevated: #0C1829;
  --surface: #0E1F33;
  --surface-2: #16293F;
  --surface-3: #1E3550;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .16);

  /* Os três níveis passam os 4,5:1 do WCAG AA para texto pequeno nas
     superfícies onde aparecem (o faint desce a 3,9:1 só na --surface-3).
     O faint antigo, #64788F, ficava a 3,3–4,2:1, e é ele que leva as horas,
     as datas e os cabeçalhos das tabelas, quase sempre a 11–12 px. */
  --text: #EDF2F8;
  --text-muted: #A4B5C8;
  --text-faint: #8192A5;

  /* Marca e ação — só navegação, links e botões */
  --brand: #00C56F;
  --brand-hover: #3CEA90;
  --brand-ink: #04291A;
  /* Verde para texto: no escuro é a própria marca; no claro escurece */
  --link: var(--brand);
  --link-hover: var(--brand-hover);
  --live: #FF3B4E;
  --info: #3FA7FF;
  --warn: #FFB020;

  /* Resultado desportivo — tons próprios, para não se confundirem com a marca */
  --result-win: #15A362;
  --result-draw: #6B7F96;
  --result-loss: #C9364A;

  /* --- Tipografia ------------------------------------------------------- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-2xs: .6875rem;  /* 11px */
  --fs-xs: .75rem;     /* 12px */
  --fs-sm: .8125rem;   /* 13px */
  --fs-base: .9375rem; /* 15px */
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

  /* --- Espaçamento ------------------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* --- Formas ----------------------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .45);

  --header-h: 64px;
  --maxw: 2100px;
  --transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* --- Tema claro --------------------------------------------------------- */
/* Sem isto o browser não sabe em que tema está: pinta as barras de scroll, os
   <select> e os <input> pela preferência do sistema — escuros num site claro —
   e o modo escuro automático do Chrome ainda escurece a página por cima. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="light"] {
  --bg: #F2F5F9;
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --surface-3: #EDF1F6;
  --border: #E3E9F0;
  --border-strong: #CBD6E2;

  /* Muted a 6,6–7,5:1 e faint a 4,6–5,2:1. O faint antigo, #8A9BB0, ficava a
     2,5–2,8:1 do fundo. O novo fica onde estava o muted, que escurece para os
     dois níveis continuarem a distinguir-se. */
  --text: #0A1626;
  --text-muted: #44566B;
  --text-faint: #5E6E81;

  --brand: #00A65C;
  --brand-hover: #00C56F;
  /* A marca continua a ser o fundo dos botões, com a tinta escura por cima
     (4,9:1). Como cor de texto ficava a 2,8–3,2:1: o texto verde passa a este
     tom (4,8–5,4:1) e no hover escurece em vez de clarear. */
  --link: #007A44;
  --link-hover: #005C33;
  --live: #E02639;

  --result-win: #0F8C52;
  --result-draw: #8A9BB0;
  --result-loss: #C42539;

  --shadow-sm: 0 1px 2px rgba(10, 22, 38, .06);
  --shadow-md: 0 4px 16px rgba(10, 22, 38, .08);
  --shadow-lg: 0 12px 40px rgba(10, 22, 38, .12);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* A tabbar é fixa e tem 55 px: sem esta reserva o fim da página — os últimos
     links do rodapé — ficava por baixo dela. Anulado acima de 1024 px. */
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-3);
  text-transform: uppercase;
}

/* Texto editorial lê-se em caixa normal — maiúsculas ficam para
   cabeçalhos curtos de interface, nomes de equipa e o logótipo. */
.news-hero h2, .news-hero h3,
.article-header h1,
.article-body h2, .article-body h3 {
  text-transform: none;
  letter-spacing: -.005em;
  line-height: 1.16;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

p { margin: 0 0 var(--sp-4); }

::selection { background: var(--brand); color: var(--brand-ink); }

/* .screen-reader-text é o nome que o WordPress e o tema-pai usam para o
   mesmo efeito, e aparece nos rótulos de navegação dos arquivos. */
.visually-hidden,
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -60px; z-index: 200;
  background: var(--brand); color: var(--brand-ink);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--sp-2); }

/* Scrollbars discretas */
.scroll-x {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  -webkit-overflow-scrolling: touch;
}
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }
.scroll-x::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
/* Em ecrãs largos o conteúdo ocupa a largura toda; o que o protege da borda é
   a goteira, não uma caixa estreita ao centro. O corpo dos artigos continua
   limitado a 72ch pelo .defaultStyle, que é onde a medida de leitura importa. */
@media (min-width: 1400px) { .wrap { padding-inline: var(--sp-8); } }
@media (min-width: 1800px) { .wrap { padding-inline: var(--sp-10, 40px); } }

.grid-main {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding-block: var(--sp-6);
}
/* A ficha de jogo abre com um #primary.box100 (o cabeçalho do encontro) antes
   do #main e do sidebar. Sem isto ocupava a coluna principal sozinho, as abas
   — convocados incluídos — caíam na de 330 px e os widgets na larga. */
.grid-main > .box100 { grid-column: 1 / -1; }

/* A ficha de jogo e a página de competição não imprimem sidebar: a grelha não
   pode reservar-lhe os 330 px. */
body.single-sp_event .grid-main,
body.tax-sp_league .grid-main,
body.single-sp_team .grid-main { grid-template-columns: minmax(0, 1fr); }

.section { margin-bottom: var(--sp-8); }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.section-head h2, .section-head h3 { margin: 0; }
.section-head .link-more,
.card-head .link-more {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--link);
  text-transform: none;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.section-head .link-more:hover,
.card-head .link-more:hover { color: var(--link-hover); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-2);
}

/* ==========================================================================
   4. COMPONENTES BASE
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.card-head h3, .card-head h2 {
  margin: 0;
  font-size: var(--fs-md);
  letter-spacing: .02em;
}
.card-body { padding: var(--sp-4); }
.card-foot {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  text-align: center;
}
.card-foot a { font-size: var(--fs-sm); font-weight: 600; color: var(--link); }

/* --- Botões ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-4);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  cursor: pointer;
}
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--brand); }
.btn-live { background: var(--live); color: #fff; }
.btn-sm { padding: 6px var(--sp-3); font-size: var(--fs-xs); }
.btn-block { width: 100%; }

/* --- Badges ------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.badge-live { background: var(--live); color: #fff; }
.badge-live .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .badge-live .dot { animation: none; } }

.badge-soft { background: var(--surface-3); color: var(--text-muted); }
.badge-brand { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--link); }
.badge-info { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
.badge-warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }

/* --- Escudos de clube --------------------------------------------------- */
.crest {
  width: 28px; height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}
.crest-lg { width: 56px; height: 56px; }
.crest-xl { width: 88px; height: 88px; }
.crest-sm { width: 22px; height: 22px; }

/* Fallback: monograma quando não há escudo */
.crest-mono {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-muted);
  border-radius: 50%; font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-xs);
}

/* --- Abas --------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand); }

/* --- Chips -------------------------------------------------------------- */
.chip-row { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600;
  white-space: nowrap;
  transition: all var(--transition);
}
.chip:hover { border-color: var(--brand); color: var(--link); }
.chip[aria-current="true"], .chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.chip img { width: 18px; height: 18px; object-fit: contain; }

/* ==========================================================================
   5. JOGOS — barra de resultados, linhas e cartões
   ========================================================================== */

/* --- Barra horizontal de jogos (topo) ----------------------------------- */
.scorebar {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--header-h);
  z-index: 40;
}
/* Só o espaço vertical: o lateral é a goteira do .wrap, que alinha a data e
   as setas com o logótipo e os botões do cabeçalho. Com "padding: … 0"
   ficavam encostadas às bordas do ecrã. */
.scorebar-inner { display: flex; align-items: stretch; gap: var(--sp-2); padding-block: var(--sp-2); }
.scorebar-label {
  display: none;
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-faint);
  letter-spacing: .08em;
  padding-right: var(--sp-3);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
}
.scorebar-track { display: flex; gap: var(--sp-2); flex: 1; min-width: 0; }

.score-pill {
  flex: 0 0 auto;
  min-width: 178px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px var(--sp-3) 8px;
  transition: border-color var(--transition), transform var(--transition);
}
.score-pill:hover { border-color: var(--brand); transform: translateY(-1px); }
/* Competição e estado partilham a linha de cima: poupa uma linha inteira
   por cartão e deixa a barra em ~95 px. */
.score-pill .comp {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 5px;
  min-width: 0;
}
.score-pill .comp img { width: 13px; height: 13px; object-fit: contain; flex: 0 0 auto; }
.score-pill .comp .comp-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-pill .comp .state { flex: 0 0 auto; color: var(--text-muted); }
.score-pill .comp .state.is-live { color: var(--live); font-weight: 700; }
.score-pill .team {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 500;
  margin-bottom: 2px;
}
.score-pill .team:last-child { margin-bottom: 0; }
.score-pill .team .crest { width: 18px; height: 18px; }
.score-pill .team .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-pill .team .goals { font-weight: 700; font-variant-numeric: tabular-nums; }
.score-pill .team.win .name, .score-pill .team.win .goals { color: var(--text); font-weight: 700; }
.score-pill .team.lose .name, .score-pill .team.lose .goals { color: var(--text-faint); }


/* --- Linha de jogo (lista de resultados) -------------------------------- */
.match-list { list-style: none; margin: 0; padding: 0; }

.match-group-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-block: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.match-group-head img { width: 20px; height: 20px; object-fit: contain; }

.match-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.match-row:hover { background: var(--surface-2); }
.match-row:last-child { border-bottom: 0; }

.match-time {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.3;
}
.match-time .d { display: block; font-size: var(--fs-2xs); color: var(--text-faint); }
.match-time.is-live { color: var(--live); }

.match-teams { display: grid; gap: 6px; min-width: 0; }
.match-team {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-base);
  min-width: 0;
}
.match-team .name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.match-team .goals {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: right;
  font-size: var(--fs-md);
}
.match-team.win { font-weight: 700; }
.match-team.lose .name, .match-team.lose .goals { color: var(--text-faint); }
.match-team.is-live .goals { color: var(--live); }

.match-extra {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}
.match-extra .tv { color: var(--info); }

/* --- Cartão de jogo (destaque) ------------------------------------------ */
.match-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  transition: border-color var(--transition), transform var(--transition);
}
.match-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.match-card .mc-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.match-card .mc-comp { display: flex; align-items: center; gap: 6px; min-width: 0; }
.match-card .mc-comp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-card .mc-comp img { width: 16px; height: 16px; object-fit: contain; }
.match-card .mc-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
}
.match-card .mc-team { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; }
.match-card .mc-team .name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
}
.match-card .mc-score {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  padding-inline: var(--sp-3);
  white-space: nowrap;
}
.match-card .mc-score.pending { font-size: var(--fs-xl); color: var(--text-muted); }
.match-card .mc-foot {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
}

/* ==========================================================================
   6. CLASSIFICAÇÕES
   ========================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.standings {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  min-width: 560px;
}
.standings thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.standings thead th:nth-child(2) { text-align: left; }
.standings tbody td {
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.standings tbody tr:hover { background: var(--surface-2); }
.standings .col-pos {
  width: 38px;
  position: relative;
  font-weight: 700;
  color: var(--text-muted);
}
.standings .col-team { text-align: left; min-width: 180px; }
.standings .team-cell { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.standings .col-pts { font-weight: 800; color: var(--text); font-size: var(--fs-base); }
.standings td.muted { color: var(--text-muted); }

/* Zonas de classificação */
.standings .col-pos::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.standings tr.zone-title .col-pos::before { background: var(--result-win); }
.standings tr.zone-euro .col-pos::before { background: var(--info); }
.standings tr.zone-playoff .col-pos::before { background: var(--warn); }
.standings tr.zone-drop .col-pos::before { background: var(--result-loss); }

/* Um fundo muito ténue torna a zona legível sem a transformar em destaque */
.standings tr.zone-title { background: color-mix(in srgb, var(--result-win) 8%, transparent); }
.standings tr.zone-euro { background: color-mix(in srgb, var(--info) 7%, transparent); }
.standings tr.zone-playoff { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.standings tr.zone-drop { background: color-mix(in srgb, var(--result-loss) 8%, transparent); }

/* Forma recente */
.form-row { display: inline-flex; gap: 4px; align-items: center; }

/* Por omissão são pontos: a forma é contexto, não deve competir com os pontos.
   O texto (V/E/D) continua no DOM para leitores de ecrã. */
.form-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  overflow: hidden;
  text-indent: -999px;
}
.form-dot.w { background: var(--result-win); }
.form-dot.d { background: var(--border-strong); }
.form-dot.l { background: var(--result-loss); }

/* Variante legível, para quando a forma é o assunto da secção */
.form-row.form-lg { gap: 3px; }
.form-row.form-lg .form-dot {
  width: 20px; height: 20px;
  border-radius: var(--r-sm);
  overflow: visible;
  text-indent: 0;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  color: #fff;
}
.form-row.form-lg .form-dot.w { color: #fff; }
.form-row.form-lg .form-dot.d { background: var(--surface-3); color: var(--text-muted); }

.legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* --- Lista de goleadores ------------------------------------------------ */
.scorer-list { list-style: none; margin: 0; padding: 0; }
.scorer-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.scorer-row:last-child { border-bottom: 0; }
.scorer-row .pos { font-weight: 700; color: var(--text-faint); font-size: var(--fs-sm); text-align: center; }
.scorer-row .who { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.scorer-row .who .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scorer-row .who .club { font-size: var(--fs-xs); color: var(--text-faint); }
.scorer-row .goals {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7. NAVEGAÇÃO
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-4);
}

.brand { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
/* O logótipo tem duas versões oficiais: letras brancas para fundo escuro e
   letras pretas para fundo claro, ambas com o stick a cores. Troca-se a
   imagem com o tema, em vez de dar fundo ao logótipo ou inverter a imagem —
   que é o que a marca faz. */
.brand-logo-light { display: none; }
:root[data-theme="light"] .brand-logo-dark { display: none; }
:root[data-theme="light"] .brand-logo-light { display: block; }
.brand svg { height: 30px; width: auto; }
.brand-text {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-text em { font-style: normal; color: var(--link); }

.main-nav { display: none; flex: 1; }
.main-nav > ul { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.main-nav > ul > li { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-link:hover, .main-nav li:hover > .nav-link { color: var(--text); background: var(--surface-2); }
.nav-link[aria-current="page"] { color: var(--link); }
.nav-link .caret { width: 8px; height: 8px; opacity: .6; transition: transform var(--transition); }
.main-nav li:hover > .nav-link .caret { transform: rotate(180deg); }

/* Mega-menu */
.mega {
  position: absolute; top: calc(100% + 6px); left: 0;
  width: 300px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all var(--transition);
}
.main-nav li:hover > .mega, .main-nav li:focus-within > .mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* O número de colunas vem do template, pelo número de itens do submenu: com
   uma coluna só, menus como o Internacional (25 ligas) enchiam o ecrã todo. */
.mega.mega-cols-2 { width: 520px; }
.mega.mega-cols-3 { width: 780px; }
.mega-col h4 {
  font-size: var(--fs-xs); letter-spacing: .1em; color: var(--text-faint);
  margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border);
}
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-cols-2 .mega-col ul { columns: 2; }
.mega-cols-3 .mega-col ul { columns: 3; }
.mega-col ul { column-gap: var(--sp-4); }
.mega-col ul > li { break-inside: avoid; }
.mega-col a {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: all var(--transition);
}
.mega-col a:hover { background: var(--surface-2); color: var(--text); }
.mega-col a img { width: 18px; height: 18px; object-fit: contain; }

/* O emoji que o hp_menu_title() isola: ganha uma coluna própria, para o texto
   dos vários itens começar todo no mesmo sítio. O gap do flex é anulado nesses
   links porque o espaço passa a vir daqui — e nos do menu lateral, que são
   blocos, não havia gap nenhum. */
.menu-emoji {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 1.2em;
  margin-right: 7px;
  text-align: center;
  font-size: 1.05em;
}
a:has(> .menu-emoji) { gap: 0; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

.icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  color: var(--text-muted);
  /* Só o que muda no hover. Com "all", o visibility herdado do menu lateral
     também transitava: ao abrir, o botão de fechar ainda estava hidden e o
     foco não entrava no menu. */
  transition: background-color var(--transition), color var(--transition), opacity var(--transition);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }

.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px var(--sp-3);
  background: color-mix(in srgb, var(--live) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--live) 40%, transparent);
  border-radius: var(--r-full);
  color: var(--live);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.live-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: pulse 1.4s infinite; }

/* --- Menu mobile (drawer) ----------------------------------------------- */
.drawer {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  transform: translateX(100%);
  /* Fechado, sai também do Tab e dos leitores de ecrã. Só com o transform as
     83 ligações continuavam a receber o foco fora do ecrã, também em desktop.
     O visibility muda no fim da animação ao fechar e logo no início ao abrir. */
  visibility: hidden;
  transition: transform 220ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 220ms;
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.drawer[data-open="true"] { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  height: var(--header-h); flex: 0 0 auto;
}
.drawer-body { overflow-y: auto; padding: var(--sp-4) var(--sp-4) var(--sp-16); flex: 1; }
.drawer details { border-bottom: 1px solid var(--border); }
.drawer summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 700; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary .caret { transition: transform var(--transition); width: 10px; height: 10px; opacity: .6; }
.drawer details[open] summary .caret { transform: rotate(180deg); }
.drawer details ul { list-style: none; margin: 0; padding: 0 0 var(--sp-3); display: grid; gap: 2px; }
.drawer details ul a {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-base); color: var(--text-muted);
}
.drawer details ul a:hover { background: var(--surface-2); color: var(--text); }
.drawer > .drawer-body > a.drawer-link {
  display: block; padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: 700; text-transform: uppercase;
}

/* --- Barra inferior (mobile) -------------------------------------------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--bg-elevated) 95%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: grid; justify-items: center; gap: 3px;
  padding: var(--sp-2) 0 6px;
  /* 11 px a partir dos ~380 px de ecrã; abaixo disso "RESULTADOS" deixava de
     caber num quinto da largura. */
  font-size: clamp(10px, 2.9vw, 11px); font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .04em;
  transition: color var(--transition);
}
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a[aria-current="page"] { color: var(--link); }
.tabbar a:active { color: var(--text); }

/* --- Breadcrumbs -------------------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--text-faint);
  padding-block: var(--sp-4) 0;
}
.crumbs a:hover { color: var(--link); }
.crumbs .sep { opacity: .5; }

/* ==========================================================================
   8. FORMULÁRIOS
   ========================================================================== */
.field {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 var(--sp-3);
  transition: border-color var(--transition);
}
.field:focus-within { border-color: var(--brand); }
.field svg { width: 16px; height: 16px; color: var(--text-faint); flex: 0 0 auto; }
.field input, .field select {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--text);
  font: inherit; font-size: var(--fs-sm);
  padding: 10px 0;
}
.field select { cursor: pointer; appearance: none; padding-right: var(--sp-4); }
.field option { background: var(--bg-elevated); color: var(--text); }

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.filters .field { flex: 1 1 160px; }

/* ==========================================================================
   9. NOTÍCIAS
   ========================================================================== */
.hero-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }

.news-hero {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 260px;
  background: var(--surface-2);
  isolation: isolate;
}
.news-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}
.news-hero:hover img { transform: scale(1.04); }
.news-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(5, 13, 24, .96) 18%, rgba(5, 13, 24, .72) 52%, rgba(5, 13, 24, .18) 100%);
}
.news-hero .inner {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-5) var(--sp-4);
  display: grid; gap: var(--sp-2);
}
.news-hero h2, .news-hero h3 {
  margin: 0; color: #fff;
  font-size: var(--fs-xl);
  text-wrap: balance;
}
.news-hero .meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: rgba(255, 255, 255, .72); }
/* O degradê é escuro nos dois temas: o verde de texto do tema claro ficava a
   3,5:1 dele. Aqui vale sempre o verde do tema escuro. */
.news-hero { --link: var(--hp-green-500); --link-hover: var(--hp-green-400); }

/* Em telemóvel só o primeiro destaque justifica uma imagem grande; os
   restantes passam a cartões horizontais e poupam ~190 px cada. */
@media (max-width: 599px) {
  .news-hero.compact {
    min-height: 0;
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
  }
  .news-hero.compact img {
    position: static;
    z-index: auto;
    width: 108px; height: 78px;
    border-radius: var(--r-md);
  }
  .news-hero.compact::after { display: none; }
  .news-hero.compact .inner { position: static; padding: 0; gap: 5px; }
  .news-hero.compact h3 { color: var(--text); font-size: var(--fs-md); }
  .news-hero.compact .meta { color: var(--text-faint); }
  .news-hero.compact .badge { font-size: var(--fs-2xs); padding: 2px 6px; }
  /* Sem o degradê o cartão é da cor da página: o verde volta a ser o dela */
  .news-hero.compact { --link: inherit; --link-hover: inherit; }
}

.news-card {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.news-card:last-child { border-bottom: 0; }
.news-card .thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms; }
.news-card:hover .thumb img { transform: scale(1.05); }
.news-card h3 {
  font-size: var(--fs-md);
  margin: 0 0 6px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.news-card .meta { font-size: var(--fs-xs); color: var(--text-faint); display: flex; gap: var(--sp-2); align-items: center; }
.news-card:hover h3 { color: var(--link); }

.news-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.news-tile { display: grid; gap: var(--sp-3); }
.news-tile .thumb { aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.news-tile .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms; }
.news-tile:hover .thumb img { transform: scale(1.05); }
.news-tile h3 { font-family: var(--font-body); font-size: var(--fs-md); text-transform: none; letter-spacing: 0; margin: 0; line-height: 1.3; }
.news-tile:hover h3 { color: var(--link); }

/* --- Artigo ------------------------------------------------------------- */
.article { max-width: 72ch; }
.article-header { margin-bottom: var(--sp-6); }
.article-header h1 { font-size: var(--fs-3xl); text-wrap: balance; margin-bottom: var(--sp-3); }
.article-lead { font-size: var(--fs-lg); color: var(--text-muted); line-height: 1.5; }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--border);
  margin-block: var(--sp-5);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.author { display: flex; align-items: center; gap: var(--sp-2); }
.author .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-3); display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-xs); color: var(--text-muted);
}
.article-body { font-size: 1.0625rem; line-height: 1.72; }
.article-body p { margin-bottom: var(--sp-5); }
.article-body h2 { font-size: var(--fs-xl); margin-top: var(--sp-8); }
.article-body figure { margin: var(--sp-6) 0; }
.article-body figure img { border-radius: var(--r-md); width: 100%; }
.article-body figcaption { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-2); }
.article-body blockquote {
  margin: var(--sp-6) 0; padding-left: var(--sp-5);
  border-left: 3px solid var(--brand);
  font-family: var(--font-display); font-size: var(--fs-xl);
  line-height: 1.3; color: var(--text);
}
.share { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ==========================================================================
   10. PÁGINAS ESPECÍFICAS
   ========================================================================== */

/* --- Cabeçalho de competição -------------------------------------------- */
.comp-header {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-6);
  position: relative;
  overflow: hidden;
}
.comp-header::before {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 16%, transparent), transparent 68%);
  pointer-events: none;
}
.comp-header-inner { display: flex; align-items: center; gap: var(--sp-4); position: relative; }
.comp-header .comp-logo {
  width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto;
  background: var(--surface); border-radius: var(--r-md); padding: var(--sp-2);
  border: 1px solid var(--border);
}
.comp-header h1 { margin: 0 0 6px; font-size: var(--fs-2xl); }
.comp-header .comp-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); color: var(--text-muted); }

/* --- Ficha de jogo ------------------------------------------------------ */
.match-hero {
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.match-hero-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.match-hero-top .comp { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.match-hero-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
}
.match-hero-team { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.match-hero-team .name {
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 700;
  text-transform: uppercase; line-height: 1.1;
}
.match-hero-score { text-align: center; }
.match-hero-score .nums {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
  display: flex; align-items: center; gap: var(--sp-3);
}
.match-hero-score .status { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); }
.match-hero-foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.match-hero-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* Lance a lance / marcadores */
.goal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); padding: var(--sp-4); }
.goal-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: var(--fs-sm); }
.goal-cols .home { text-align: left; }
.goal-cols .away { text-align: right; }
.goal-cols > div + div, .goal-cols > ul + ul { border-left: 1px solid var(--border); padding-left: var(--sp-6); }
.goal-cols li { color: var(--text-muted); }
.goal-cols li b { color: var(--text); font-weight: 600; }
.goal-cols li .min { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Estatísticas comparadas */
.stat-compare { display: grid; gap: var(--sp-4); padding: var(--sp-4); }
.stat-line { display: grid; gap: 6px; }
.stat-line .labels { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.stat-line .labels b { font-variant-numeric: tabular-nums; }
.stat-line .labels .mid { color: var(--text-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.stat-bar { display: flex; height: 6px; border-radius: var(--r-full); overflow: hidden; background: var(--surface-3); }
.stat-bar i { display: block; height: 100%; }
.stat-bar .a { background: var(--info); }
.stat-bar .b { background: var(--text-faint); }

/* --- Grelha de competições ---------------------------------------------- */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
}
.comp-tile {
  display: grid; justify-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
  transition: all var(--transition);
}
.comp-tile:hover { border-color: var(--brand); transform: translateY(-2px); background: var(--surface-2); }
.comp-tile img { width: 44px; height: 44px; object-fit: contain; }
.comp-tile .label {
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 700;
  text-transform: uppercase; line-height: 1.15;
}
.comp-tile .sub { font-size: var(--fs-2xs); color: var(--text-faint); }

/* --- Plantel ------------------------------------------------------------ */
.squad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.player-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-3); text-align: center; display: grid; gap: var(--sp-2); justify-items: center;
  transition: all var(--transition);
}
.player-card:hover { border-color: var(--brand); }
.player-card .num {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800;
  color: var(--text-faint); line-height: 1;
}
.player-card .pname { font-weight: 600; font-size: var(--fs-sm); line-height: 1.25; }
.player-card .ppos { font-size: var(--fs-2xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }

/* --- Rodapé ------------------------------------------------------------- */
.site-footer {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-12);
  padding-block: var(--sp-8) var(--sp-6);
}
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
.footer-grid h4 { font-size: var(--fs-sm); letter-spacing: .1em; color: var(--text-faint); margin-bottom: var(--sp-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.footer-grid a { font-size: var(--fs-sm); color: var(--text-muted); }
.footer-grid a:hover { color: var(--link); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-faint);
}
.social { display: flex; gap: var(--sp-2); }
.social a {
  width: 36px; height: 36px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); transition: all var(--transition);
}
.social a:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.social svg { width: 17px; height: 17px; }

/* --- Publicidade (espaço controlado) ------------------------------------ */
.ad-slot {
  display: grid; place-items: center;
  min-height: 90px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-faint);
  font-size: var(--fs-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ad-slot.tall { min-height: 250px; }

/* ==========================================================================
   11. UTILITÁRIOS
   ========================================================================== */
.stack { display: grid; gap: var(--sp-4); }
.stack-sm { display: grid; gap: var(--sp-2); }
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: var(--fs-sm); }
.tnum { font-variant-numeric: tabular-nums; }
.text-center { text-align: center; }
.hide { display: none !important; }

/* ==========================================================================
   12. RESPONSIVO
   ========================================================================== */
@media (min-width: 600px) {
  .hero-grid { grid-template-columns: repeat(2, 1fr); }
  .news-hero.compact { min-height: 200px; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-card { grid-template-columns: 132px 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .scorebar-label { display: block; }
}

@media (min-width: 900px) {
  :root { --header-h: 70px; }
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .hero-grid { grid-template-columns: 1.8fr 1fr; grid-template-rows: auto auto; }
  .hero-grid > :not(.compact) { grid-row: span 2; min-height: 420px; }
  .match-hero-body { padding: var(--sp-8) var(--sp-6); }
  .match-hero-score .nums { font-size: 4rem; }
  .comp-header .comp-logo { width: 80px; height: 80px; }
  .comp-header h1 { font-size: var(--fs-3xl); }
}

@media (min-width: 1024px) {
  .main-nav { display: block; min-width: 0; }
  .tabbar { display: none; }
  body { padding-bottom: 0; }
  /* O invólucro do botão também sai: vazio, ainda contava para o gap das
     acções e afastava o botão do tema 8 px da goteira. */
  .burger, .header-actions > .menu-wrapper { display: none; }
  .grid-main { grid-template-columns: minmax(0, 1fr) 330px; gap: var(--sp-8); }
  .grid-main > * { min-width: 0; }
  .grid-main.reverse { grid-template-columns: 330px minmax(0, 1fr); }
  /* Com largura disponível, o jogo cabe numa linha só: quase metade da
     altura por jogo, o que conta numa lista de 50 resultados. */
  .match-row {
    grid-template-columns: 76px minmax(0, 1fr) 86px;
    padding: var(--sp-2) var(--sp-5);
    align-items: center;
  }
  .match-row .match-time {
    display: flex; align-items: baseline; gap: 5px;
    justify-content: flex-start; text-align: left;
  }

  .match-teams { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0; }
  /* Casa lê-se da esquerda para o centro; fora, do centro para a direita —
     os dois resultados ficam lado a lado no meio da linha. */
  .match-team:first-child { flex-direction: row-reverse; text-align: right; padding-right: var(--sp-3); }
  .match-team:last-child { padding-left: var(--sp-3); border-left: 1px solid var(--border); }
  .match-team:first-child .goals, .match-team:last-child .goals { order: -1; }
  .match-team .goals { min-width: 24px; text-align: center; font-size: var(--fs-lg); }
  .match-extra { justify-content: flex-end; }

  /* Dentro da barra lateral não há largura para a linha única: volta ao
     formato empilhado, senão os nomes das equipas ficam truncados. */
  .match-list.stacked .match-row { grid-template-columns: 52px minmax(0, 1fr); padding: var(--sp-2) var(--sp-4); }
  .match-list.stacked .match-teams { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .match-list.stacked .match-team:first-child { flex-direction: row; text-align: left; padding-right: 0; }
  .match-list.stacked .match-team:last-child { padding-left: 0; border-left: 0; }
  .match-list.stacked .match-team .goals { order: 0; font-size: var(--fs-md); }
  .match-list.stacked .match-time { display: block; text-align: center; }
  .news-hero:not(.compact) h3 { font-size: var(--fs-2xl); }
  .article-header h1 { font-size: var(--fs-4xl); }
}

@media (max-width: 1023px) {
  .desktop-only { display: none !important; }
  .scorebar { top: var(--header-h); }
}

@media (min-width: 1024px) {
  .mobile-only { display: none !important; }
}

/* Impressão */
@media print {
  .site-header, .tabbar, .scorebar, .ad-slot, .site-footer, .drawer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   13. FICHA DE JOGO — convocados e lance a lance
   ========================================================================== */

/* --- Ícones de acontecimento (substituem os PNG de live.hoqueipatins.pt) -- */
.ev {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 15px; height: 15px;
}
.ev svg { width: 100%; height: 100%; }

.ev-card { width: 10px; height: 14px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }
.ev-card.blue { background: var(--info); }
.ev-card.yellow { background: var(--warn); }
.ev-card.red { background: var(--result-loss); }

.ev-ball { width: 11px; height: 11px; border-radius: 50%; background: var(--text); display: inline-block; flex: 0 0 auto; }
.ev-ball.conceded { background: var(--text-faint); }

.ev-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  padding: 1px 4px; border-radius: 3px;
  background: var(--surface-3); color: var(--text-muted);
  flex: 0 0 auto;
}

/* --- Ficha de equipa ----------------------------------------------------- */
.lineup-grid { display: grid; gap: var(--sp-4); }

.lineup { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.lineup caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-md); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.lineup caption .row { gap: var(--sp-2); }

/* O template dos convocados serve dois ramos — a tabela própria e o shortcode
   [player_list] —, por isso o nome da equipa vive num <h4> antes da tabela em
   vez de num <caption>. Lê-se como um. */
.match-player-stats > .lineup-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-md); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
/* Os ícones de golo, cartão e bola parada vêm do renderLogoEvents() como <img>
   sem medidas; soltos numa célula de tabela saíam ao tamanho natural. */
.lineup .marks img,
.lineup tbody td > img {
  width: 14px; height: 14px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
.lineup .marks { flex-wrap: wrap; }
.lineup thead th {
  font-size: var(--fs-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint);
  padding: var(--sp-2) var(--sp-2);
  text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.lineup thead th.col-player { text-align: left; width: 100%; }
.lineup tbody td {
  padding: 7px var(--sp-2);
  text-align: center;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.lineup tbody td.col-player { text-align: left; }
.lineup tbody tr:hover { background: var(--surface-2); }
.lineup tbody tr:last-child td { border-bottom: 0; }

.lineup .pnum {
  display: inline-block; min-width: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint); font-weight: 700;
  margin-right: 6px;
}
.lineup .pname { font-weight: 600; }
.lineup .ptag { font-size: var(--fs-2xs); color: var(--text-faint); margin-left: 5px; }
.gk-mark {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  padding: 1px 4px; border-radius: 3px;
  background: color-mix(in srgb, var(--live) 18%, transparent);
  color: var(--live);
  text-decoration: none;
  vertical-align: 1px;
}
.lineup .goals-for { font-weight: 700; }
.lineup .goals-against { font-weight: 700; color: var(--live); }
.lineup .marks { display: inline-flex; gap: 3px; align-items: center; justify-content: center; }

.lineup tr.is-staff td { color: var(--text-muted); font-style: italic; }
.lineup tr.is-starter .pname { color: var(--text); }
.lineup tr.is-starter td:first-child { position: relative; }
.lineup tr.is-starter td:first-child::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand);
}
.lineup tr.not-played td { opacity: .55; }

/* --- Lance a lance ------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; }

.tl-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.tl-row:last-child { border-bottom: 0; }

.tl-time {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
  padding-top: 2px;
}

.tl-side { display: grid; gap: 5px; min-width: 0; }
.tl-side:empty { display: none; }

/* Telemóvel: o minuto fica numa coluna fixa à esquerda e as duas equipas
   partilham a coluna larga — a casa encostada à esquerda, a visitante à
   direita, para se distinguirem sem repetir o escudo em cada linha. */
.tl-row > .tl-time { grid-column: 1; }
.tl-row > .tl-side { grid-column: 2; }
.tl-home { justify-items: start; text-align: left; }
.tl-away { justify-items: end; text-align: right; }
.tl-away .tl-item { flex-direction: row-reverse; }

.tl-legend {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-2xs);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint);
}
.tl-legend span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.tl-legend img { width: 16px; height: 16px; object-fit: contain; }

.tl-item {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  min-width: 0;
}
.tl-item .who { color: var(--text); }
.tl-item.is-goal { font-weight: 700; color: var(--text); }
.tl-item.is-goal .score {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  background: var(--surface-3);
  padding: 1px 6px; border-radius: var(--r-sm);
  flex: 0 0 auto;
}
.tl-item .crest { width: 16px; height: 16px; }
/* Os ícones de acção vêm do live app a 20 px; aqui lêem-se como os escudos. */
.tl-icon { width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; }
.tl-time .tl-icon { display: inline-block; vertical-align: middle; margin-right: 5px; }
.tl-time .time {
  display: inline-block;
  background: var(--surface-3);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.tl-time .time:empty { display: none; }
/* Início e fim de parte: uma linha só, ao centro. */
.tl-row.tl-break .tl-item { justify-content: center; text-align: center; }

/* Acontecimentos sem equipa: início e fim de cada parte */
.tl-row.tl-break {
  grid-template-columns: 1fr;
  background: var(--surface-2);
  padding-block: 6px;
}
.tl-break .tl-note {
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
}

/* Cinco inicial */
.tl-lineup { display: grid; gap: 4px; font-size: var(--fs-sm); }
.tl-lineup .title {
  font-size: var(--fs-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); margin-bottom: 2px;
}
.tl-lineup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

@media (min-width: 768px) {
  /* Com largura, cada equipa fica do seu lado, como na mesa de jogo */
  .tl-legend { display: none; }
  .tl-away .tl-item { flex-direction: row; }
  .tl-row { grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); }
  .tl-row > .tl-home { grid-column: 1; justify-items: end; }
  .tl-row > .tl-time { grid-column: 2; text-align: center; }
  .tl-row > .tl-away { grid-column: 3; justify-items: start; }
  .tl-home .tl-item { justify-content: flex-end; text-align: right; }
  .tl-home .tl-item > .ev-tag,
  .tl-home .tl-item > .ev-card,
  .tl-home .tl-item > .ev-ball,
  .tl-home .tl-item > .score,
  .tl-home .tl-item > .crest { order: 2; }
  .tl-side:empty { display: grid; }
  .tl-row.tl-break { grid-template-columns: 1fr; }
  .tl-item .crest { display: none; }
  .tl-home .tl-lineup { text-align: right; }
}

/* --- Marcadores e faltas dentro do cabeçalho do jogo --------------------- */
.mh-scorers {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: grid; gap: 3px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.mh-scorers li { display: flex; align-items: center; gap: 5px; justify-content: center; }
.mh-scorers .ev-ball { width: 8px; height: 8px; background: var(--text-faint); }
.mh-scorers b { color: var(--text); font-weight: 600; }

.match-hero-score .fouls {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .06em;
}
.match-hero-score .fouls b { color: var(--text-muted); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }

.match-hero-score .kickoff {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}

/* Linha de grupo dentro da ficha de equipa */
.lineup tr.lineup-group td {
  text-align: left;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
}
.lineup tr.lineup-group:hover td { background: var(--surface-2); }

@media (min-width: 768px) {
  .lineup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ==========================================================================
   14. QUADROS E ESTATÍSTICAS DE COMPETIÇÃO
   ========================================================================== */

/* Painel com seletor de tabela: chips em cima, tabela em baixo */
.panel-switch { margin-bottom: var(--sp-4); }

/* --- Quadro de resultados (matriz equipa × equipa) ----------------------- */
.matrix {
  border-collapse: collapse;
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}
.matrix th, .matrix td {
  border: 1px solid var(--border);
  padding: 4px 5px;
  text-align: center;
  white-space: nowrap;
}
.matrix thead th {
  background: var(--surface-2);
  color: var(--text-faint);
  font-weight: 700;
  position: sticky; top: 0; z-index: 2;
}
.matrix thead th img, .matrix tbody th img,
.matrix thead th .crest-mono, .matrix tbody th .crest-mono {
  width: 18px; height: 18px; object-fit: contain;
  display: inline-flex; vertical-align: middle; margin-right: 4px;
}
.matrix thead th img, .matrix thead th .crest-mono { margin-right: 0; }
.matrix tbody th {
  text-align: left;
  background: var(--surface-2);
  font-weight: 600;
  font-size: var(--fs-xs);
  position: sticky; left: 0; z-index: 1;
  min-width: 128px;
}
.matrix td.self { background: var(--surface-3); }
.matrix td a { display: block; color: var(--text); font-weight: 600; }
.matrix td a:hover { color: var(--link); }
.matrix td.w a { color: var(--result-win); }
.matrix td.l a { color: var(--result-loss); }
.matrix td.d a { color: var(--text-muted); }

/* --- Sequência de resultados por jornada --------------------------------- */
.seq { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.seq thead th {
  background: var(--surface-2); color: var(--text-faint);
  font-size: var(--fs-2xs); font-weight: 700;
  padding: var(--sp-2) 4px; text-align: center;
  border-bottom: 1px solid var(--border);
}
.seq thead th:first-child { text-align: left; padding-left: var(--sp-4); min-width: 150px; }
.seq tbody td { padding: 5px 3px; text-align: center; border-bottom: 1px solid var(--border); }
.seq tbody td:first-child { text-align: left; padding-left: var(--sp-4); }
.seq .team-cell { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-size: var(--fs-sm); }
.seq .cell {
  display: inline-block; width: 20px; height: 20px; line-height: 20px;
  border-radius: var(--r-sm); font-size: var(--fs-2xs); font-weight: 700; color: #fff;
}
.seq .cell.w { background: var(--result-win); }
.seq .cell.d { background: var(--surface-3); color: var(--text-muted); }
.seq .cell.l { background: var(--result-loss); }
.seq .cell.x { background: transparent; color: var(--text-faint); }

/* --- Tabela verde e vermelha (melhores e piores registos) ---------------- */
.green-red { display: grid; gap: 0; }
.green-red .gr-col { padding: var(--sp-4); }
.green-red .gr-col h4 {
  font-size: var(--fs-sm); letter-spacing: .06em;
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-3);
  border-bottom: 2px solid;
}
.green-red .gr-green h4 { color: var(--result-win); border-color: var(--result-win); }
.green-red .gr-red h4 { color: var(--result-loss); border-color: var(--result-loss); }
.green-red ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.green-red li { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); }
.green-red li .what { color: var(--text-faint); font-size: var(--fs-xs); }
.green-red li .who { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.green-red li b { font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
  .green-red { grid-template-columns: 1fr 1fr; }
  .green-red .gr-red { border-left: 1px solid var(--border); }
}

/* --- Tabela de faltas de equipa por jornada ------------------------------ */
.faults .cell {
  display: inline-block; min-width: 20px; padding: 1px 3px;
  border-radius: var(--r-sm); font-size: var(--fs-2xs); font-weight: 700;
}
.faults .cell.ok { background: color-mix(in srgb, var(--result-win) 20%, transparent); color: var(--result-win); }
.faults .cell.mid { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.faults .cell.bad { background: color-mix(in srgb, var(--result-loss) 20%, transparent); color: var(--result-loss); }

/* --- Bolas paradas: cabeçalho de dois níveis ----------------------------- */
.standings thead th.group {
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  letter-spacing: .04em;
}
.standings th.sep, .standings td.sep { border-left: 1px solid var(--border); }
.standings td.pct { font-weight: 700; }

/* --- Cartão de estatística em números ------------------------------------ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--sp-4); }
.kpi .label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
.kpi .value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .value small { font-size: var(--fs-md); color: var(--text-faint); font-weight: 700; }

/* O último lugar da barra inferior é um botão (abre o menu), não um link */
.tabbar .tabbar-more {
  display: grid; justify-items: center; gap: 3px;
  padding: var(--sp-2) 0 6px;
  font-size: clamp(10px, 2.9vw, 11px); font-weight: 600;
  font-family: inherit;
  color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .04em;
  background: none; border: 0; cursor: pointer;
}
.tabbar .tabbar-more svg { width: 21px; height: 21px; }

/* --- Barra de jogos servida pelo WordPress ------------------------------- */
.scorebar-track.listGamesAgenda { list-style: none; margin: 0; padding: 0; }
.scorebar-track .agenda-item { display: flex; flex: 0 0 auto; }
.scorebar-track .agenda-item > .score-pill { flex: 1; position: relative; }
.scorebar-arrows { display: flex; gap: 4px; align-items: center; padding-left: var(--sp-2); }

/* Seta de golo acabado de marcar (a classe é alternada pelo script do live) */
.score-pill .arrowGame { display: none; }
.score-pill .arrowGame.up,
.score-pill .arrowGame.down {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.score-pill .arrowGame.up { border-bottom: 5px solid var(--result-win); }
.score-pill .arrowGame.down { border-top: 5px solid var(--result-loss); }

.score-pill .comp .live_time:not(:empty) {
  color: var(--live);
  font-weight: 700;
  margin-left: 4px;
}
.score-pill .comp img { max-height: 13px; width: auto; }
.score-pill .tv { position: absolute; right: var(--sp-3); bottom: 7px; color: var(--info); }

/* ==========================================================================
   15. LISTA DE EVENTOS SERVIDA PELO WORDPRESS
   O markup é o do tema anterior (tabela com separadores por dia e por
   competição) porque o script de paginação e o de resultados ao vivo
   dependem dele. O aspecto é o da linha de jogo do design system.
   ========================================================================== */
table.sp-event-list {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-base);
  margin: 0;
}
table.sp-event-list td { border: 0; padding: 0; }

/* --- Separadores --------------------------------------------------------- */
tr.dateSeparatorTableEventList td {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-3);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  border-block: 1px solid var(--border);
}
tr.competitionName td {
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-2);
  border-block: 1px solid var(--border);
}
tr.competitionName .leagueName {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
tr.competitionName .leagueName a { color: inherit; display: flex; align-items: center; gap: var(--sp-2); }
tr.competitionName .leagueName a:hover { color: var(--link); }
tr.competitionName .leagueName img { max-height: 20px; width: auto; display: inline-block; }

/* --- Linha de jogo ------------------------------------------------------- */
table.sp-event-list tr[data-live-event] {
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
table.sp-event-list tr[data-live-event]:hover { background: var(--surface-2); }
table.sp-event-list tr[data-live-event] > td { padding: var(--sp-2) var(--sp-2); vertical-align: middle; }
table.sp-event-list tr[data-live-event] > td:first-child { padding-left: var(--sp-4); }
table.sp-event-list tr[data-live-event] > td:last-child { padding-right: var(--sp-4); }

.sp-event-list .timeGame {
  width: 72px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.35;
  white-space: nowrap;
}
.sp-event-list .timeGame .live_time:not(:empty) { display: block; color: var(--live); font-weight: 700; }
.sp-event-list .seasonGame { font-size: var(--fs-2xs); color: var(--text-faint); text-align: right; white-space: nowrap; }
.sp-event-list .tv { color: var(--info); display: inline-flex; }

/* --- Equipas e resultado ------------------------------------------------- */
.sp-event-list .teamsGame { width: 100%; }
.sp-event-list .teamsInfos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
}
.sp-event-list .teamHome,
.sp-event-list .teamAway {
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0;
  font-weight: 500;
}
.sp-event-list .teamHome { justify-content: flex-end; text-align: right; }
.sp-event-list .teamAway { justify-content: flex-start; text-align: left; }
.sp-event-list .logoTeam { flex: 0 0 auto; line-height: 0; }
.sp-event-list .logoTeam img,
.sp-event-list .logoTeam .crest { width: 24px; height: 24px; object-fit: contain; }

.sp-event-list .gameResult {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: center;
  min-width: 62px;
  color: var(--text);
}
.sp-event-list .gameResult .resultHome,
.sp-event-list .gameResult .resultAway { display: inline-block; min-width: 18px; }

.sp-event-list .game-note {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-top: 2px;
}
.sp-event-list .game-note-sm { font-size: var(--fs-2xs); }

/* --- Rodapé de paginação ------------------------------------------------- */
.lastResultFooter {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-4);
  border-top: 1px solid var(--border);
}
.lastResultFooter .hide { display: none; }

/* --- Telemóvel: o resultado desce para debaixo das equipas --------------- */
@media (max-width: 599px) {
  .sp-event-list .timeGame { width: 54px; font-size: var(--fs-2xs); }
  /* O nowrap mantinha "22:00" e "1ªP - 22'" na mesma linha e a coluna ficava
     com 126 px: sobravam 8 px para cada nome de equipa, por cima do resultado. */
  .sp-event-list .timeGame { white-space: normal; }
  .sp-event-list .timeGame .eventDate { white-space: nowrap; }
  table.sp-event-list tr[data-live-event] > td:first-child { padding-left: var(--sp-2); }
  /* A jornada sai: num ecrã estreito os nomes valem mais do que ela. */
  .sp-event-list .matchDay { display: none; }
  .sp-event-list .teamsInfos { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); }
  .sp-event-list .teamHome,
  .sp-event-list .teamAway {
    grid-column: 1;
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: left;
    font-size: var(--fs-sm);
  }
  /* A visitada vem do template como logo + nome, ao contrário da visitante:
     invertê-la também punha os dois escudos em lados opostos. Com a direcção
     de volta a row, o flex-end de cima passa a ser a direita e a linha de
     baixo ficava encostada ao lado oposto da de cima. */
  .sp-event-list .teamAway { flex-direction: row; justify-content: flex-start; }
  .sp-event-list .teamsInfos > div:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .sp-event-list .gameResult { font-size: var(--fs-lg); min-width: 48px; }
  .sp-event-list .seasonGame { display: none; }
}

/* ==========================================================================
   16. PÁGINAS DE COMPETIÇÃO, EQUIPA E JOGADOR
   O PHP destas páginas gera o markup em string (league-table.php,
   player-list.php) ou depende de ganchos do all.min.js (.listTabs).
   Fica tudo como estava: o aspecto é feito aqui.
   ========================================================================== */

/* --- Cabeçalho da competição / equipa ------------------------------------ */
.leagueInfo {
  display: block;
  padding: var(--sp-5) 0;
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.leagueInfo .logoLeague { flex: 0 0 auto; }
.leagueInfo .logoLeague img {
  width: 72px; height: 72px; object-fit: contain;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-2);
}
.leagueInfo .infosLeague { flex: 1; min-width: 0; }
.leagueInfo .infosLeague h1,
.leagueInfo .infosLeague h2,
.leagueInfo .infosLeague .title-section {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 6px;
  line-height: 1.1;
}
.leagueInfo .descLeague {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
img.flagCountry {
  width: 20px; height: 15px;
  object-fit: cover;
  border-radius: 2px;
  display: inline-block;
  flex: 0 0 auto;
}
.leagueInfo .epocaSelect { margin-left: auto; flex: 0 0 auto; }
.leagueInfo .titleTop { display: flex; align-items: center; gap: var(--sp-4); width: 100%; flex-wrap: wrap; }

/* Em telemóvel o selector de época (131 px) deixava 38 px ao título, que caía
   palavra a palavra. Passa para a linha de baixo e o título fica com o resto. */
@media (max-width: 600px) {
  .leagueInfo .titleTop { row-gap: var(--sp-3); }
  .leagueInfo .epocaSelect { flex: 1 1 100%; margin-left: 0; }
}

/* --- Separadores (o all.min.js alterna .active) --------------------------- */
/* .listTabs é o <div> que envolve o <ul> dos separadores: tem de ficar
   block, senão os painéis de conteúdo entram na mesma linha flex que a
   navegação e espremem-se. */
.listTabs { display: block; }
.listTabs > ul {
  display: flex;
  gap: var(--sp-1);
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.listTabs > ul::-webkit-scrollbar { display: none; }
.listTabs li { flex: 0 0 auto; }
.listTabs li a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.listTabs li a:hover { color: var(--text); }
.listTabs li.active a,
.listTabs li a.active { color: var(--text); border-bottom-color: var(--brand); }

.sectionTabs { margin-bottom: var(--sp-6); }
.tabContent { display: none; }
.tabContent.active,
.tabContent:target { display: block; }
.tablePadding { padding-top: var(--sp-2); }
.tableResponsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Classificação -------------------------------------------------------- */
table.sp-league-table,
table.tableStandings {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
table.tableStandings thead td,
table.tableStandings thead th {
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
table.tableStandings tbody td {
  padding: var(--sp-2) var(--sp-2);
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
table.tableStandings tbody tr:last-child td { border-bottom: 0; }
table.tableStandings tbody tr.itemTeam { cursor: pointer; transition: background var(--transition); }
table.tableStandings tbody tr.itemTeam:hover > td { background: var(--surface-2); }

.tableStandings .positionStanding {
  width: 34px;
  font-weight: 700;
  color: var(--text);
  /* a cor de fundo vem dos apuramentos definidos no back-office */
}
.tableStandings .numberStanding { width: 26px; color: var(--text-faint); font-size: var(--fs-2xs); }
.tableStandings .teamStanding {
  text-align: left !important;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.tableStandings .teamStanding .team-logo,
.tableStandings .teamStanding .logoTeam { display: inline-block; vertical-align: middle; margin-right: 6px; line-height: 0; }
.tableStandings .teamStanding img { width: 22px; height: 22px; object-fit: contain; display: inline-block; }
.tableStandings .live_time_team_ranking:not(:empty) { color: var(--live); font-weight: 700; margin-left: 6px; font-size: var(--fs-2xs); }

/* A coluna de pontos é a informação principal */
.tableStandings td.data-pts,
.tableStandings td.data-points { font-weight: 800; color: var(--text); font-size: var(--fs-base); }

/* Sequência de resultados dentro da classificação */
.tableStandings .seqStanding { white-space: nowrap; }
.tableStandings .seqStanding span,
.tableStandings .seqStanding i {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 3px;
  overflow: hidden;
  text-indent: -999px;
}

.sp-league-table-link,
.fullStandingsBtn {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
}
.fullStandingsBtn:hover { color: var(--link-hover); }

/* --- Plantel -------------------------------------------------------------- */
table.sp-player-list {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
}
table.sp-player-list thead th,
table.sp-player-list thead td {
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: var(--sp-2);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
table.sp-player-list tbody td {
  padding: 7px var(--sp-2);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
table.sp-player-list tbody tr:hover > td { background: var(--surface-2); }
table.sp-player-list .data-name { text-align: left; font-weight: 600; }
table.sp-player-list .data-number { width: 34px; color: var(--text-faint); font-weight: 700; }
table.sp-player-list .player-photo img,
table.sp-player-list .team-logo img { width: 24px; height: 24px; object-fit: contain; display: inline-block; }
table.sp-player-list .player-flag img { width: 18px; height: auto; display: inline-block; }
table.sp-player-list .background-gray > td,
table.sp-player-list tr.background-gray { background: var(--surface-2); font-weight: 700; }
table.sp-player-list .background-gray-light > td { background: var(--surface-2); }

/* --- Listas e caixas auxiliares ------------------------------------------- */
.list_links { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.list_links li a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted);
  transition: all var(--transition);
}
.list_links li a:hover,
.list_links li.active a { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

.moreInfosFooter { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); text-align: center; }
.teamNews { margin-top: var(--sp-6); }
.resultsList, .resultsListTeam { margin-bottom: var(--sp-5); }
.clearfix::after { content: ""; display: block; clear: both; }

/* --- Separadores do jQuery UI (páginas de liga e de equipa) --------------
   O jquery-ui.min.css continua enfileirado (outros componentes dependem
   dele), por isso estes selectores sobem de especificidade de propósito:
   as regras do widget são `.ui-tabs .ui-tabs-nav li`, que ganham a `li`.
   ------------------------------------------------------------------------ */
.ui-tabs.listTabs,
.ui-tabs { padding: 0; background: none; border: 0; display: block; }

.ui-tabs .ui-tabs-nav {
  display: flex;
  gap: var(--sp-1);
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
}
.ui-tabs .ui-tabs-nav::-webkit-scrollbar { display: none; }

.ui-tabs .ui-tabs-nav li,
.ui-tabs .ui-tabs-nav li.ui-tabs-tab {
  flex: 0 0 auto;
  background: none;
  background-image: none;
  border: 0;
  margin: 0;
  padding: 0;
  float: none;
  top: 0;
  white-space: nowrap;
  list-style: none;
}
.ui-tabs .ui-tabs-nav li a,
.ui-tabs .ui-tabs-nav li .ui-tabs-anchor {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  float: none;
  background: none;
  transition: color var(--transition), border-color var(--transition);
}
.ui-tabs .ui-tabs-nav li a:hover { color: var(--text); background: var(--surface-2); }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-active a {
  color: var(--text);
  border-bottom-color: var(--brand);
  background: none;
}

/* Nas páginas de liga e de equipa os separadores sem nada para mostrar
   escondem-se (o PHP e o app.js põem-lhes hidden). Se sobra um só, a barra
   não tem nada para escolher e sai também, como na ficha de jogo; volta
   sozinha se a época escolhida trouxer mais. */
.listTabs[data-esconde-vazios] > ul > li[hidden] { display: none; }
.listTabs[data-esconde-vazios] > ul:not(:has(> li:not([hidden]) ~ li:not([hidden]))) { display: none; }

.ui-tabs .ui-tabs-panel {
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
}
.ui-widget-content {
  background: none;
  background-image: none;
  border: 0;
  color: var(--text);
}
.ui-widget-header { background: none; border: 0; color: var(--text); }
.ui-widget { font-family: var(--font-body); font-size: inherit; }
.ui-widget.ui-widget-content { border: 0; }
.ui-corner-all, .ui-corner-top, .ui-corner-bottom, .ui-corner-left, .ui-corner-right { border-radius: 0; }
.ui-state-default, .ui-state-active, .ui-state-hover {
  background: none; background-image: none; border: 0;
}

/* O conteúdo dos separadores é mostrado pelo widget, não por :target */
.ui-tabs-panel .tabContent { display: block; }

/* --- list_links (vinha de um <style> em linha no single-league.php) ------ */
div.list_links { margin: var(--sp-4) 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
div.list_links > a {
  display: inline-block;
  padding: 8px var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  word-break: break-word;
  box-shadow: none;
  cursor: pointer;
  transition: all var(--transition);
}
div.list_links > a:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* ==========================================================================
   17. ARTIGOS, LISTAGENS E PÁGINAS
   ========================================================================== */

/* --- Listagem de notícias ------------------------------------------------ */
.listing-news { display: grid; gap: 0; }
.news-item.news-card { grid-template-columns: 132px minmax(0, 1fr); }
/* Sem imagem destacada — os jogos que aparecem na pesquisa, por exemplo — o
   content.php não escreve o .thumb, mas a coluna dos 132px continuava
   reservada e era lá que o texto ia parar: títulos partidos em duas linhas
   com a largura toda do cartão por usar ao lado. */
.news-card:not(:has(.thumb)),
.news-item.news-card:not(:has(.thumb)) { grid-template-columns: minmax(0, 1fr); }
.news-item .entry-title {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 0 6px;
}
.news-item .entry-title a { color: var(--text); }
.news-item:hover .entry-title a { color: var(--link); }
.news-item .description {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-item .meta { font-size: var(--fs-xs); color: var(--text-faint); }
.news-item .button-news {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--link);
}

@media (max-width: 599px) {
  .news-item.news-card { grid-template-columns: 96px minmax(0, 1fr); }
}

.title-section-big {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.taxonomy-description { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }

/* --- Paginação ------------------------------------------------------------ */
.navigation.paging-navigation { margin-top: var(--sp-6); }
.nav-links.btnLoadingMore { display: flex; gap: var(--sp-3); justify-content: center; }
.loadingMoreBtn a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-weight: 600; font-size: var(--fs-sm);
  color: var(--text);
  transition: all var(--transition);
}
.loadingMoreBtn a:hover { border-color: var(--brand); color: var(--link); }

/* --- Artigo --------------------------------------------------------------- */
figure.pageHeader { margin: 0 0 var(--sp-6); }
.pageHeader img.image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.pageHeader .overlay-hero { display: none; }

.single-entry .entry-header { margin-bottom: var(--sp-5); }
.single-entry .entry-title,
.entry-header .entry-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.005em;
  line-height: 1.16;
  text-wrap: balance;
  margin-bottom: var(--sp-3);
}
.entry-details {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-block: 1px solid var(--border);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.entry-content,
.defaultStyle {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--text);
}
/* O .defaultStyle não marca só o corpo de um artigo: envolve também os painéis
   das abas da ficha de jogo, da competição e da equipa, que levam tabelas e
   cartões. Com a medida de leitura no contentor, tudo isso ficava preso a
   72ch — numa página de 1500 px, metade vazia. A medida vive agora no texto. */
.defaultStyle > p,
.defaultStyle > ul,
.defaultStyle > ol,
.defaultStyle > h2,
.defaultStyle > h3,
.defaultStyle > h4,
.defaultStyle > blockquote { max-width: 72ch; }
.entry-content p { margin-bottom: var(--sp-5); }
.entry-content h2 { font-size: var(--fs-xl); text-transform: none; letter-spacing: 0; margin-top: var(--sp-8); }
.entry-content h3 { font-size: var(--fs-lg); text-transform: none; letter-spacing: 0; margin-top: var(--sp-6); }
.entry-content a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--link-hover); }
.entry-content img { border-radius: var(--r-md); }
.entry-content figcaption { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-2); }
.entry-content ul, .entry-content ol { padding-left: var(--sp-5); margin-bottom: var(--sp-5); }
.entry-content li { margin-bottom: var(--sp-2); }
.entry-content blockquote {
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--brand);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.3;
}
.entry-thumbnail { margin-bottom: var(--sp-5); }
.entry-thumbnail img { border-radius: var(--r-lg); width: 100%; height: auto; }
.page-links { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-muted); }

/* ==========================================================================
   18. FICHA DE JOGO
   O PHP de single-event.php não muda: a estrutura dele (cabeçalho, equipas,
   resultado, marcadores) já corresponde à do design system.
   ========================================================================== */
.gameBoxLive {
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}

/* A jornada ao lado do nome da prova, separada por um ponto. */
.gameBoxLive .nameLeague .matchDayTag {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
}
.gameBoxLive .nameLeague .matchDayTag::before { content: "·"; margin-right: 6px; }
/* Num ecrã estreito o nome da prova, a jornada e a hora não cabem em linha:
   a prova fica com a linha toda e a hora desce. */
@media (max-width: 599px) {
  .gameBoxLive .liveHeader .nameLeague { flex: 1 1 100%; flex-wrap: wrap; }
  .gameBoxLive .liveHeader .timeGame { flex: 1 1 100%; text-align: left; }
}

.gameBoxLive .liveHeader {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.gameBoxLive .nameLeague { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.gameBoxLive .nameLeague img { max-height: 22px; width: auto; display: inline-block; }
.gameBoxLive .liveHeader .timeGame { text-align: right; font-variant-numeric: tabular-nums; }
.gameBoxLive .liveHeader .timeGame span { font-weight: 700; color: var(--text); }
.gameBoxLive .dateGame { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; }

.gameBoxLive .dateGameInfos {
  padding: var(--sp-3) var(--sp-4) 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.gameBoxLive .statusGame { font-size: var(--fs-xs); }
.gameBoxLive .statusGame .live_time:not(:empty) { color: var(--live); font-weight: 700; }

/* --- Equipas e resultado ------------------------------------------------- */
.gameBoxLive .liveTeams { padding: var(--sp-5) var(--sp-4); }
.gameBoxLive .contentTeams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
}
.gameBoxLive .teamHome,
.gameBoxLive .teamAway { min-width: 0; }
.gameBoxLive .liveTeams .teamInfos {
  display: flex; align-items: center; gap: var(--sp-3);
  justify-content: flex-end;
}
.gameBoxLive .teamAway .teamInfos { justify-content: flex-start; }
.gameBoxLive .nameTeam {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: right;
}
.gameBoxLive .teamAway .nameTeam { text-align: left; }
.gameBoxLive .liveTeams .logoTeam { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; }

.gameBoxLive .result { text-align: center; padding-inline: var(--sp-3); }
.gameBoxLive .result .numbers {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.gameBoxLive .result .numbers .divider { color: var(--text-faint); font-size: .5em; }
.gameBoxLive .result .numbers + .numbers {
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* --- Marcadores e guarda-redes ------------------------------------------- */
.gameBoxLive .footerInfos {
  padding: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.gameBoxLive .footerInfos .contentTeams { align-items: start; gap: var(--sp-6); }
.gameBoxLive .footerInfos .teamHome .teamInfos { text-align: left; }
.gameBoxLive .footerInfos .teamAway .teamInfos { text-align: right; }
.gameBoxLive .footerInfos .teamInfos { color: var(--text-muted); line-height: 1.7; }
/* Os marcadores vinham como spans encostados uns aos outros, a ler-se como
   texto corrido. São a lista da proposta: um por linha, com a bola à frente,
   encostados ao lado da equipa a que pertencem. */
.gameBoxLive .footerInfos .mh-scorers { margin: 0; }
.gameBoxLive .footerInfos .teamHome .mh-scorers li { justify-content: flex-start; }
.gameBoxLive .footerInfos .teamAway .mh-scorers li { justify-content: flex-end; }
.gameBoxLive .footerInfos .teamAway .mh-scorers li > .ev-ball { order: 2; }
.mh-scorers .muted { font-variant-numeric: tabular-nums; }
/* Golos sofridos: a bola e o nome a vermelho, em vez do style inline. */
.mh-conceded b { color: var(--live); }
.mh-conceded .ev-ball.conceded { background: var(--live); }
.gameBoxLive .footerInfos .divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}

/* --- Legenda e transmissão ----------------------------------------------- */
.gameBoxLive img[src*="tv-1.png"],
.sp-template img[src*="tv-1.png"],
img[src*="tv-1.png"] { max-height: 26px !important; height: 26px !important; width: auto !important; display: inline-block; }

@media (max-width: 599px) {
  .gameBoxLive .liveTeams .teamInfos { flex-direction: column; gap: var(--sp-2); justify-content: center; }
  .gameBoxLive .nameTeam,
  .gameBoxLive .teamAway .nameTeam { text-align: center; font-size: var(--fs-md); }
  .gameBoxLive .liveTeams .logoTeam { width: 48px; height: 48px; }
  .gameBoxLive .result .numbers { font-size: var(--fs-3xl); }
  .gameBoxLive .footerInfos .contentTeams { grid-template-columns: 1fr 1px 1fr; gap: var(--sp-3); }
}

.gameBoxLive .liveTvLink { padding: 0 var(--sp-4) var(--sp-4); text-align: center; }
.gameBoxLive .liveTvLink .btn { color: var(--brand-ink); }
/* Imagens soltas dentro da ficha nunca passam a largura do cartão */
.gameBoxLive img { max-width: 100%; height: auto; }

/* A ficha de jogo mostra plantéis largos: o scroll fica dentro do cartão */
.sp-template-player-list .sp-table-wrapper,
.sp-template-player-list { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-template-player-list table { min-width: max-content; }

/* ==========================================================================
   19. CONTENÇÃO
   Tabelas largas (plantéis, classificações com muitas colunas) devem rolar
   dentro do seu cartão, nunca esticar a página.
   ========================================================================== */
.grid-main > *,
main.content > *,
.sportspress,
.sp-template,
.tabContent,
.ui-tabs-panel,
.resultsList,
.resultsListTeam,
.tableResponsive,
.sectionTabs,
.leagueInfo { min-width: 0; max-width: 100%; }

.sp-template-player-list,
.sp-template-league-table,
.sp-template-event-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Dentro do scroll, a tabela pode ser tão larga quanto precisa */
.sp-template-player-list table { min-width: max-content; }

/* ==========================================================================
   20. QUADROS E ESTATÍSTICAS DAS COMPETIÇÕES
   Os dez templates de templates/stats/ partilham as mesmas classes
   (.old-table, .tabela-classificacao, .posicao, .c-*-leve). Estilizá-las
   aqui cobre-os a todos sem lhes tocar no PHP.
   ========================================================================== */
.contentExternalStyle { margin-bottom: var(--sp-5); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

.old-table table,
table.tabela-classificacao {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.old-table table thead td,
.old-table table thead th,
table.tabela-classificacao thead td,
table.tabela-classificacao thead th {
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: var(--sp-2);
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.old-table table tbody td,
table.tabela-classificacao tbody td {
  padding: 7px var(--sp-2);
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.old-table table tbody tr:last-child td,
table.tabela-classificacao tbody tr:last-child td { border-bottom: 0; }
.old-table table tbody tr:hover > td,
table.tabela-classificacao tbody tr:hover > td { background: var(--surface-2); }

/* Primeira coluna de texto (nome de equipa ou jogador) alinha à esquerda */
.old-table table td.nome-team,
table.tabela-classificacao td.nome-team,
.old-table table .nome-team { text-align: left; font-weight: 600; color: var(--text); white-space: nowrap; }
.old-table table img,
table.tabela-classificacao img {
  width: 22px; height: 22px; object-fit: contain;
  display: inline-block; vertical-align: middle; margin-right: 5px;
}

.posicao {
  font-weight: 700;
  color: var(--text);
  width: 34px;
}

/* --- Semáforo (as classes c-*-leve vêm dos templates) -------------------- */
.c-verde-leve { background: color-mix(in srgb, var(--result-win) 20%, transparent) !important; color: var(--result-win) !important; }
.c-amarelo-leve { background: color-mix(in srgb, var(--warn) 22%, transparent) !important; color: var(--warn) !important; }
.c-vermelho-leve { background: color-mix(in srgb, var(--result-loss) 20%, transparent) !important; color: var(--result-loss) !important; }
.c-azul-leve { background: color-mix(in srgb, var(--info) 20%, transparent) !important; color: var(--info) !important; }
.verde-escuro { color: var(--result-win) !important; }
.small-text { font-size: var(--fs-2xs); }

/* --- Sequência de resultados --------------------------------------------- */
table.tabela-classificacao .win,
.old-table table .win { background: color-mix(in srgb, var(--result-win) 22%, transparent); color: var(--result-win); font-weight: 700; }
table.tabela-classificacao .draw,
.old-table table .draw { background: var(--surface-3); color: var(--text-muted); font-weight: 700; }
table.tabela-classificacao .lose,
.old-table table .lose { background: color-mix(in srgb, var(--result-loss) 22%, transparent); color: var(--result-loss); font-weight: 700; }

/* --- Quadro de resultados cruzados --------------------------------------- */
table.tabela-quadro-geral-resultados {
  border-collapse: collapse;
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
}
table.tabela-quadro-geral-resultados td,
table.tabela-quadro-geral-resultados th {
  border: 1px solid var(--border);
  padding: 4px 5px;
  text-align: center;
  white-space: nowrap;
  color: var(--text-muted);
}
/* O border-collapse: collapse acima, e o overflow: hidden que o .old-table
   table impõe para arredondar os cantos, desligavam os dois sticky que se
   seguem: o quadro deslizava inteiro e ficava uma grelha de datas sem dono.
   A moldura e o arredondamento passam para o .table-responsive (ver 34). */
table.tabela-quadro-geral-resultados {
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible;
}
/* Com separate, as bordas deixam de se fundir: cada célula guarda só as de
   cima e da esquerda, e a tabela fecha-se pela moldura do invólucro. */
table.tabela-quadro-geral-resultados td,
table.tabela-quadro-geral-resultados th { border-width: 1px 0 0 1px; }
table.tabela-quadro-geral-resultados tr > :first-child { border-left: 0; }
table.tabela-quadro-geral-resultados thead tr:first-child > * { border-top: 0; }

table.tabela-quadro-geral-resultados thead th {
  background: var(--surface-2);
  color: var(--text-faint);
  font-weight: 700;
  position: sticky; top: 0; z-index: 2;
}
table.tabela-quadro-geral-resultados td.nome-team,
table.tabela-quadro-geral-resultados th.nome-team {
  text-align: left;
  background: var(--surface-2);
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--text);
  position: sticky; left: 0; z-index: 1;
  min-width: 130px;
}
/* O canto é das duas: sem subir o z-index, a primeira coluna passava-lhe
   por cima ao deslizar para a direita. */
table.tabela-quadro-geral-resultados th.nome-team { z-index: 3; }
table.tabela-quadro-geral-resultados tbody tr:hover > td.nome-team { background: var(--surface-3); }
table.tabela-quadro-geral-resultados img {
  width: 18px !important; height: 18px !important;
  object-fit: contain; display: inline-block; vertical-align: middle; margin-right: 4px;
}
table.tabela-quadro-geral-resultados .result,
table.tabela-quadro-geral-resultados td a { color: var(--text); font-weight: 600; }
table.tabela-quadro-geral-resultados td a:hover { color: var(--link); }

/* --- Bloco de evento na barra lateral (event-blocks.php) -----------------
   Cada um destes ocupava cerca de 900 px: era a ficha de jogo inteira dentro
   da barra lateral. Aqui fica um cartão compacto, com a mesma informação.
   ------------------------------------------------------------------------ */
.boxLive {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-3);
  transition: border-color var(--transition);
}
.boxLive:hover { border-color: var(--brand); }

.boxLive .liveHeader {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 7px var(--sp-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
}
.boxLive .nameLeague {
  display: flex; align-items: center; gap: 5px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.boxLive .nameLeague img { max-height: 15px !important; width: auto !important; flex: 0 0 auto; }
.boxLive .timeGame { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.boxLive .timeGame .eventDate { font-weight: 700; color: var(--text-muted); }
.boxLive .timeGame .dateGame { display: inline; }
.boxLive .timeGame .dateGame::before { content: " · "; }
.boxLive .live_time:not(:empty) { color: var(--live); font-weight: 700; margin-left: 4px; }

.boxLive .liveTeams { padding: var(--sp-3); }
.boxLive .contentTeams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
}
.boxLive .teamHome,
.boxLive .teamAway { min-width: 0; }
.boxLive .teamInfos {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
}
.boxLive .teamInfos img,
.boxLive .logoTeam {
  width: 36px !important; height: 36px !important;
  object-fit: contain; flex: 0 0 auto;
}
.boxLive .nameTeam {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}
.boxLive .result { text-align: center; padding-inline: var(--sp-2); }
.boxLive .statusGame {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 3px;
}
.boxLive .numbers {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.boxLive .numbers .divider { color: var(--text-faint); }
.boxLive .liveFooter {
  padding: 6px var(--sp-3);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.boxLive .btn,
.boxLive .btnWhite {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-2xs); font-weight: 600;
  color: var(--text-muted);
}
.boxLive .btn:hover { border-color: var(--brand); color: var(--link); }
.setCenter { text-align: center; }

/* --- Estatísticas de jogadores no jogo ----------------------------------- */
.match-player-stats-container { margin-bottom: var(--sp-5); }
.match-player-stats .hide { display: none; }
@media (max-width: 767px) {
  .match-player-stats .pc { display: none; }
}
@media (min-width: 768px) {
  .match-player-stats .mobile { display: none; }
}

/* --- Legenda dos símbolos ------------------------------------------------ */
.lineup-legend { margin: 0 0 var(--sp-4); }
.lineup-legend-sheet { margin-bottom: var(--sp-5); }
.lineup-legend-sheet img {
  width: 100%; height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
@media (max-width: 767px) { .lineup-legend-sheet .pc { display: none; } }
@media (min-width: 768px) { .lineup-legend-sheet .mobile { display: none; } }

/* ==========================================================================
   21. FORMULÁRIOS DOS TEMPLATES
   Vários templates (live-day, jornadas, single-team) usam .custom-select ou
   um <select> solto. Estilizá-los aqui evita editar cada um.
   ========================================================================== */
.custom-select:not(.field) {
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 var(--sp-3);
  transition: border-color var(--transition);
}
.custom-select:not(.field):focus-within { border-color: var(--brand); }

select.form-control,
.custom-select select,
#daySelector_ + select {
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  padding: 10px var(--sp-2) 10px 0;
  cursor: pointer;
  appearance: none;
  min-width: 0;
}
select.form-control option,
.custom-select select option { background: var(--bg-elevated); color: var(--text); }

/* Selects sem contentor (templates/jornadas.php) */
select[id^="daySelector_"],
select[id^="seasonSelector_"] {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px var(--sp-3);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  max-width: 100%;
}
select[id^="daySelector_"]:focus,
select[id^="seasonSelector_"]:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
select[id^="daySelector_"] option,
select[id^="seasonSelector_"] option { background: var(--bg-elevated); color: var(--text); }

/* Formulários de filtro dos templates antigos */
.sp-template-event-list form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-4) !important;
}
.sp-template-event-list form .btn { flex: 0 0 auto; padding: 10px var(--sp-4) !important; }
/* Com o filtro lá dentro, o bloco não pode cortar a lista de opções. O
   overflow-x: auto dele e dos .tableResponsive à volta põe também o
   overflow-y em auto: com "Sem resultados." a lista aberta ficava presa num
   bloco de 140 px. A tabela rola no seu .sp-table-wrapper, que tem
   overflow-x próprio. */
.tableResponsive:has(.sp-template-event-list > form.filters),
.sp-template-event-list:has(> form.filters) { overflow: visible; }

#day_selected_container { margin-top: var(--sp-5) !important; }
#live_day_main_container { min-height: 160px; }

/* ==========================================================================
   22. BARRA LATERAL
   Os mesmos templates aparecem na coluna principal e na barra lateral. Aqui
   ficam compactos: na barra lateral há 330 px, não 600.
   ========================================================================== */
#secondary { font-size: var(--fs-sm); }

/* Espaço entre blocos do editor (os espaçadores foram filtrados) */
#secondary > * { margin-bottom: var(--sp-3); }
#secondary > *:last-child { margin-bottom: 0; }

/* --- Jogos do dia (hp_render_today_games) -------------------------------- */
#secondary .contentExternalStyle { margin-bottom: 0; }
#secondary .old-table table,
#secondary table.tabela-classificacao { font-size: var(--fs-xs); }
#secondary .old-table table tbody td {
  padding: 5px 4px;
  vertical-align: middle;
  line-height: 1.3;
}
/* Hora à esquerda, equipas ao centro, resultado destacado */
#secondary .old-table table tbody td:first-child {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  white-space: nowrap;
  width: 38px;
}
#secondary .old-table table img { width: 20px !important; height: 20px !important; margin: 0 0 2px; }
#secondary .old-table table br { line-height: 0.6; }
#secondary .gameResult { font-size: var(--fs-md) !important; font-weight: 800; white-space: nowrap; }
#secondary .gameResult div { font-size: var(--fs-2xs) !important; color: var(--text-faint); }
/* A última coluna (logótipo da competição e jornada) não cabe */
#secondary .old-table table thead td:last-child,
#secondary .old-table table thead th:last-child,
#secondary .old-table table tbody td:last-child { display: none; }

/* --- Grelha de competições (core/columns com 24 imagens) ----------------- */
#secondary .wp-block-columns {
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
#secondary .wp-block-column { gap: var(--sp-2); }
#secondary .wp-block-column figure,
#secondary .wp-block-column .wp-block-image { margin-bottom: var(--sp-2); }
#secondary .wp-block-column img { border-radius: var(--r-md); }

/* --- Botões do editor ---------------------------------------------------- */
#secondary .wp-block-buttons { margin-bottom: 0; }
#secondary .wp-block-button__link { width: 100%; }
/* Botões que são imagens: o link não deve acrescentar fundo nem padding */
#secondary .wp-block-button__link:has(img) {
  background: none;
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
}
#secondary .wp-block-button__link img { display: block; width: 100%; height: auto; }

/* --- Blocos de evento ---------------------------------------------------- */
#secondary .boxLive { margin-bottom: var(--sp-2); }
#secondary .boxLive .nameTeam { font-size: var(--fs-2xs); }
#secondary .boxLive .teamInfos img { width: 30px !important; height: 30px !important; }
#secondary .boxLive .numbers { font-size: var(--fs-xl); }

/* Estes botões trazem uma imagem ao lado do rótulo. Em três colunas numa
   barra lateral de 330 px sobram cerca de 40 px para o texto, e "ELITE CUP
   MASC." partia uma letra por linha. Com dois ou mais botões no grupo a
   imagem passa para cima do rótulo; com um só, mantém-se ao lado. */
#secondary .wp-block-buttons.is-nowrap { flex-wrap: wrap; }
#secondary .wp-block-button {
  flex: 1 1 92px;
  min-width: 0;
}
#secondary .wp-block-button__link {
  font-size: var(--fs-2xs);
  line-height: 1.25;
  padding: 9px var(--sp-2);
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
#secondary .wp-block-buttons:has(.wp-block-button:nth-child(2)) .wp-block-button__link {
  flex-direction: column;
  gap: 5px;
}
#secondary .wp-block-buttons:has(.wp-block-button:nth-child(2)) .wp-block-button__link img {
  max-width: 100%;
  max-height: 54px;
  width: auto;
  height: auto;
}
/* Um botão sozinho ocupa a largura toda e mantém a imagem ao lado */
#secondary .wp-block-buttons > .wp-block-button:only-child { flex-basis: 100%; }
#secondary .wp-block-buttons > .wp-block-button:only-child .wp-block-button__link img { max-height: 60px; width: auto; }

/* --- Confrontos anteriores (ficha de jogo) ------------------------------- */
/* Sem margem própria: o painel do Resumo é uma grelha e o intervalo é o dela.
   Com a margem, o espaço antes deste bloco era o dobro dos outros. */
.gameLastGames > .title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  color: var(--text);
}
.last3Games {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
}
.last3Games .boxGame3 {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface);
  text-align: center;
  transition: background var(--transition);
}
.last3Games .boxGame3:hover { background: var(--surface-2); }
.last3Games .statusGame {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.last3Games .infosGame {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  flex-wrap: wrap;
}
.last3Games .infosGame img { width: 22px; height: 22px; object-fit: contain; }

/* --- Botão de legenda dos gráficos (ficha de jogo) ----------------------- */
.form.form-control,
button.form-control,
input[type="button"].form-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px var(--sp-3);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.form.form-control:hover,
button.form-control:hover { border-color: var(--brand); color: var(--link); }

/* ==========================================================================
   23. SELECT PERSONALIZADO
   O all.min.js percorre os .custom-select, esconde o <select> nativo e
   constrói a sua própria lista (.select-selected + .select-items). Sem as
   regras do widget o <select>, o valor e a lista inteira apareciam os três
   ao mesmo tempo — num filtro de competições com 537 opções isso dava uma
   coluna de 12 000 px. O tema anterior tinha 12 regras para isto.
   ========================================================================== */
.custom-select { position: relative; }

/* Assim que o script constrói o substituto, o nativo sai de cena */
.custom-select:has(.select-selected) > select,
.custom-select:has(.select-selected) > label { display: none; }

.select-selected {
  flex: 1;
  min-width: 0;
  padding: 10px var(--sp-5) 10px 0;
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
/* Seta, desenhada em CSS para não depender de ícones */
.select-selected::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  margin-top: -2px;
  border: 4px solid transparent;
  border-top-color: var(--text-faint);
}
.select-selected.select-arrow-active::after {
  border-top-color: transparent;
  border-bottom-color: var(--brand);
  margin-top: -6px;
}

.select-items {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  scrollbar-width: thin;
}
.select-items div {
  padding: 9px var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transition), color var(--transition);
}
.select-items div:hover { background: var(--surface-2); color: var(--text); }
.select-items div.same-as-selected { background: var(--surface-3); color: var(--text); font-weight: 600; }

/* A classe que o script alterna para abrir e fechar */
.select-hide { display: none; }

/* Pesquisa nas listas compridas (app.js): fica no topo enquanto a lista rola */
.select-pesquisa {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  padding: var(--sp-2);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.select-pesquisa input {
  width: 100%;
  padding: 7px var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  /* 16 px: abaixo disso o Safari do iPhone faz zoom à página ao focar */
  font-size: var(--fs-md);
  outline: none;
  appearance: none;
}
.select-pesquisa input:focus { border-color: var(--brand); }
.select-pesquisa input::placeholder { color: var(--text-faint); }
.select-items > div[hidden] { display: none; }
.select-items div.select-ativo { background: var(--surface-2); color: var(--text); }
.select-vazio {
  margin: 0;
  padding: var(--sp-4) var(--sp-3);
  color: var(--text-faint);
  font-size: var(--fs-sm);
  text-align: center;
}

/* O contentor não deve cortar a lista flutuante */
.field.custom-select { overflow: visible; }
.epocaSelect { position: relative; z-index: 20; }

/* --- Jogos do dia na barra lateral: cabe nos 330 px ---------------------- */
#secondary .old-table,
#secondary .table-responsive { max-width: 100%; overflow-x: auto; }
#secondary .old-table table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
#secondary .old-table table td {
  padding: 4px 3px;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: var(--fs-2xs);
}
/* hora | casa | resultado | fora  (a coluna da competição está escondida) */
#secondary .old-table table td:nth-child(1) { width: 34px; }
#secondary .old-table table td:nth-child(2),
#secondary .old-table table td:nth-child(4) { width: auto; }
#secondary .old-table table td:nth-child(3) { width: 42px; }
#secondary .old-table table img { width: 18px !important; height: 18px !important; }

/* ==========================================================================
   24. CORRECÇÕES VISTAS EM PRODUÇÃO
   ========================================================================== */

/* Os painéis do menu abrem em left:0 do <li>; nos últimos itens isso punha
   560 a 760 px fora do ecrã. Esses abrem alinhados à direita. */
.main-nav > ul > li:nth-last-child(-n+3) > .mega {
  left: auto;
  right: 0;
}
.mega { max-width: calc(100vw - var(--sp-8)); }

/* Os painéis de três colunas (780 px) não cabem a partir do left:0 do <li> que
   está a meio da barra: esses abrem centrados sobre o item. Nos últimos três a
   regra acima já os encosta à direita, e aí o centramento sai do transform. */
.mega.mega-cols-3 {
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
}
.main-nav li:hover > .mega.mega-cols-3,
.main-nav li:focus-within > .mega.mega-cols-3 {
  transform: translateX(-50%) translateY(0);
}
.main-nav > ul > li:nth-last-child(-n+3) > .mega.mega-cols-3 { transform: translateY(-6px); }
.main-nav > ul > li:nth-last-child(-n+3):hover > .mega.mega-cols-3,
.main-nav > ul > li:nth-last-child(-n+3):focus-within > .mega.mega-cols-3 { transform: translateY(0); }

/* O rookie_entry_date() imprime duas <time> quando o artigo foi editado
   depois de publicado — a data saía repetida. Fica a de publicação. */
.entry-details time.updated:not(.published) { display: none; }
.entry-details time { font-variant-numeric: tabular-nums; }
.entry-details a { color: var(--text-muted); }
.entry-details a:hover { color: var(--link); }

/* O rookie-plus injecta CSS inline (".site-header, .site-content, .site-footer,
   .site-info { width: 1000px }" acima de 1025px). O layout novo é fluido: a
   barra fixa ficava a 1000 px e deixava ver a página por baixo, à direita. */
.site-header.header,
.site-footer.footer {
  width: 100%;
  max-width: none;
}

/* Os painéis são dimensionados por .mega-cols-N; nos ecrãs onde não cabem,
   encolhem antes de sair do viewport. */
@media (max-width: 1100px) {
  .mega.mega-cols-3 { width: min(780px, calc(100vw - var(--sp-8))); }
}

/* ==========================================================================
   25. RESUMOS DA JORNADA (rodapé)
   O bloco vem do footer.php com o markup do tema antigo (.listVideos,
   .bodyVideo, .imageVideo) e não tinha regra nenhuma: as miniaturas saíam à
   largura toda com 50 px de altura e os marcadores da lista à vista.
   ========================================================================== */
section.hoquei {
  padding-block: var(--sp-8);
  border-top: 1px solid var(--border);
}
.hoquei .section-head .hoquei-image { display: none; }

.boxVideosHoquei h3 {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.boxVideosHoquei h3 span { color: var(--link); }

.videosHoquei .listVideos, .boxTv .listVideos {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-5);
}
.videosHoquei .listVideos > li, .boxTv .listVideos > li { min-width: 0; }

.videosHoquei .bodyVideo, .boxTv .bodyVideo { display: block; }
.videosHoquei .imageVideo, .boxTv .imageVideo {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.videosHoquei .playIcon, .boxTv .playIcon {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
}
/* Nestas regras a primeira metade de cada lista perdia o fim do seletor
   (".videosHoquei .bodyVideo," sem o ":hover .playIcon img"): no rodapé os
   cartões ficavam sempre a 108% e a 85% de opacidade, sobrepostos, e o play
   num quadrado de 44 px no canto em vez de centrado. */
.videosHoquei .playIcon img, .boxTv .playIcon img {
  width: 44px; height: 44px;
  transition: transform var(--transition), opacity var(--transition);
}
.videosHoquei .bodyVideo:hover .playIcon img, .boxTv .bodyVideo:hover .playIcon img { transform: scale(1.08); opacity: .85; }
/* A imagem de fundo é a miniatura do vídeo: o degradê põe-lhe contraste por
   baixo do botão sem a escurecer toda. */
.videosHoquei .overlayColor-video, .boxTv .overlayColor-video {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(7, 15, 26, .75), rgba(7, 15, 26, .1) 60%);
}

.videosHoquei .infosVideo, .boxTv .infosVideo { padding-top: var(--sp-2); display: grid; gap: 3px; }
.videosHoquei .leagueInfos, .boxTv .leagueInfos {
  font-size: var(--fs-2xs);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.videosHoquei .teamsInfos, .boxTv .teamsInfos {
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--text);
}
.videosHoquei .result, .boxTv .result {
  justify-self: start;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); font-weight: 700;
  background: var(--surface-3);
  color: var(--text);
  padding: 1px 7px;
  border-radius: var(--r-sm);
}
.videosHoquei .bodyVideo:hover .teamsInfos, .boxTv .bodyVideo:hover .teamsInfos { color: var(--link); }

/* ==========================================================================
   26. FICHA DE JOGO: AS SECÇÕES DA PROPOSTA
   Depois de desmontar a aba única, cada bloco é uma secção com cabeçalho. O
   que se segue é o que faltava a cada uma.
   ========================================================================== */

/* --- Crónica ------------------------------------------------------------- */
/* A imagem é um background numa div: sem proporção não tinha altura nenhuma. */
.gameChronicle .headerTab .image {
  position: relative;
  aspect-ratio: 21 / 9;
}
.gameChronicle .headerTab .overlay-hero {
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 70%, transparent), transparent 60%);
}
.chronicleTitle {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xl);
  text-transform: none;
  letter-spacing: 0;
}
.pageDescription { color: var(--text); }

/* --- Lance a lance ------------------------------------------------------- */
.gameTimeline .MinutoAoMinuto { padding: var(--sp-2) 0; }
.gameTimeline .MinutoAoMinuto > p { padding: var(--sp-4); margin: 0; color: var(--text-faint); }

/* --- TV e rádio ---------------------------------------------------------- */
.gameMedia .listBoxTv { display: grid; gap: var(--sp-6); }
.gameMedia .boxTv > .title {
  font-family: var(--font-display);
  font-size: var(--fs-md); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  margin-bottom: var(--sp-3);
}
.listLinksTv { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.listLinksTv a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  transition: background var(--transition), color var(--transition);
}
.listLinksTv a:hover { background: var(--surface-2); color: var(--link); }

/* --- Ligações no fim ----------------------------------------------------- */
.gameLinks {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
}

/* --- Coluna lateral da equipa -------------------------------------------- */
/* Como na proposta: as secções à esquerda e, à direita, o próximo jogo, a
   classificação e as informações — e, no fim dessa coluna, os widgets, onde a
   proposta tinha o espaço de publicidade. */
.teamGrid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) {
  .teamGrid { grid-template-columns: minmax(0, 1fr) 340px; }
}
.teamMain, .teamAside { min-width: 0; }
/* O #secondary traz o seu próprio empilhamento; dentro da coluna é só mais um
   bloco da pilha. */
.teamAside > #secondary { display: contents; }

/* --- Coluna lateral da competição ---------------------------------------- */
/* Como na proposta: as secções à esquerda, o contexto da prova à direita. */
.leagueGrid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) {
  .leagueGrid { grid-template-columns: minmax(0, 1fr) 340px; }
}
.leagueMain, .leagueAside { min-width: 0; }

/* --- Separadores e coluna lateral da ficha de jogo ----------------------- */
/* Como na proposta: Resumo, Ficha de equipa e Lance a lance em separadores, e
   ao lado uma coluna que não muda com eles — arbitragem, classificação e os
   outros jogos da jornada. Abaixo dos 1024 px a coluna desce para o fim. */
.matchTabs { margin-top: var(--sp-5); }
/* A ficha de equipa e o lance a lance escondem-se quando não têm nada (um
   jogo por começar, uma eliminatória ainda sem equipas). Se sobra só o
   Resumo, a barra não tem nada para escolher e sai também. É CSS e não PHP
   para que volte sozinha quando o primeiro lance chegar pelo live. */
.matchTabs .tabs:not(:has(> .tab:not([hidden]) ~ .tab:not([hidden]))) { display: none; }
.matchGrid {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
  padding-top: var(--sp-5);
}
@media (min-width: 1024px) {
  .matchGrid { grid-template-columns: minmax(0, 1fr) 340px; }
}
.matchPanels { min-width: 0; display: grid; gap: var(--sp-5); }
.matchPanels > [role="tabpanel"] { display: grid; gap: var(--sp-5); min-width: 0; }
/* Um display explícito anula o atributo hidden que o app.js põe nos painéis
   que não estão à vista, e apareciam os três de uma vez. */
.matchPanels > [role="tabpanel"][hidden] { display: none; }
.matchAside { min-width: 0; }

/* --- Classificação na ficha de jogo -------------------------------------- */
/* A tabela vem inteira do renderClassificationTable(), com as dezoito colunas
   da página da competição. Aqui serve só para situar as equipas na prova, por
   isso fica com as quatro da proposta — posição, equipa, pontos e jogos — e o
   resto vê-se em "Ver competição". */
.gameStandings table th:nth-child(n+6),
.gameStandings table td:nth-child(n+6) { display: none; }
.gameStandings .sp-table-wrapper,
.gameStandings .tableResponsive { overflow-x: visible; }
.gameStandings .moreInfosFooter,
.gameStandings .tableFooterText { display: none; }

/* ==========================================================================
   27. LEIA TAMBÉM (fim do artigo)
   As notícias relacionadas do content-single.php, nos cartões .news-tile da
   proposta: três por linha, duas no tablet. No telemóvel seriam seis imagens
   16:9 empilhadas, mais de um ecrã e meio, por isso aí cada cartão é uma
   linha com a imagem pequena ao lado, como os .news-card.
   ========================================================================== */
.othersNews {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.othersTitle {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 var(--sp-5);
}
.othersNews .news-tile .eyebrow { margin-bottom: var(--sp-1); }
@media (max-width: 599px) {
  .othersNews .news-tile { grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
  .othersNews .news-tile .thumb { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   28. CLASSIFICAÇÃO EM ECRÃS ESTREITOS
   A tabela tem dezoito colunas e 848px; num telemóvel há 341. Empilhar cada
   equipa num cartão daria catorze cartões de dezoito linhas, pior do que o
   problema. Mantém-se a tabela a deslizar e fixa-se a equipa à esquerda, para
   se saber sempre de quem é a linha que se está a ler.
   Escondem-se as colunas derivadas (médias, quociente, percentagem de pontos),
   que se tiram das outras, e a seta de variação, que é decoração e rouba
   largura ao nome.
   Os selectores vão por posição e não pelas classes data-<chave>: esta tabela
   também chega por AJAX da app de directos, cujo HTML não as traz.
   ========================================================================== */
@media (max-width: 767px) {
  /* Com border-collapse: collapse o position: sticky das células não pega.
     O compat.css carrega depois do hp.css e tem table.sp-data-table com o
     mesmo peso, por isso é preciso a classe a mais para desempatar. */
  table.tableStandings,
  table.tableStandings.sp-data-table {
    border-collapse: separate;
    border-spacing: 0;
    /* A tabela traz overflow: hidden para arredondar os cantos, e um
       ascendente com overflow anula o sticky das células. A moldura e o
       arredondamento ficam no .sp-table-wrapper, que já os tem. */
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  table.tableStandings tbody td { border-bottom: 1px solid var(--border); }

  /* MÉD.GM, MÉD.GS, QUOC, % PTS, MÉD.PTS */
  table.tableStandings tr > :nth-child(n+12):nth-child(-n+16) { display: none; }
  /* variação de posição */
  table.tableStandings tr > :nth-child(2) { display: none; }

  table.tableStandings tr > :nth-child(1),
  table.tableStandings tr > :nth-child(3) {
    position: sticky;
    z-index: 2;
    background: var(--surface);
  }
  /* A largura tem de ser imposta: sem min-width o algoritmo da tabela encolhe
     a coluna e o deslocamento da seguinte deixa de bater certo. */
  table.tableStandings tr > :nth-child(1) {
    left: 0;
    width: 34px;
    min-width: 34px;
  }
  table.tableStandings tr > :nth-child(3) {
    left: 34px;
    box-shadow: 1px 0 0 var(--border);
  }
  table.tableStandings thead tr > :nth-child(1),
  table.tableStandings thead tr > :nth-child(3) { background: var(--surface-2); }
  table.tableStandings tbody tr.itemTeam:hover > :nth-child(1),
  table.tableStandings tbody tr.itemTeam:hover > :nth-child(3) { background: var(--surface-2); }

  .tableStandings .teamStanding {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   29. NOMEAÇÕES DE ÁRBITROS EM ECRÃS ESTREITOS
   As quatro colunas davam 200px dos 341 à arbitragem e espremiam o jogo em
   72px — duas equipas e o resultado nesse espaço. Em telemóvel cada jogo passa
   a cartão: hora e jornada em cima, as equipas a seguir, a equipa de
   arbitragem por baixo.
   ========================================================================== */
.refereesGame { min-width: 200px; text-align: right; }

/* O cabeçalho herda o aspecto de table.sp-data-table thead th (compat.css);
   só a última coluna precisa de acompanhar o alinhamento do seu conteúdo. */
.refereesTable thead th:last-child { text-align: right; }

@media (max-width: 767px) {
  .refereesTable,
  .refereesTable thead,
  .refereesTable tbody,
  .refereesTable tr { display: block; width: 100%; }

  /* Sem colunas não há o que rotular; a hora e as equipas dizem-se sozinhas. */
  .refereesTable thead { display: none; }

  .refereesTable tr[data-live-event] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
  }
  .refereesTable tr[data-live-event] > td {
    border: 0;
    padding: 0;
    min-width: 0;
  }
  .refereesTable tr[data-live-event] > td:nth-child(2) {
    justify-self: end;
    color: var(--text-faint);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .refereesTable .teamsGame,
  .refereesTable .refereesGame { grid-column: 1 / -1; }
  .refereesTable .refereesGame {
    min-width: 0;
    text-align: left;
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: var(--fs-sm);
  }
  .refereesTable .dateSeparatorTableEventList td,
  .refereesTable .competitionName td { display: block; }
}

/* ==========================================================================
   30. ESTADOS VAZIOS E CARTÕES DE JOGO EM DIRECTO
   O .emptyState substitui as mensagens que saíam como texto solto no meio da
   página. As restantes regras recolhem os estilos em linha que o
   event-blocks.php trazia do tema antigo — onde um <span> ficava por fechar
   quando o jogo não tinha transmissão.
   ========================================================================== */
.emptyState {
  margin: 0;
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

/* var(--text) e não #fff: o cabeçalho do cartão é a --surface-2, quase branca
   no tema claro, e o nome da prova desaparecia (1,05:1). */
.boxLive .leagueLink { color: var(--text); }
.boxLive .liveTvLink {
  display: block;
  text-align: center;
  margin-bottom: var(--sp-5);
}
.boxLive .liveStatusNote {
  display: block;
  padding-top: var(--sp-5);
  color: var(--live);
  font-size: var(--fs-md);
  font-weight: 700;
}

/* ==========================================================================
   31. SOMBRA DE DESLIZE NAS BARRAS DE SEPARADORES
   As duas barras (.listTabs e a do jQuery UI) escondem a barra de deslocação
   de propósito. Na página de competição são onze separadores e 328px ficam
   fora do ecrã sem nada a dizê-lo — parecem ser só os três que se vêem.
   A sombra aparece do lado onde há conteúdo por ver e desaparece sozinha
   quando tudo cabe: as camadas com background-attachment: local acompanham o
   conteúdo e tapam as que ficam fixas.
   ========================================================================== */
.listTabs > ul,
.ui-tabs .ui-tabs-nav {
  background-image:
    linear-gradient(to right, var(--bg) 60%, transparent),
    linear-gradient(to left,  var(--bg) 60%, transparent),
    linear-gradient(to right, rgba(0, 0, 0, .22), transparent),
    linear-gradient(to left,  rgba(0, 0, 0, .22), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ==========================================================================
   32. ESTATÍSTICAS DO JOGADOR
   Cada competição traz uma tabela de sessenta colunas: a época, a equipa e
   cinquenta e tal estatísticas cujo cabeçalho é um ícone com o nome no
   title. Os ícones são de 32px, mas o max-width: 100% herdado somado à
   coluna de 23px e ao seu preenchimento deixava-os a 7px — manchas sem
   leitura possível.
   Sessenta colunas não cabem em ecrã nenhum e a tabela desliza, o que está
   certo; o que faltava era que ao deslizar se continuasse a saber de que
   época é a linha.
   ========================================================================== */
/* O .entry-content table do compat.css dá display: block e overflow-x: auto a
   todas as tabelas do conteúdo — serve as que vêm do editor, mas esta já está
   dentro de um .sp-table-wrapper que desliza, e um bloco com overflow anula o
   sticky das células. Passa a deslizar o invólucro, e para isso a tabela tem
   de poder crescer para além dos 100% que lhe são impostos: senão as colunas
   saem-lhe da caixa e ficam sem ninguém que as vá buscar. */
.entry-content .sp-table-wrapper > table.sp-player-statistics,
table.sp-player-statistics {
  display: table;
  overflow: visible;
  width: max-content;
  min-width: 100%;
  max-width: none;
}
table.sp-player-statistics thead th,
table.sp-player-statistics tbody td { min-width: 34px; }

table.sp-player-statistics thead th img {
  width: 20px;
  height: 20px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  margin: 0;
}

/* A época identifica a linha; a equipa já vem repetida na mesma coluna. */
table.sp-player-statistics thead th:first-child,
table.sp-player-statistics tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 86px;
  min-width: 86px;
  text-align: left;
  box-shadow: 1px 0 0 var(--border);
}
table.sp-player-statistics thead th:first-child { background: var(--surface-2); }
table.sp-player-statistics tbody td:first-child { background: var(--surface); }

/* ==========================================================================
   33. PESQUISA
   O search.php deste tema serve os resultados pelo mesmo content.php dos
   arquivos, por isso os cartões já vêm feitos; falta só destacar o termo
   procurado no título e dar ao formulário de nova tentativa o aspecto dos
   outros campos.
   ========================================================================== */
.searchTerm { color: var(--link); }

.search-results .listing-news,
.search-no-results .emptyState,
.error404 .emptyState { margin-top: var(--sp-4); }

:is(.search-no-results, .error404) .search-form {
  display: flex;
  gap: var(--sp-2);
  max-width: 420px;
  margin: 0 auto var(--sp-8);
}
:is(.search-no-results, .error404) .search-form label { flex: 1 1 auto; min-width: 0; }
:is(.search-no-results, .error404) .search-form .search-field {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-sm);
}
:is(.search-no-results, .error404) .search-form .search-field:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
:is(.search-no-results, .error404) .search-form .search-submit {
  flex: 0 0 auto;
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand);
  color: var(--brand-ink);
  border: 0;
  border-radius: var(--r-md);
  font-weight: 600;
  cursor: pointer;
}
:is(.search-no-results, .error404) .search-form .search-submit:hover { background: var(--brand-hover); }

/* A página 404 (404.php) usa o mesmo título, texto e formulário da pesquisa
   sem resultados, mais a volta à página inicial. */
.error-404-home { margin: 0 0 var(--sp-8); text-align: center; }

/* ==========================================================================
   34. TABELAS LARGAS: COLUNA DE IDENTIDADE FIXA
   Os quadros da página de liga vão dos 450 aos 1450 px dentro de uma coluna
   de 323 px no telemóvel. Deslizavam inteiros: duas passadas para a direita
   e ficava uma grelha de números sem se saber de que equipa era cada linha.
   O que identifica a linha passa a ficar colado à esquerda.
   ========================================================================== */

/* A moldura e o arredondamento estão na tabela, e com eles vem o overflow:
   hidden que anula o sticky das células. Passam para o invólucro — que é o
   que desliza — e a tabela fica sem moldura própria. */
.table-responsive.colunaFixa {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.table-responsive.colunaFixa > .old-table > table {
  border: 0;
  border-radius: 0;
  overflow: visible;
  border-collapse: separate;
  border-spacing: 0;
}

@media (max-width: 767px) {
  /* Só o nome fica. O escudo ao lado traz alt="" e repete o que o nome já
     diz; a posição é a ordem das linhas. As duas colunas encolhem a zero,
     e é isso que põe o nome no zero da esquerda, onde o sticky o segura.
     Não podem levar display: none: uma célula assim sai da grelha, as
     seguintes sobem uma coluna e os valores iam parar debaixo do cabeçalho
     de outra estatística, porque os cabeçalhos ficavam onde estavam. */
  .table-responsive.colunaFixa .colEscudo,
  .table-responsive.colunaFixa .colPos {
    width: 0;
    min-width: 0;
    max-width: 0;
    padding: 0;
    border-left: 0;
    border-right: 0;
    overflow: hidden;
    font-size: 0;
  }
  .table-responsive.colunaFixa .colEscudo img { display: none; }

  .table-responsive.colunaFixa .colIdent,
  .table-responsive.colunaFixa .nome-team {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    max-width: 112px;
    box-shadow: 1px 0 0 var(--border);
  }
  .table-responsive.colunaFixa tbody .nome-team {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Os títulos por cima do nome ("Bolas paradas a favor") são mais compridos
     do que a coluna: sem partir, alargavam-na para lá dos 112 px. */
  .table-responsive.colunaFixa thead .colIdent,
  .table-responsive.colunaFixa thead .nome-team {
    background: var(--surface-2);
    z-index: 3;
    white-space: normal;
  }
  .table-responsive.colunaFixa tbody tr:hover > .nome-team { background: var(--surface-2); }
}

/* --- Sinal de que a tabela desliza --------------------------------------
   Mesmo onde não há coluna fixa, nada dizia que havia mais tabela para o
   lado. As duas primeiras camadas são do fundo e deslizam com o conteúdo,
   tapando a sombra quando se chega ao fim; as duas de baixo ficam quietas.
   Isto pinta o fundo do invólucro, por baixo da tabela: a cor de cartão
   passa da tabela para o invólucro, senão a tabela tapava as sombras. O
   arredondamento acompanha, para o fundo não sair pelos cantos dela.
   ------------------------------------------------------------------------ */
.table-responsive {
  border-radius: var(--r-lg);
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, var(--surface) 60%, transparent),
    linear-gradient(to left,  var(--surface) 60%, transparent),
    linear-gradient(to right, rgba(0, 0, 0, .18), transparent),
    linear-gradient(to left,  rgba(0, 0, 0, .18), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.table-responsive > .old-table > table { background: transparent; }

/* ==========================================================================
   35. ÁREA DE TOQUE DOS LINKS PEQUENOS
   No telemóvel estes links tinham 13–22 px de altura, abaixo dos 24×24 px do
   WCAG 2.2. O padding vertical alarga a zona que responde ao dedo. Nos links
   em linha não mexe na altura da linha; nos outros, a margem negativa devolve
   o espaço que o padding acrescenta. O desenho fica igual.
   ========================================================================== */
.section-head .link-more,
.card-head .link-more { min-width: 24px; justify-content: center; padding-block: 4px; margin-block: -4px; }
.news-item .button-news { padding-block: 2px; margin-block: -2px; }
tr.competitionName .leagueName a { padding-block: 2px; margin-block: -2px; }
.footer-grid a,
.entry-details a,
.sp-player-details dd a,
.gameBoxLive .nameLeague a,
.boxLive .leagueLink { padding-block: 4px; margin-block: -4px; }
/* O ícone da transmissão media 29×13 px */
.boxLive .liveTvLink a { display: inline-block; padding: 6px; margin: -6px; }

/* ==========================================================================
   36. BLOCOS DE ESTATÍSTICA
   «Melhores marcadores» e «Como chegam» (templates/marcadores.php e
   como-chegam.php). Os componentes são os da proposta; aqui fica só o que o
   tema acrescenta. O nome do jogador é uma ligação para a ficha dele, e para
   cortar com reticências tem de ser um bloco, dentro de um invólucro que possa
   encolher no flex.
   ========================================================================== */
.scorer-row .who > span { min-width: 0; }
.scorer-row .who .name { display: block; color: var(--text); }
.scorer-row .who .name:hover { color: var(--link); }
.scorer-row .who .club { display: block; }
/* O nome da prova não cabe ao lado do título numa coluna de 330px: os dois
   partiam-se em duas linhas. Passa para uma linha dele, por baixo. */
.topScorers .card-head { flex-wrap: wrap; row-gap: 2px; }
.topScorers .card-head > .small { flex: 1 0 100%; }
.gameForm .goal-cols { border-top: 1px solid var(--border); }
/* O «V» branco sobre o verde das vitórias ficava a 3,3:1 no escuro e a 4,3:1
   no claro, em letra de 11px. No escuro passa à tinta da marca (4,8:1); no
   claro nenhuma das duas chega lá sobre aquele verde, e o fundo passa ao verde
   de texto do tema claro, com a letra branca (5,4:1). */
.form-row.form-lg .form-dot.w { color: var(--brand-ink); }
:root[data-theme="light"] .form-row.form-lg .form-dot.w { background: var(--link); color: #fff; }

/* ==========================================================================
   37. DESTAQUES DA CAPA
   Três notícias, como na proposta, que o app.js faz passar pelo lugar
   principal. A troca é um esbatido: uma cópia da arrumação anterior fica por
   cima e desaparece. O palco guarda a altura da arrumação mais alta, para a
   página não saltar a cada troca.
   ========================================================================== */
.hero-palco { position: relative; }
.hero-palco > .hero-copia { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }

/* Entre 600 e 899px a grelha tem duas colunas para três cartões e o último
   ficava sozinho. O principal passa a ocupar a linha toda, os outros dois
   ficam lado a lado por baixo. */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-grid > :not(.compact) { grid-column: 1 / -1; min-height: 300px; }
}

.hero-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.hero-foot .hero-todas { margin-left: auto; }
.hero-controlos { display: flex; align-items: center; gap: var(--sp-1); }
.hero-controlos:empty { display: none; }

.hero-pausa {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-right: var(--sp-1);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.hero-pausa:hover { border-color: var(--brand); }
.hero-pausa svg { width: 14px; height: 14px; }

/* Um traço por notícia. O da que está em destaque é o dobro do comprimento
   e enche-se com o tempo que falta para a troca: parado pelo rato ou fora do
   ecrã fica onde estava, com a pausa fica cheio. O comprimento é que o
   distingue, porque no início de cada notícia ainda não tem verde nenhum.
   Cinzento e verde são os de texto: os traços são controlos e precisam de
   3:1 (WCAG 1.4.11). O verde da marca ficava a 2,9:1 no tema claro. */
.hero-ponto {
  position: relative;
  width: 32px; height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero-ponto::before,
.hero-ponto::after {
  content: "";
  position: absolute; left: 9px; right: 9px; top: 50%;
  height: 4px; margin-top: -2px;
  border-radius: 2px;
  transition: left 300ms ease, right 300ms ease;
}
.hero-ponto::before { background: var(--text-faint); }
.hero-ponto:hover::before { background: var(--text-muted); }
.hero-ponto::after { background: var(--link); transform: scaleX(0); transform-origin: left center; }
.hero-ponto[aria-current="true"]::before,
.hero-ponto[aria-current="true"]::after { left: 2px; right: 2px; }
.hero-ponto[aria-current="true"]::after {
  animation: hero-progresso var(--hero-tempo, 7s) linear forwards paused;
}
.hero-controlos.a-correr .hero-ponto[aria-current="true"]::after { animation-play-state: running; }
.hero-controlos.em-pausa .hero-ponto[aria-current="true"]::after { animation: none; transform: none; }
@keyframes hero-progresso { to { transform: scaleX(1); } }

/* ==========================================================================
   38. LISTAGENS DE NOTÍCIAS (/blog/ e categorias)
   Na primeira página: três em destaque, com os cartões da capa mas parados,
   quatro numa grelha e o resto em lista, para não ser uma lista só de
   princípio a fim (templates/noticias-topo.php). As páginas seguintes ficam
   só com a lista.
   ========================================================================== */
.noticias-pagina { margin: calc(-1 * var(--sp-2)) 0 var(--sp-5); }
/* Por baixo do título da página, os das secções descem um tamanho */
.noticias-grelha .section-head h2,
.listing-news > .section-head h2 { font-size: var(--fs-xl); }
.listing-news > .section-head { margin-bottom: var(--sp-1); }

/* Quatro mosaicos: dois por linha até aos 899px, quatro numa linha daí para
   cima. No telemóvel cada coluna tem uns 165px: o título desce um tamanho e
   corta à quarta linha, para os quatro ficarem alinhados. */
.news-grid.grelha-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); }
.grelha-4 .news-tile { gap: var(--sp-2); align-content: start; }
.grelha-4 .news-tile .eyebrow { margin-bottom: 2px; }
.grelha-4 .news-tile h3 {
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.grelha-4 .news-tile .meta { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-faint); }
@media (min-width: 600px) {
  .grelha-4 .news-tile h3 { font-size: var(--fs-md); }
}
@media (min-width: 900px) {
  .news-grid.grelha-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   39. WIDGETS DO TEMA (inc/widgets.php)
   Os cartões da proposta que os editores põem nas áreas de widgets: a
   classificação, os marcadores (o .topScorers da secção 36), os atalhos, as
   competições por cima do rodapé e as colunas de ligações do rodapé.
   ========================================================================== */

/* Classificação: a tabela .standings à medida da coluna lateral. A tabela é de
   colunas fixas, com as larguras no cabeçalho, para o nome da equipa cortar
   com reticências em vez de alargar a tabela. */
.standings.standings-mini { min-width: 0; table-layout: fixed; }
.standings-mini thead th { position: static; }
.standings-mini th.col-pos { width: 40px; }
.standings-mini th:nth-child(3),
.standings-mini th:nth-child(4) { width: 40px; }
.standings-mini .col-team,
.standings-mini .team-cell { min-width: 0; }
.standings-mini .team-cell a { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standings-mini .team-cell a:hover { color: var(--link); }
.standings-mini abbr { text-decoration: none; }
.standings-mini tbody tr:last-child td { border-bottom: 0; }
/* A cor das zonas vem dos apuramentos de cada prova */
.standings tr.tem-zona .col-pos::before { background: var(--zona); }
.standings tr.tem-zona { background: color-mix(in srgb, var(--zona) 8%, transparent); }

/* Atalhos. O vermelho do direto é o de texto sobre fundo escuro; com letra
   branca por cima ficava a 3,5:1 no tema escuro. Escurecido, passa os 4,5:1
   nos dois temas. */
.btn-live { background: color-mix(in srgb, var(--live) 82%, #000); }
.btn-live:hover { background: color-mix(in srgb, var(--live) 70%, #000); }

/* Competições, por cima do rodapé. Os separadores são botões .chip com
   aria-selected, e não ligações com .is-active como na proposta. */
.rodape-competicoes { margin-top: var(--sp-12); }
.rodape-competicoes + .site-footer { margin-top: var(--sp-8); }
.competicoes .chip-row { margin-bottom: var(--sp-4); }
.chip[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.competicoes .comp-grid[hidden] { display: none; }
.comp-tile { color: var(--text); }
.comp-tile .comp-mono { width: 44px; height: 44px; font-size: var(--fs-sm); }

/* Rodapé: as redes sociais por baixo do logótipo; as colunas de ligações são
   os widgets «Coluna de ligações» da área «Rodapé: colunas». */
.footer-grid .social { margin-top: var(--sp-4); }