/* ==========================================================================
   Arquivo do Clube — ESTILOS DE TELA
   ==========================================================================

   O que era 20 blocos <style> dentro de 9 templates PHP — 623 linhas com 55
   seletores declarados mais de uma vez (`.ac-hero` aparecia 12 vezes).

   Aqui cada seletor existe UMA vez, as cores literais viraram tokens e os
   breakpoints escritos de sete jeitos diferentes foram normalizados.

   Depende de ac-tokens.css e ac-componentes.css.
   ========================================================================== */


.ac-card {
  border: 1px solid var(--ac-regua);
  border-radius: 14px;
  padding: 14px;
  background: var(--ac-papel-alto);
  margin-bottom: 16px;
}

.ac-rankitem {
  display: grid;
  grid-template-columns: 42px 44px 1fr 90px 110px 110px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--ac-regua);
}

.ac-rankitem:last-child {
  border-bottom: 0;
}

.ac-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ac-regua);
  background: var(--ac-papel-fundo);
  flex: 0 0 auto;
}

.ac-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ac-name a {
  text-decoration: none;
}

.ac-th {
  font-weight: 700;
  opacity: .8;
}

.ac-filters {
  display: grid;
  grid-template-columns: repeat(3,minmax(160px,1fr));
  gap: 10px;
  margin: 12px 0 16px;
}

.ac-filters label {
  display: block;
  font-size: var(--ac-t-xs);
  opacity: .85;
  margin-bottom: 6px;
}

.ac-filters select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ac-regua);
  background: var(--ac-papel-alto);
}

.ac-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--ac-regua);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: var(--ac-papel-alto);
}

.ac-item:hover {
  border-color: var(--ac-regua);
}

.ac-avatar-ph {
  width: 100%;
  height: 100%;
}

.ac-meta {
  flex: 1 1 auto;
  min-width: 0;
  margin: 10px 0 18px;
  color: var(--ac-regua);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ac-name {
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-sub {
  font-size: var(--ac-t-sm);
  opacity: .85;
  margin-top: 2px;
}

.ac-rank {
  font-weight: 900;
  opacity: .6;
}

.ac-loading {
  opacity: .7;
  font-size: var(--ac-t-sm);
  margin: 10px 0;
}

.ac-hero {
  --ac-hero-size: 130px;
  --ac-uniform-size: 170px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 18px;
}

.ac-hero .ac-escudo img {
  width: var(--ac-hero-size);
  height: var(--ac-hero-size);
  object-fit: contain;
}

.ac-hero-media {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.ac-hero-media img {
  height: 200px;
  width: 200px;
  max-width: 200px !important;
  /* Sem `!important`: a camisa precisa caber INTEIRA na caixa.
     ac-estilo usa `contain` de propósito — a foto do uniforme já vem
     recortada em fundo branco. Com `cover` forçado, manga e barra saíam
     cortadas sempre que a foto não era exatamente 3:4. */
  object-fit: cover;
  border: 2px solid var(--ac-regua);
  border-radius: 14px;
  max-height: 200px !important;
}

.ac-uniforme-link {
  display: inline-block;
}

.ac-uniforme-link img {
  cursor: zoom-in;
}

.ac-pager a {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--ac-regua);
  border-radius: 10px;
  margin-right: 6px;
  text-decoration: none;
}

.ac-slider {
  display: flex;
  gap: 12px;
  overflow: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.ac-slide {
  min-width: 160px;
  scroll-snap-align: start;
}

.ac-slide img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
}

.ac-right img {
  max-width: 180px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ac-slide-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.ac-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
  gap: 10px;
}

.ac-roster-item {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--ac-regua);
  border-radius: 14px;
  padding: 10px;
  text-align: center;
  background: var(--ac-papel-alto);
}

.ac-roster-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.ac-thumb-ph {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--ac-regua);
  margin: 0 auto;
}

.ac-roster-name {
  margin-top: 6px;
  font-weight: 700;
  font-size: var(--ac-t-sm);
  line-height: 1.1;
}

/* .ac-header-row vive em ac-componentes.css — era a segunda das três cópias. */

