/* ==========================================================================
   Tema Ultimate — inspirado na UI atual do EA FC (Ultimate Team e
   Carreira): escuro, glass, gradiente verde/roxo, botões em pílula, card
   de jogador em foto de corpo inteiro. Requer base.css carregado antes
   deste arquivo. */
[data-theme="ultimate"] {
  --bg: #0a0e14;
  --nav-bg: rgba(10, 14, 20, 0.85);
  --surface: #161b22;
  --surface-text: #f0f3f7;
  --text: #f0f3f7;
  --muted: #8b95a5;
  --accent: #2fe6b0;
  --accent-2: #7c5cff;
  --card-accent: #2fe6b0;
  --link-on-surface: #2fe6b0;
  --border: #232a35;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Inter", "Segoe UI", system-ui, sans-serif;
  --radius: 12px;
  --pos-goleiro: #ffd166;
  --pos-zagueiro: #4dabf7;
  --pos-meio: #ffa94d;
  --pos-atacante: #ff6b6b;
}

[data-theme="ultimate"] body {
  background:
    radial-gradient(ellipse 800px 500px at 10% -5%, rgba(47, 230, 176, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 900px 600px at 100% 25%, rgba(124, 92, 255, 0.16) 0%, transparent 55%),
    #0a0e14;
  background-attachment: fixed;
}

[data-theme="ultimate"] h1,
[data-theme="ultimate"] h2,
[data-theme="ultimate"] h3,
[data-theme="ultimate"] h4,
[data-theme="ultimate"] h5 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-transform: none;
}
[data-theme="ultimate"] h1 {
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 1.25rem;
}
[data-theme="ultimate"] h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
[data-theme="ultimate"] .card-surface h2,
[data-theme="ultimate"] .card-surface h3,
[data-theme="ultimate"] .card-surface h4,
[data-theme="ultimate"] .card-surface h5,
[data-theme="ultimate"] .time-box h2,
[data-theme="ultimate"] .time-box h3,
[data-theme="ultimate"] .time-box h4,
[data-theme="ultimate"] .time-box h5 {
  color: #ffffff;
}

[data-theme="ultimate"] .navbar-mensal {
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(47, 230, 176, 0.25);
}

/* Abas do campeonato (Classificação / Seleção do Campeonato) — base.css
   fixa um verde-escuro genérico (visual "gramado") igual em todos os
   temas; aqui usa a superfície escura e o verde-teal de destaque do
   próprio tema, em vez do verde/dourado da grama. */
[data-theme="ultimate"] .campeonato-tabs {
  background: var(--surface);
  border-bottom: 1px solid rgba(47, 230, 176, 0.25);
}
[data-theme="ultimate"] .campeonato-tabs .nav-link.active {
  border-bottom-color: var(--accent);
  background: rgba(47, 230, 176, 0.1);
}

[data-theme="ultimate"] .card-surface {
  background: #161b22;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="ultimate"] .table-mensal {
  --bs-table-bg: #161b22;
  --bs-table-color: #f0f3f7;
  --bs-table-border-color: #232a35;
}
[data-theme="ultimate"] .table-mensal thead {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  border-bottom: 2px solid rgba(47, 230, 176, 0.35);
}
[data-theme="ultimate"] .table-mensal tbody tr:hover {
  --bs-table-bg: rgba(47, 230, 176, 0.08);
}

