/* --------------------------------------------------
   RANKING — ESTILOS ESPECÍFICOS
   (usa as vars globais de home.css)
-------------------------------------------------- */

/* ---------- LAYOUT PRINCIPAL ---------- */

.ranking-page-main{
  max-width:1200px;
  margin:28px auto 40px auto;
  padding:0 16px;
  /* remove o min-height que estava aqui */
  min-height:auto; /* (ou simplesmente não ter essa linha) */
}


/* ---------- CABEÇALHO DA PÁGINA ---------- */

.ranking-page-head{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}

.ranking-page-head h1{
  font-size:var(--fz-sec);
  font-weight:800;
  margin:0 0 4px 0;
}

.ranking-page-head p{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

/* ---------- BARRA DE BUSCA ---------- */

.ranking-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin:18px 0 22px;
}

.ranking-toolbar form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  flex:1;
}

.ranking-toolbar input[name="search"]{
  flex:1 1 220px;
  max-width:380px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:14px;
  outline:none;
  background:#fff;
}

body:not(.theme-light) .ranking-toolbar input[name="search"]{
  background:var(--panel);
  color:var(--ink);
}

.ranking-toolbar input[name="search"]::placeholder{
  color:var(--muted2);
}

.ranking-toolbar button[type="submit"]{
  height:40px;
  padding:0 20px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(90deg,var(--gold2),var(--gold));
  color:#2b2b2b;
  box-shadow:0 8px 22px rgba(255,179,0,.18);
}

.ranking-toolbar button[type="submit"]:hover{
  filter:brightness(1.05);
}

/* ---------- RESULTADO DA BUSCA ---------- */

.search-result{
  margin-bottom:16px;
  padding:14px 18px;
  border-radius:12px;
  background:var(--panel);
  border:1px solid var(--line);
  font-size:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.search-result h2{
  margin:0;
  font-size:14px;
  font-weight:600;
}

.back-button{
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  cursor:pointer;
  background:var(--panel2);
  color:var(--ink);
}

/* ---------- TOP 3 CARDS ---------- */

.top-players{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

@media(max-width:768px){
  .top-players{
    grid-template-columns:1fr;
  }
}

.rewards{
  border-radius:14px;
  padding:14px;
  background:var(--panel);
  border:1px solid var(--line);
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.rewards .rank{
  font-weight:800;
  font-size:15px;
}

.rewards .reward{
  font-size:13px;
  color:var(--gold);
}

/* variações de cor */
.rewards.first-place{
  background:linear-gradient(135deg,rgba(255,211,90,0.16),var(--panel));
  border-color:#ffd35a;
}

.rewards.second-place{
  background:linear-gradient(135deg,rgba(192,192,192,0.18),var(--panel));
}

.rewards.third-place{
  background:linear-gradient(135deg,rgba(205,127,50,0.18),var(--panel));
}

/* ---------- TABELA DO RANKING ---------- */

.ranking-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:12px;
  font-size:13px;
  background:var(--panel);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.ranking-table th,
.ranking-table td{
  padding:12px 10px;
  text-align:center;
  border-bottom:1px solid var(--line);
}

.ranking-table thead{
  background:rgba(255,255,255,0.02);
  font-weight:700;
}

.ranking-table tbody tr:last-child td{
  border-bottom:none;
}

.table-header{
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  transition:.2s;
}

.table-header:hover{
  color:var(--gold);
}

.table-header.selected{
  color:var(--gold);
}

/* linhas especiais */

.ranking-table tbody tr:hover {
    background: rgba(255, 211, 90, 0.12) !important;
    cursor:pointer;
}


.first-place-r{
  background:rgba(255,211,90,0.08);
  font-weight:600;
}

.second-place-r{
  background:rgba(192,192,192,0.10);
  font-weight:600;
}

.third-place-r{
  background:rgba(205,127,50,0.08);
  font-weight:600;
}

/* ---------- PAGINAÇÃO ---------- */

.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin:22px 0 10px;
  flex-wrap:wrap;
  font-size:13px;
}

.number-button,
.name-button,
.current-page{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
  cursor:pointer;
  background:var(--panel2);
}

.number-button:hover,
.name-button:hover{
  background:var(--panel);
}

.current-page{
  background:var(--gold);
  border-color:var(--gold);
  color:#2b2b2b;
  font-weight:700;
}

/* ---------- MODAL PLAYER ---------- */

.modal{
  display:none;
  position:fixed;
  z-index:999;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background-color:rgba(0,0,0,0.85);
}

.modal.show{
  display:block;
}

.modal iframe{
  border-radius:16px;
}

.close-button{
  position:absolute;
  top:16px;
  right:24px;
  font-size:28px;
  color:#fff;
  cursor:pointer;
  z-index:2;
}

/* iframe centralizado */
#playerIframe{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:90%;
  height:80%;
  max-width:1100px;
  max-height:650px;
  border:none;
}

@media(max-width:768px){
  #playerIframe{
    width:96%;
    height:78%;
  }

  .ranking-table th,
  .ranking-table td{
    padding:10px 6px;
    font-size:12px;
  }

  .ranking-toolbar input[name="search"]{
    width:100%;
  }
}

/* ---------- LINKS DAS REDES SOCIAIS NO FOOTER ---------- */

.social-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

/* base no estilo das chips da home */
.social-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(10,20,60,.06);
  transition:all .18s ease;
}

.social-links a i{
  font-size:14px;
}

/* hover com gradiente dourado da home */
.social-links a:hover{
  background:linear-gradient(90deg,var(--gold3),var(--gold2));
  border-color:transparent;
  color:#2b2b2b;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(255,179,0,.20);
}

/* toque de cor da marca só no ícone */
.social-links a.discord i{ color:#5865f2; }
.social-links a.youtube i{ color:#ff4b4b; }
.social-links a.tiktok  i{ color:#00f2ea; }

.social-links a:hover i{
  filter:brightness(.9);
}

/* dark theme */
body:not(.theme-light) .social-links a{
  background:var(--panel);
  border-color:var(--line);
  color:var(--muted2);
  box-shadow:none;
}

body:not(.theme-light) .social-links a:hover{
  background:linear-gradient(90deg,var(--gold2),var(--gold));
  color:#111;
}