.ac-roster-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--ac-regua);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: var(--ac-papel-alto);
}

.ac-roster-photo img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.ac-photo-fallback {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ac-t-xs);
  opacity: .7;
  border: 1px dashed var(--ac-regua);
}

.ac-stats-table {
  width: 100%;
  table-layout: fixed;
  font-size: var(--ac-t-sm);
  border: 1px solid var(--ac-regua-forte);
  border-radius: 0px;
}

.ac-stats-table th, .ac-stats-table td {
  border: 1px solid var(--ac-regua-forte);
  text-align: center;
  padding: 5px;
  line-height: 1;
  border-radius: 0px;
}

.ac-stats-table th {
  font-weight: 800;
}

.ac-stats-stack {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.ac-stats-stack > .ac-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.ac-pagination {
  text-align: center;
  margin-top: 12px;
  font-size: var(--ac-t-sm);
}

.ac-pagination .ac-page-link, .ac-pagination a.ac-page-link {
  display: inline-block;
  min-width: 24px;
  padding: 4px 8px;
  margin: 0 2px;
  border-radius: 6px;
  border: 1px solid var(--ac-regua);
  text-decoration: none;
  color: var(--ac-tinta-2);
  background: var(--ac-papel-alto);
}

.ac-pagination .ac-page-link-current {
  background: var(--ac-rubro-vivo);
  border-color: var(--ac-rubro-vivo);
  color: var(--ac-papel-alto);
  font-weight: 600;
}

.ac-pagination a.ac-page-link:hover {
  background: var(--ac-papel-fundo);
}

.ac-filter select {
  padding: 4px 6px;
  font-size: var(--ac-t-sm);
  min-width: 160px;
}

.ac-pagination ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ac-pagination li {
  display: inline-block;
}

.ac-pagination a,.ac-pagination span {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--ac-regua);
  border-radius: 10px;
  text-decoration: none;
}

.ac-single-goleiro form select, .ac-single-goleiro form .ac-select, .ac-single-goleiro form .ac-dropdown {
  padding: 2px 6px !important;
  font-size: var(--ac-t-xs) !important;
  height: auto !important;
}

.ac-hero-stats .ac-stats-panel {
  margin: 0;
}

.ac-stats-panel h2 {
  margin: 0 0 10px 0;
  font-size: var(--ac-t-xl);
}

.ac-hero-stats,.ac-stats-panel,.ac-stats-grid,.ac-stat-col {
  width: 100%;
  box-sizing: border-box;
}

/* Sem `!important`: a grade dos painéis vive em ac-estilo.css, que roda por
   último. Estes dois `!important` eram a única coisa impedindo que a regra de
   QUATRO colunas de ac-front.css (para dois filhos) espremesse cada painel em
   25% da largura — as duas saíram juntas. */
.ac-stats-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.ac-stat-col {
  border: 1px solid var(--ac-regua);
  border-radius: 10px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}

.ac-stat-col h3 {
  margin: 0 0 8px 0;
  padding-bottom: 15px;
  font-size: var(--ac-t-md);
  border-bottom: 1px solid var(--ac-regua);
}

.ac-stat-list li {
  border-bottom: 1px solid var(--ac-regua);
  list-style-type: none;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 26px;
}

.ac-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 999px;
  border: 1px solid var(--ac-regua);
  font-size: var(--ac-t-xs);
  line-height: 1.3;
  background: var(--ac-papel-alto);
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
  color: var(--ac-tinta-2);
  white-space: nowrap;
  opacity: .75;
}

.ac-hero-stats {
  width: 100%;
}

.ac-games-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ac-game-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--ac-regua);
  border-radius: 12px;
  padding: 12px 14px;
}

.ac-game-date {
  font-size: var(--ac-t-sm);
  opacity: .75;
}

.ac-game-title a {
  text-decoration: none;
}

.ac-game-sub {
  font-size: var(--ac-t-sm);
  opacity: .7;
  margin-top: 2px;
}

.ac-game-evts {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.ac-evt {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--ac-regua);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: var(--ac-t-sm);
}

.ac-evt-kuki {
  font-size: var(--ac-t-lg);
  line-height: 1;
}