[data-theme="ultimate"] .btn-mensal {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border: none;
  color: #06110d;
  font-weight: 700;
  border-radius: 999px;
}
[data-theme="ultimate"] .btn-mensal:hover {
  filter: brightness(1.1);
  color: #06110d;
}
[data-theme="ultimate"] .btn-outline-secondary {
  color: var(--text);
  border-color: rgba(240, 243, 247, 0.3);
  border-radius: 999px;
}
[data-theme="ultimate"] .btn-outline-secondary:hover {
  background: rgba(240, 243, 247, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

[data-theme="ultimate"] .pagination {
  --bs-pagination-border-radius: 999px;
}
[data-theme="ultimate"] .pagination .page-item {
  margin-inline: 2px;
}
[data-theme="ultimate"] .pagination .page-link {
  border-color: rgba(240, 243, 247, 0.3);
}
[data-theme="ultimate"] .pagination .page-item.disabled .page-link {
  border-color: var(--border);
}
[data-theme="ultimate"] .btn-download {
  background: var(--accent);
  border: none;
  color: #06110d;
  border-radius: 999px;
}
[data-theme="ultimate"] .btn-download:hover {
  background: #6bf2cf;
  border: none;
  color: #06110d;
}
[data-theme="ultimate"] .btn-pix {
  background: var(--accent);
  border-color: var(--accent);
  color: #06110d;
  border-radius: 999px;
}
[data-theme="ultimate"] .btn-pix:hover {
  background: #6bf2cf;
  border-color: #6bf2cf;
  color: #06110d;
}

[data-theme="ultimate"] .destaque-card {
  background: #161b22;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2);
  color: #f0f3f7;
}
[data-theme="ultimate"] .destaque-card h5 {
  color: #ffffff;
}

/* Card do jogador — fiel ao card atual do FUT/EA FC: foto de corpo
   inteiro sangrando até a borda (não mais círculo), overall e posição no
   canto superior esquerdo por cima da foto, faixa dourada com o nome
   embaixo. Raridade (Jogador.tier_carta) sobe por título conquistado:
   ferro (0, padrão) → bronze → prata → ouro → platina → safira (5+). */
[data-theme="ultimate"] .jogador-card-wrap {
  max-width: 188px;
  padding: 4px;
  clip-path: polygon(
    10% 2%, 18% 0%, 82% 0%, 90% 2%,
    100% 14%, 100% 58%,
    88% 78%, 74% 90%, 50% 100%, 26% 90%, 12% 78%,
    0% 58%, 0% 14%
  );
  background: #3d4045;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
[data-theme="ultimate"] .jogador-card-wrap:has(.jogador-card--ferro) {
  background: #3d4045;
}
[data-theme="ultimate"] .jogador-card-wrap:has(.jogador-card--bronze) {
  background: #6b4423;
}
[data-theme="ultimate"] .jogador-card-wrap:has(.jogador-card--prata) {
  background: #6b7280;
}
[data-theme="ultimate"] .jogador-card-wrap:has(.jogador-card--ouro) {
  background: #8a6018;
}
[data-theme="ultimate"] .jogador-card-wrap:has(.jogador-card--platina) {
  background: #4d7a68;
}
[data-theme="ultimate"] .jogador-card-wrap:has(.jogador-card--safira) {
  background: #163a7a;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(53, 104, 201, 0.55);
}
[data-theme="ultimate"] .jogador-card-wrap:has(.jogador-card--brancadourada) {
  background: #ffd23f;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 210, 63, 0.5);
}

[data-theme="ultimate"] .jogador-card {
  width: 180px;
  min-height: 266px;
  padding: 0;
  border: none;
  color: #2a1d06;
  overflow: hidden;
  clip-path: polygon(
    10% 2%, 18% 0%, 82% 0%, 90% 2%,
    100% 14%, 100% 58%,
    88% 78%, 74% 90%, 50% 100%, 26% 90%, 12% 78%,
    0% 58%, 0% 14%
  );
  background: linear-gradient(160deg, #a7abb0 0%, #6e7278 45%, #3d4045 100%);
}
[data-theme="ultimate"] .jogador-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.4) 48%, transparent 62%);
  pointer-events: none;
  z-index: 1;
}

/* Raridade por título (Jogador.tier_carta) — ferro é o padrão (regra
   acima, sem classe extra — a regra explícita abaixo garante o mesmo
   resultado quando `jogador-card--ferro` aparece), as demais sobem por
   cima dela. */
[data-theme="ultimate"] .jogador-card--ferro {
  background: linear-gradient(160deg, #a7abb0 0%, #6e7278 45%, #3d4045 100%);
}
[data-theme="ultimate"] .jogador-card--bronze {
  background: linear-gradient(160deg, #e8c9a0 0%, #c99a5f 45%, #8a5a24 100%);
}
[data-theme="ultimate"] .jogador-card--prata {
  background: linear-gradient(160deg, #f2f4f7 0%, #c3cad4 45%, #8b93a1 100%);
}
[data-theme="ultimate"] .jogador-card--ouro {
  background: linear-gradient(160deg, #fdeeb0 0%, #e8c565 45%, #b8862c 100%);
}
[data-theme="ultimate"] .jogador-card--platina {
  background: linear-gradient(160deg, #dff7f0 0%, #a9dcc9 45%, #5f9c86 100%);
}

/* Safira é a única raridade escura desse tema — texto/detalhes claros em
   vez do texto escuro (#2a1d06) usado pelas raridades mais pálidas. */
[data-theme="ultimate"] .jogador-card--safira {
  background: linear-gradient(160deg, #6fa8f0 0%, #3568c9 45%, #163a7a 100%);
}
[data-theme="ultimate"] .jogador-card--safira .jogador-card__overall,
[data-theme="ultimate"] .jogador-card--safira .jogador-card__posicao-sigla,
[data-theme="ultimate"] .jogador-card--safira .jogador-card__nome {
  color: #eaf2ff;
}
[data-theme="ultimate"] .jogador-card--safira .jogador-card__rodape {
  border-top-color: rgba(234, 242, 255, 0.35);
}

/* Topo da progressão (6+ títulos) — carta branca/pérola com detalhes
   dourados. Fundo claro, então usa o mesmo texto escuro padrão do tema
   (#2a1d06), sem precisar de override. */
[data-theme="ultimate"] .jogador-card--brancadourada {
  background: linear-gradient(160deg, #ffffff 0%, #f0f0f0 45%, #d9d9d9 100%);
}

[data-theme="ultimate"] .jogador-card__topo {
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  z-index: 2;
}
[data-theme="ultimate"] .jogador-card__overall {
  color: #2a1d06;
  text-shadow: none;
}
[data-theme="ultimate"] .jogador-card__posicao-sigla {
  color: #2a1d06;
  opacity: 0.85;
  font-size: 0.95rem;
  font-weight: 800;
}

[data-theme="ultimate"] .jogador-card__foto-wrap {
  margin-top: 0;
  height: 184px;
}
[data-theme="ultimate"] .jogador-card__foto {
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  object-fit: cover;
  /* "top center" cortava a foto rente ao topo — sobrava só cabelo/testa,
     cortando o rosto fora. Centralizado mostra o rosto inteiro. */
  object-position: center;
  box-shadow: none;
}

[data-theme="ultimate"] .jogador-card__nome {
  color: #2a1d06;
  text-shadow: none;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 0.05rem 0.75rem 0;
  margin-top: 0.05rem;
}

[data-theme="ultimate"] .jogador-card__rodape {
  border-top: 1px solid rgba(42, 29, 6, 0.3);
  padding: 0.05rem 0.75rem 0.05rem;
  margin-top: 0.05rem;
}

/* Card mini do tema Ultimate — foto de corpo inteiro sangrando até a
   borda, escudo recortado, nome/bandeira numa tira fina embaixo. Todo
   auto-contido nesse bloco (nenhuma regra de base.css é necessária) pra
   não depender da ordem de carregamento dos arquivos CSS. */
[data-theme="ultimate"] .jogador-card--mini {
  /* Mesmas dimensões (largura/altura mínima) e zoom do card mini do tema
     Moderno (ver tema-moderno.css) — tamanho já validado como bom nessa
     tela; só a silhueta (escudo, em vez do card retangular do Moderno) e a
     foto retangular continuam exclusivas do Ultimate. */
  width: 84px;
  min-height: 122px;
  padding: 0;
  clip-path: polygon(
    10% 2%, 18% 0%, 82% 0%, 90% 2%,
    100% 14%, 100% 58%,
    88% 78%, 74% 90%, 50% 100%, 26% 90%, 12% 78%,
    0% 58%, 0% 14%
  );
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
[data-theme="ultimate"] .jogador-card-wrap--mini {
  padding: 2px;
  clip-path: polygon(
    10% 2%, 18% 0%, 82% 0%, 90% 2%,
    100% 14%, 100% 58%,
    88% 78%, 74% 90%, 50% 100%, 26% 90%, 12% 78%,
    0% 58%, 0% 14%
  );
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}
[data-theme="ultimate"] .jogador-card-wrap--mini > .jogador-card {
  zoom: 1.2;
}
[data-theme="ultimate"] .jogador-card--mini .jogador-card__foto-wrap {
  margin: 0;
  height: 84px;
  position: relative;
  overflow: hidden;
  display: block;
}
/* position:absolute com inset:0 tira a foto do fluxo normal e força ela a
   preencher exatamente a caixa do foto-wrap, ignorando o tamanho intrínseco
   da imagem — evita a foto aparecer cortada/pequena dentro de uma área
   escura do card (fundo do tier safira) por causa do object-fit sozinho não
   ter uma altura garantida em todo browser. */
[data-theme="ultimate"] .jogador-card--mini .jogador-card__foto {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center 20%;
}
[data-theme="ultimate"] .jogador-card--mini .jogador-card__nome {
  padding: 0 0.2rem;
  margin-top: 0.15rem;
  font-size: 0.55rem;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="ultimate"] .jogador-card--mini .jogador-card__rodape {
  padding: 0 0.2rem;
  margin: 0.1rem 0 0.35rem;
  border-top: none;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.8rem;
}
/* A regra geral do tema (card grande) deixa a sigla de posição maior e em
   negrito (`.jogador-card__posicao-sigla` acima) — sem esse override, ela
   vaza pro card mini também (mesma especificidade, e esse arquivo carrega
   depois do base.css). Aqui volta pro tamanho padrão do card mini. */
[data-theme="ultimate"] .jogador-card--mini .jogador-card__posicao-sigla {
  font-size: 0.55rem;
  font-weight: 700;
}