/* ===============================
   COPA 10 — STYLE (COMPLETO)
   - Mobile-first
   - Sem overflow lateral
   - Bracket com logos menores
   - Ranking alinhado/bonito
================================ */

/* ===== Reset ===== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }

:root{
  --bg1:#0f2a3a;
  --bg2:#050b14;
  --card1:#0e2d40;
  --card2:#081a28;
  --stroke: rgba(255,255,255,.12);
  --muted: rgba(233,238,243,.72);
  --text: #e9eef3;

  --blue1:#3498db;
  --blue2:#1c6ea4;

  --green1:#2ecc71;
  --green2:#1fa463;

  --danger1:#ef4444;
  --danger2:#b91c1c;
}

html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;                 /* ✅ evita “estourar pros lados” */
  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;
}

/* melhora scroll no iOS */
body{
  -webkit-overflow-scrolling: touch;
}

/* ===== Util ===== */
.hidden{ display:none !important; }
.muted{ color: var(--muted); }
.label{ display:block; font-weight: 700; margin-bottom: 8px; color: rgba(233,238,243,.86); }
a{ color: inherit; }

/* ===== Layout ===== */
.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: 16px 0;
  box-shadow: 0 12px 35px rgba(0,0,0,.50);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;                   /* ✅ impede conteúdo “vazar” */
}

/* ===== Header ===== */
.header{
  margin-top: 18px;
}
.header.card{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.header .muted{ font-size: 13px; }

/* ===== Inputs ===== */
.input,
input,
select{
  width: 100%;
  max-width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  color: #fff;
  font-size: 16px;
  outline: none;
}
input::placeholder{ color: rgba(255,255,255,.45); }

select{
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%),
    linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px),
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.08);
  color:#fff;

  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
  text-decoration: none;

  max-width: 100%;
  white-space: nowrap;
}

.btn:active{ transform: translateY(1px); }

.btn-full{ width: 100%; }

.btn-ghost{
  background: rgba(255,255,255,.08);
}

.btn-success{
  background: linear-gradient(135deg, var(--green1), var(--green2));
  color: #001b0c;
  border: 1px solid rgba(255,255,255,.10);
}

.btn-danger{
  background: linear-gradient(180deg, var(--danger1), var(--danger2));
  color: #150101;
  border: 1px solid rgba(255,255,255,.10);
}

/* botão ativo (Público/Admin do topo) */
.top-actions .active{
  background: linear-gradient(135deg, var(--green1), var(--green2));
  color:#001b0c;
}

/* ===== Tabs ===== */
.tabs{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tab{
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-weight: 800;
  cursor: pointer;
}
.tab.active{
  background: linear-gradient(135deg, var(--blue1), var(--blue2));
}
.tab-panel{
  width: 100%;
  max-width: 100%;
}

/* ===== Modal Admin ===== */
#modalAdmin{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
#modalAdminBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
#modalAdminCard{
  position: relative;
  z-index: 10000;
  width: min(520px, calc(100% - 28px));
  margin: 12vh auto 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(2, 6, 23, 0.92);
  padding: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

/* ===== Evitar vazamento de texto no app inteiro ===== */
#telaAdmin, #telaPublica, #telaModo, .card, .tab-panel{
  max-width: 100%;
}
#telaAdmin * , #telaPublica *{
  max-width: 100%;
}

/* ===== Bracket / Chaveamento (logo menor + sem estourar) ===== */
/* cobre qualquer imagem do bracket */
#bracketAdminArea img,
#publicBracket img{
  width: 76px;                        /* ✅ menor (padrão Copa 10) */
  max-width: 76px;
  height: auto;
  display:block;
  margin: 10px auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.45));
}

/* quando o app gerar “cards” por confronto */
.match, .matchRow, .gameRow{
  width: 100%;
  max-width: 100%;
}

/* entradas do placar não vazarem */
input[type="number"], .score{
  width: 100%;
  max-width: 80px;
  text-align: center;
}

/* “times” e nomes truncados */
.team, .teamBox, .teamCard{
  background: rgba(0,0,0,.22);
  border-radius: 14px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.team *{
  max-width: 100%;
}
.teamName, .nomeTime, .playerName{
  display:block;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* melhor para textos longos no geral */
#bracketAdminArea,
#publicBracket{
  overflow-x: hidden;
}
#bracketAdminArea * ,
#publicBracket *{
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ===== Ranking — deixar bonito mesmo se vier em texto ===== */
#rankingArea{
  width: 100%;
  max-width: 100%;
}

/* se o app renderizar como <table> */
#rankingArea table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
}
#rankingArea th,
#rankingArea td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
}
#rankingArea th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(233,238,243,.70);
  background: rgba(255,255,255,.05);
}
#rankingArea tr:last-child td{ border-bottom:none; }

/* se o app renderizar como <ol>/<ul>/<div> */
#rankingArea ol,
#rankingArea ul{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
#rankingArea li{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;

  overflow: hidden;
}
#rankingArea li .left,
#rankingArea li .name{
  flex: 1;
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#rankingArea li .right,
#rankingArea li .value{
  font-weight: 900;
  white-space: nowrap;
}

/* ===== Fix: “Carregando…” select não quebrar layout ===== */
#selTemporada{
  min-height: 46px;
}

/* ===== Responsivo ===== */
@media (max-width: 600px){
  .header.card{
    flex-direction: column;
    align-items: stretch;
  }
  .top-actions{
    width: 100%;
    justify-content: center;
  }
  .top-actions .btn{
    flex: 1;
  }

  /* logos ainda menores no mobile */
  #bracketAdminArea img,
  #publicBracket img{
    width: 64px;
    max-width: 64px;
  }
}