/* ===============================
   COPA 10 - STYLE (COMPLETO)
   - Mobile first
   - Anti overflow lateral
   - Chaveamento: logos menores + confronto "frente a frente"
   - Ranking: visual de tabela (Brasileirão)
================================ */

/* RESET */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
button, input, select { font-family: inherit; }
:root{
  --bg1:#0f2a3a;
  --bg2:#050b14;
  --card1:#0e2d40;
  --card2:#081a28;
  --line: rgba(255,255,255,.10);
  --muted: rgba(233,238,243,.68);
  --text: #e9eef3;

  --green1:#2ecc71;
  --green2:#1fa463;
  --red1:#e74c3c;
  --red2:#b8362b;
  --blue1:#3498db;
  --blue2:#1c6ea4;
}

html{ overflow-x: hidden; }
body{
  overflow-x: hidden; /* <- mata “estourando pro lado” */
  background: radial-gradient(circle at top, var(--bg1), var(--bg2) 70%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

/* UTIL */
.hidden{ display:none !important; }
.muted{ color: var(--muted); }
.label{
  display:block;
  font-size: 13px;
  opacity: .85;
  margin-bottom: 6px;
}
.input, input, select{
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: #fff;
  font-size: 16px;
  outline: none;
}
input::placeholder{ color: rgba(255,255,255,.45); }

/* CONTAINER */
.container{
  max-width: 920px;
  margin: 0 auto 40px;
  padding: 0 14px;
}

/* CARDS */
.card{
  background: linear-gradient(160deg, var(--card1), var(--card2));
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 12px 35px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.06);
}

/* HEADER */
.header{
  margin-top: 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
@media (max-width: 600px){
  .header{
    flex-direction: column;
    align-items: stretch;
  }
  .top-actions{
    justify-content: center !important;
  }
}

/* BOTÕES */
.btn{
  padding: 14px 18px;
  border-radius: 999px;
  border: none;
  font-weight: 800;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .06s ease, filter .15s ease;
}
.btn:active{ transform: scale(.98); }
.btn-full{ width: 100%; }

.btn-ghost{
  background: rgba(255,255,255,.08);
  color: #fff;
}
.btn-ghost.active{
  background: linear-gradient(135deg, var(--green1), var(--green2));
  color: #001b0c;
  border-color: rgba(0,0,0,.0);
}

.btn-success{
  background: linear-gradient(135deg, var(--green1), var(--green2));
  color: #001b0c;
  border-color: rgba(0,0,0,.0);
}
.btn-danger{
  background: linear-gradient(135deg, var(--red1), var(--red2));
  color: #fff;
  border-color: rgba(0,0,0,.0);
}
.btn-primary{
  background: linear-gradient(135deg, var(--blue1), var(--blue2));
  color: #00121b;
  border-color: rgba(0,0,0,.0);
}

/* TABS ADMIN */
.tabs{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.tab{
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-weight: 700;
}
.tab.active{
  background: linear-gradient(135deg, var(--blue1), var(--blue2));
  border-color: rgba(0,0,0,.0);
  color: #00121b;
}

/* ================
   CHAVEAMENTO (Copa 10 style)
   - Força “frente a frente”
   - Logo em cima / nome embaixo (sem precisar mexer no app.js)
================ */
#publicBracket, #bracketAdminArea{
  width: 100%;
  overflow-x: hidden;
}

/* Bloco de cada confronto (o app.js já usa .match em muitas versões) */
.match{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
}

/* “X” do meio */
.match .vs,
.match .x,
.match > div:nth-child(2){
  opacity: .8;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  min-width: 26px;
}

/* times lado a lado */
.team{
  min-width: 0;
  border-radius: 16px;
  padding: 12px 10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.06);

  display: flex;
  flex-direction: column; /* logo em cima / nome embaixo */
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

/* logo menor e consistente */
.team img{
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* texto dentro do team: não estoura */
.team *{
  max-width: 100%;
}
.team .name,
.team .player,
.team .jogador,
.team label,
.team span,
.team div{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* selects/inputs no chaveamento ficam “bonitos” e alinhados */
.match select,
.match input{
  width: 100%;
  max-width: 260px;
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
}

/* placar compacto (quando existir) */
.score{
  width: 44px;
  text-align: center;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}

/* vencedor destacado */
.team.winner{
  outline: 2px solid rgba(46,204,113,.95);
  background: rgba(46,204,113,.12);
  border-color: rgba(46,204,113,.25);
}

/* Responsivo: mantém frente a frente até onde der */
@media (max-width: 520px){
  .match{
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    padding: 12px;
  }
  .team img{
    width: 56px;
    height: 56px;
  }
}

/* ================
   RANKING “BRASILEIRÃO”
   - Funciona mesmo se o app.js gerar como texto/lista.
================ */

/* deixa o título do ranking mais “cabeçalho” */
#rankingArea h2,
#rankingArea h3,
#rankingArea .ranking-title{
  margin: 0 0 10px 0;
  font-size: 18px;
}

/* se vier como lista <ol><li>... */
#rankingArea ol,
#rankingArea ul{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

/* estilo de “tabela” (linhas) */
#rankingArea li{
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;

  padding: 12px 12px;
  margin: 8px 0;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

/* posição (1,2,3…) com badge */
#rankingArea li::before{
  content: attr(data-pos);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-weight: 900;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
}

/* Se o app.js não setar data-pos, a gente tenta dar cara com contador */
#rankingArea ol{ counter-reset: rk; }
#rankingArea ol > li{ counter-increment: rk; }
#rankingArea ol > li::before{ content: counter(rk); }

/* nome */
#rankingArea li .nome,
#rankingArea li .name,
#rankingArea li strong,
#rankingArea li b{
  font-weight: 900;
  font-size: 16px;
}

/* valor (gols/títulos) alinhado direita */
#rankingArea li .valor,
#rankingArea li .gols,
#rankingArea li .titulos,
#rankingArea li span:last-child{
  font-weight: 900;
  opacity: .95;
}

/* TOP 3 com brilho (Brasileirão vibes) */
#rankingArea ol > li:nth-child(1){
  background: linear-gradient(135deg, rgba(255,215,0,.22), rgba(255,255,255,.06));
  border-color: rgba(255,215,0,.25);
}
#rankingArea ol > li:nth-child(2){
  background: linear-gradient(135deg, rgba(192,192,192,.20), rgba(255,255,255,.06));
  border-color: rgba(192,192,192,.22);
}
#rankingArea ol > li:nth-child(3){
  background: linear-gradient(135deg, rgba(205,127,50,.18), rgba(255,255,255,.06));
  border-color: rgba(205,127,50,.22);
}

/* Sub-tabs “Campeões / Artilheiros” (quando vier como botões) */
#rankingArea button,
#rankingArea .btn-mini{
  border-radius: 999px;
}

/* ===============================
   SAFARI / iOS: evita travar scroll
================================ */
#modalAdmin{
  -webkit-overflow-scrolling: touch;
}
body, html{
  -webkit-text-size-adjust: 100%;
}

/* Pequenos ajustes gerais */
a{ color: inherit; }