/* `object-fit` e os dois `max-*` saíram: .ac-player-photo é um <div> flex, não
   uma imagem. `object-fit` num <div> não faz nada, e um `max-width: 200px`
   numa caixa de 48px fixos também não — eram três `!important` decorativos,
   do tipo que faz a próxima pessoa achar que precisa de um quarto. Quem
   recorta é o <img> dentro, logo abaixo. */
.ac-player-photo {
  width: 48px;
  height: 48px;
  border: 1px solid var(--ac-regua-forte);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
}

.ac-game {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 14px;
}

.ac-page-title {
  text-align: center;
  margin: 0 0 14px;
  font-size: var(--ac-t-3xl);
  line-height: 1.1;
}

.ac-scoreboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 12px;
  border: 1px solid var(--ac-regua);
  border-radius: 14px;
}

.ac-side {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ac-shield {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.ac-shield--empty {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--ac-regua);
}

.ac-teamname {
  font-weight: 700;
  font-size: var(--ac-t-3xl);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-result {
  font-weight: 800;
  font-size: var(--ac-t-3xl);
  letter-spacing: .5px;
  white-space: nowrap;
}

.ac-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ac-regua);
  font-size: var(--ac-t-sm);
}

.ac-panel {
  border: 1px solid var(--ac-regua);
  border-radius: 14px;
  padding: 12px;
  background: var(--ac-papel-alto);
}

.ac-game-main {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 24px;
  align-items: start;
}

.ac-game-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ac-lineup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ac-goleiro-line {
  margin: 0 0 10px;
}

.ac-lineup ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ac-lineup li {
  line-height: 1.25;
}

.ac-scoreboard--marcante {
  background: var(--ac-rubro);
  border-color: var(--ac-rubro);
  color: var(--ac-papel-alto);
}

.ac-scoreboard--marcante .ac-teamname, .ac-scoreboard--marcante .ac-teamname a {
  color: var(--ac-papel-alto);
}

.ac-scoreboard--marcante .ac-result--marcante {
  background: transparent;
  color: var(--ac-papel-alto);
  padding: 8px 14px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ac-scoreboard--marcante .ac-result-tag {
  margin-top: 4px;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: var(--ac-t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* color-mix() só existe a partir de 2023. Sem esta linha antes, o navegador
     mais antigo descartava a DECLARAÇÃO INTEIRA e a etiqueta ficava sem fundo,
     com o texto marrom escuro solto sobre o card. */
  background: var(--ac-marcante);
  background: linear-gradient(90deg, var(--ac-marcante), color-mix(in srgb, var(--ac-marcante) 80%, var(--ac-sobre-rubro)), var(--ac-marcante));
  color: var(--ac-marcante-ink);
  box-shadow: 0 0 0 1px var(--ac-regua),0 4px 10px var(--ac-regua);
}

.ac-chip-marcante-titulo {
  font-weight: 600;
}

.ac-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ac-event-row {
  padding: 10px 12px;
  border: 1px solid var(--ac-regua);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ac-event-label {
  width: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-width: 18px;
}

.ac-icon-card {
  width: 16px;
  height: 20px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid var(--ac-regua);
  box-shadow: 0 1px 0 var(--ac-regua);
}

.ac-icon-card--yellow {
  background: var(--ac-amarelo);
}

.ac-icon-card--red {
  background: var(--ac-vermelho);
}

.ac-event-player {
  flex: 1;
  min-width: 0;
}

.ac-event strong {
  font-weight: 700;
}

.ac-trofeu-box {
  border: 1px solid var(--ac-regua);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.ac-trofeu-photo img {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
}

.ac-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 64px;
  border-radius: 14px;
  background: var(--ac-regua);
  color: var(--ac-regua);
  font-size: var(--ac-t-xs);
}

.ac-trofeu-name a {
  font-weight: 700;
  text-decoration: none;
}

.ac-media iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 12px;
}

.ac-videos-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ac-video h3 {
  margin: 0 0 10px;
  font-size: var(--ac-t-md);
}

.ac-h2h-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.ac-h2h-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ac-h2h-item {
  padding: 10px 12px;
  border: 1px solid var(--ac-regua);
  border-radius: 12px;
}

.ac-h2h-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.ac-h2h-score a {
  text-decoration: none;
}

.ac-pagination .page-numbers {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--ac-regua);
  border-radius: 10px;
  margin-right: 6px;
  text-decoration: none;
}

.ac-pagination .current {
  background: var(--ac-regua);
}

.ac-h2h-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.ac-h2h-link {
  font-size: var(--ac-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.ac-h2h-link:hover {
  /* Sem sublinhado nem no hover: `.classe:hover` é 0,2,0 e venceria a regra
     geral do documento. O que marca o hover no site é a cor. */
  color: var(--ac-rubro);
}

.ac-lineup-2cols {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.ac-lineup-col {
  flex: 1;
  min-width: 220px;
}

.ac-player-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ac-player-photo img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
}

.ac-player-meta {
  display: flex;
  flex-direction: column;
}

.ac-player-name {
  font-size: var(--ac-t-sm);
  font-weight: 600;
  line-height: 1.2;
}

.ac-player-pos {
  font-size: var(--ac-t-xs);
  color: var(--ac-regua);
}

.ac-thumb.ac-thumb-empty {
  width: 48px;
  height: 48px;
  background: var(--ac-regua);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ac-t-xs);
  color: var(--ac-tinta-2);
}

.ac-player-photo .ac-thumb-empty {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ac-regua);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ac-t-xs);
  color: var(--ac-tinta-2);
}

