/* =========================================================
   COPA 10 PRO - CHAVEAMENTO + RANKING (SÓ CSS)
   (cole no FINAL do style.css)
========================================================= */

/* ---------- CHAVEAMENTO PRO ---------- */

#bracketAdminArea, #publicBracket {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.match {
  position: relative;
  background: linear-gradient(145deg, rgba(12,36,52,.92), rgba(7,24,33,.92));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 16px 12px;
  box-shadow: 0 16px 50px rgba(0,0,0,.42);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
}

/* brilho suave no card */
.match::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 20% 15%, rgba(52,152,219,.18), transparent 55%),
              radial-gradient(circle at 90% 70%, rgba(46,204,113,.12), transparent 55%);
  pointer-events:none;
}

.team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  z-index: 1;
}

.team img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  margin-bottom: 8px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* nome do jogador (sempre embaixo) */
.team .player,
.team-name {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* nome do time menor */
.team .club,
.team-club {
  margin-top: 4px;
  font-size: 12px;
  opacity: .72;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* centro (placar/VS) */
.match-center {
  z-index: 1;
  min-width: 84px;
  display: grid;
  place-items: center;
  gap: 8px;
}

.match-center .vs {
  font-weight: 900;
  letter-spacing: 2px;
  opacity: .7;
  font-size: 12px;
}

.match-center .scoreline {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px 10px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
}

.score, .score-input {
  width: 46px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-weight: 800;
}

/* vencedor */
.team.winner {
  transform: translateY(-1px) scale(1.03);
  transition: .2s ease;
}
.team.winner img {
  filter: drop-shadow(0 0 10px rgba(46,204,113,.65));
}

/* badge vencedor animado */
.team.winner::after{
  content:"VENCEDOR";
  margin-top: 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #001b0c;
  background: linear-gradient(135deg, #2ecc71, #1fa463);
  box-shadow: 0 10px 24px rgba(46,204,113,.25);
  animation: winnerPulse 1.2s ease-in-out infinite;
}
@keyframes winnerPulse {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.06); filter: brightness(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* BYE */
.team.bye {
  opacity: .4;
  filter: grayscale(1);
}

/* FINAL / SEMI (detecta por texto do título do round) 
   Se o app.js coloca "Final" ou "Semi" no container, a gente estiliza */
#bracketAdminArea h3,
#publicBracket h3,
#bracketAdminArea h2,
#publicBracket h2 {
  margin: 14px 0 8px;
  font-size: 16px;
  letter-spacing: .5px;
  opacity: .9;
}

/* Quando estiver na FINAL, você pode colocar o texto "Final" no título do round.
   Se existir, destaca o próximo .match */
#bracketAdminArea h3:contains("Final") + .match,
#publicBracket h3:contains("Final") + .match {}

/* Fallback universal: você pode usar classes no HTML (se já tiver): .is-final / .is-semi */
.match.is-final {
  border: 1px solid rgba(255,215,0,.35);
  box-shadow: 0 18px 55px rgba(255,215,0,.10), 0 16px 50px rgba(0,0,0,.42);
}
.match.is-final::before {
  background: radial-gradient(circle at 20% 15%, rgba(255,215,0,.22), transparent 55%),
              radial-gradient(circle at 90% 70%, rgba(46,204,113,.10), transparent 55%);
}

.match.is-semi {
  border: 1px solid rgba(52,152,219,.22);
  box-shadow: 0 18px 55px rgba(52,152,219,.08), 0 16px 50px rgba(0,0,0,.42);
}

/* mobile */
@media (max-width: 600px) {
  .match { padding: 14px 10px; }
  .team img { width: 56px; height: 56px; }
  .match-center { min-width: 74px; }
  .score, .score-input { width: 44px; }
}


/* ---------- RANKING PRO (Tabela estilo Brasileirão) ---------- */

/* Se o app.js usa <table class="table"> isso vira Brasileirão */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  margin-top: 12px;
}

.table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .9px;
  opacity: .7;
  padding: 8px 10px;
}

.table tbody tr {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.30);
}

.table tbody tr td {
  padding: 14px 12px;
  border-bottom: none !important;
}

.table tbody tr td:first-child {
  width: 54px;
  font-weight: 900;
  text-align: center;
  border-radius: 16px 0 0 16px;
  background: rgba(255,255,255,.06);
}

.table tbody tr td:last-child {
  text-align: right;
  font-weight: 900;
  border-radius: 0 16px 16px 0;
}

/* TOP 1 / TOP 2 / TOP 3 com medalha */
.table tbody tr:nth-child(1) td:first-child {
  background: linear-gradient(135deg, #f5d76e, #caa73a);
  color: #1a1200;
}
.table tbody tr:nth-child(2) td:first-child {
  background: linear-gradient(135deg, #d7dde6, #9aa6b2);
  color: #0b121a;
}
.table tbody tr:nth-child(3) td:first-child {
  background: linear-gradient(135deg, #d9a06f, #9a5b2d);
  color: #140800;
}

/* Se o ranking vier como texto simples dentro do #rankingArea
   pelo menos melhora leitura e quebra de linha */
#rankingArea {
  white-space: normal;
  line-height: 1.35;
}

#rankingArea > div,
#rankingArea .card,
#rankingArea .rankingCard {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px;
  margin-top: 12px;
}

/* Deixa o título do ranking com “cara de tabela” */
#rankingArea h3, #rankingArea h2 {
  margin: 10px 0 12px;
  font-size: 16px;
  font-weight: 900;
}

/* Tabs campeões/artilheiros (já existem no seu layout) */
#abaRanking .tabs,
#abaRanking .rank-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

#abaRanking .tabs button,
#abaRanking .rank-tabs button {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 800;
}
#abaRanking .tabs button.active,
#abaRanking .rank-tabs button.active {
  background: linear-gradient(135deg, #3498db, #1c6ea4);
}