.ac-thumb.ac-thumb-empty, .ac-player-photo .ac-thumb-empty {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--ac-t-xs) !important;
  line-height: 1 !important;
  background: var(--ac-regua) !important;
  color: var(--ac-regua) !important;
  box-sizing: border-box !important;
}

.ac-trofeu-photo .ac-thumb.ac-thumb-empty {
  width: 72px !important;
  height: 72px !important;
  border-radius: 14px !important;
  font-size: var(--ac-t-xs) !important;
}

.ac-trofeu-photo {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ac-h2h-tablewrap {
  padding: 10px;
}

.ac-h2h-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--ac-t-sm);
}

.ac-h2h-table th,.ac-h2h-table td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid var(--ac-regua);
}

.ac-h2h-table thead th {
  font-weight: 700;
  color: var(--ac-tinta-2);
  background: var(--ac-papel-fundo);
  border-top: 1px solid var(--ac-regua);
}

.ac-h2h-table thead th:first-child {
  border-top-left-radius: 10px;
}

.ac-h2h-table thead th:last-child {
  border-top-right-radius: 10px;
}

.ac-h2h-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

.ac-h2h-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

.ac-h2h-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.ac-trofeu-photo .ac-thumb-empty {
  width: 72px;
  height: 72px;
  border-radius: 14px;
}

.ac-rank-inline {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ac-papel-fundo);
  border: 1px solid var(--ac-regua);
  font-size: var(--ac-t-xs);
  line-height: 1.2;
  color: var(--ac-tinta-2);
  vertical-align: middle;
}


@media (max-width: 900px) {

  /* .ac-hero não é mais grade — ver a nota no bloco de 760px. */

  .ac-game-main {
    grid-template-columns: 1fr;
  }

  .ac-videos-row {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 860px) {

  .ac-hero {
    --ac-hero-size: 130px;
    --ac-uniform-size: 170px;
    display: grid;
    grid-template-columns: var(--ac-hero-size) 1fr auto;
    gap: 18px;
    align-items: center;
  }

  .ac-hero .ac-right {
    grid-column: 1 / -1;
  }

}


@media (max-width: 760px) {

  .ac-rankitem {
    grid-template-columns: 42px 44px 1fr 80px 90px;
  }

  .col-gs {
    display: none;
  }

  /* REMOVIDA a grade "escudo info / uniforms / stats" do celular.
     Ela descrevia a ficha antiga, com escudo e uniformes dentro do hero. Hoje
     o hero tem dois filhos — .ac-hero-info e .ac-hero-stats — e nenhum deles é
     escudo. O `display:grid !important` derrubava o `display:block` de
     ac-estilo mesmo com a ordem das folhas corrigida, e o
     `.ac-hero > div:nth-child(2)` mandava o painel de estatísticas para
     `grid-area:info`: no celular a lista de dados e o painel inteiro ficavam
     lado a lado numa linha só, e o nome do goleiro voltava a descer uma letra
     por linha — o mesmo defeito da ficha em desktop, escondido num breakpoint.

     O empilhamento no celular é o comportamento natural de `display:block`. */

  /* `grid-area: uniforms` REMOVIDA. A grade que definia essa área saiu junto
     com o resto do bloco acima, e uma área nomeada sem template correspondente
     não é ignorada: o navegador cria uma trilha IMPLÍCITA para ela. Era o que
     transformava o topo da página do clube, no celular, numa grade de duas
     colunas — o escudo esticava a primeira até 300px e a segunda sobrava com
     96px, onde a data de fundação descia uma letra por linha e a página ainda
     rolava 81px para o lado. */
  .ac-hero-media {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    margin: 0;
    margin-bottom: 6px;
  }

  .ac-hero-media img {
    max-height: 110px;
    width: auto;
    max-width: none;
  }

  .ac-hero + .ac-grid2 {
    margin-top: 6px;
  }

  .ac-hero-uniforms, .ac-right {
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
  }

  .ac-hero-stats {
    margin-top: 4px !important;
    padding-top: 0 !important;
  }

  .ac-stats-table th, .ac-stats-table td {
    padding: 5px;
    font-size: var(--ac-t-sm);
  }

  .ac-stats-stack {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 8px;
    display: grid;
    width: 100%;
    box-sizing: border-box;
  }

  .ac-stats-stack > .ac-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
  }

  /* Aqui o gerador emitiu um @media ANINHADO dentro do de 760px e nunca
     fechou o de fora — tudo o que viesse depois no arquivo caía em silêncio
     dentro de "max-width: 760px" e não valeria no desktop. O bloco aninhado
     era cópia de regras que já existem incondicionalmente acima. */
  .ac-stats-stack { grid-template-columns: 1fr; gap: var(--ac-e-3); }
  .ac-grid2 { grid-template-columns: 1fr; }
}


@media (max-width: 560px) {

  .ac-grid {
    grid-template-columns: 1fr;
  }

  .ac-teamname {
    font-size: var(--ac-t-2xl);
  }

  .ac-result {
    font-size: var(--ac-t-3xl);
  }

}

/* ==========================================================================
   LISTAGENS A–Z — recolhidas de includes/listagens.php
   ==========================================================================

   Eram SEIS blocos quase idênticos, embutidos no HTML por
   ac_jogadores_shortcode, ac_estadios_shortcode, ac_competicoes_shortcode,
   ac_adversarios_shortcode, ac_tecnicos_shortcode e ac_goleiros_shortcode.
   A única diferença entre eles era o prefixo da classe (.ac-jog, .ac-est,
   .ac-comp, .ac-adv, .ac-tec, .ac-gol) — o resto era cópia.

   Pior: por estarem dentro do <body>, venciam qualquer folha do <head> por
   posição. O `background:#fff` fixo com `color:inherit` deixava o nome do
   jogador branco sobre branco no tema escuro, e nenhuma correção externa
   alcançava isso.
   ========================================================================== */

.ac-jog, .ac-est, .ac-comp, .ac-adv, .ac-tec, .ac-gol { width: 100%; }

/* --- filtro A–Z --- */
.ac-az-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-e-1);
  margin: var(--ac-e-3) 0 var(--ac-e-4);
}
.ac-az-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--ac-e-2);
  border: 1px solid var(--ac-regua);
  border-radius: var(--ac-raio-sm);
  background: var(--ac-papel-alto);
  color: var(--ac-tinta-2);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--ac-fonte-display);
  font-size: var(--ac-t-sm);
  font-weight: 600;
  line-height: 1;
}
.ac-az-btn:hover { border-color: var(--ac-rubro); color: var(--ac-rubro); }
.ac-az-btn.is-active {
  background: var(--ac-rubro);
  border-color: var(--ac-rubro);
  color: var(--ac-sobre-rubro);
}

/* --- grade de cards --- */
.ac-jog-grid, .ac-est-grid, .ac-comp-grid,
.ac-adv-grid, .ac-tec-grid, .ac-gol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--ac-e-3);
  align-items: stretch;
}

.ac-jog-card, .ac-est-card, .ac-comp-card,
.ac-tec-card, .ac-gol-card {
  display: flex;
  gap: var(--ac-e-3);
  align-items: center;
  padding: var(--ac-e-3);
  border: 1px solid var(--ac-regua);
  border-radius: var(--ac-raio);
  background: var(--ac-papel-alto);
  color: var(--ac-tinta);
  text-decoration: none;
}
.ac-jog-card:hover, .ac-est-card:hover, .ac-comp-card:hover,
.ac-tec-card:hover, .ac-gol-card:hover { border-color: var(--ac-rubro); }

.ac-jog-thumb, .ac-est-thumb, .ac-comp-thumb,
.ac-tec-thumb, .ac-gol-thumb {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ac-papel-fundo);
  border: 1px solid var(--ac-regua);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ac-jog-thumb img, .ac-est-thumb img, .ac-comp-thumb img,
.ac-tec-thumb img, .ac-gol-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.ac-jog-ph, .ac-est-ph, .ac-comp-ph, .ac-tec-ph, .ac-gol-ph {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--ac-papel-fundo), var(--ac-regua));
}

.ac-jog-info a, .ac-est-info a, .ac-comp-info a,
.ac-tec-info a, .ac-gol-info a {
  font-family: var(--ac-fonte-display);
  font-weight: 700;
  text-decoration: none;
  color: var(--ac-tinta);
}
.ac-jog-info a:hover, .ac-est-info a:hover, .ac-comp-info a:hover,
.ac-tec-info a:hover, .ac-gol-info a:hover { color: var(--ac-rubro); }

.ac-jog-sub, .ac-est-sub, .ac-comp-sub, .ac-tec-sub, .ac-gol-sub {
  font-family: var(--ac-fonte-etiq);
  font-size: var(--ac-t-xs);
  letter-spacing: .06em;
  color: var(--ac-tinta-2);
  margin-top: 2px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: var(--ac-e-1);
  flex-wrap: wrap;
}

.ac-flag { font-size: var(--ac-t-sm); line-height: 1; }

/* ==========================================================================
   ACONTECIMENTOS (admin) — recolhido de includes/acontecimentos.php
   ========================================================================== */

.ac-ev-wrap { margin-top: var(--ac-e-3); }
.ac-ev-toolbar { display: flex; gap: var(--ac-e-2); flex-wrap: wrap; margin: var(--ac-e-3) 0; }
.ac-ev-list { margin: 0; padding: 0; list-style: none; }
.ac-ev-row {
  display: grid;
  grid-template-columns: 10rem 1fr 1fr 3.25rem;
  gap: var(--ac-e-2);
  align-items: center;
  padding: var(--ac-e-3);
  border: 1px solid var(--ac-regua);
  border-radius: var(--ac-raio);
  margin-bottom: var(--ac-e-2);
  background: var(--ac-papel-alto);
}
.ac-ev-row select { width: 100%; }
.ac-ev-row .ac-ev-x { width: 3.25rem; height: 2.25rem; }

@media (max-width: 900px) {
  .ac-ev-row { grid-template-columns: 1fr 1fr 3.25rem; }
  .ac-ev-row .ac-col3 { display: none; }
}

/* O filtro A–Z ganha um rótulo com ícone e uma régua que o separa das letras. */
.ac-az-filter { align-items: center; }
.ac-az-rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-e-1);
  font-family: var(--ac-fonte-etiq);
  font-size: var(--ac-t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
  padding-right: var(--ac-e-3);
  margin-right: var(--ac-e-1);
  border-right: 1px solid var(--ac-regua);
  align-self: stretch;
}
.ac-az-btn--todos,
.ac-az-btn--idolos {
  padding-inline: var(--ac-e-3);
  gap: var(--ac-e-1);
}