@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================
   DESIGN TOKENS — Identidade Visual Código Comentado
   ========================================================== */
:root {
  --azul-principal: #2563EB;
  --verde-sucesso: #10B981;
  --roxo-criativo: #7C3AED;
  --fundo: #1E2937;
  --superficie: #26313F;
  /* elevação sobre o fundo, para cards/tabela */
  --superficie-hover: #2E3B4A;
  --texto: #FFFFFF;
  --texto-secundario: #9CA3AF;
  --borda: rgba(255, 255, 255, 0.06);

  --ouro: #D3AF37;
  --prata: #CBC9C1;
  --bronze: #9E4C00;
}

* {
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
  /* Remove o "flash" azul padrão do navegador ao tocar em qualquer
     elemento em dispositivos touch (Android principalmente) */
  -webkit-tap-highlight-color: transparent;
}

html {
  scrollbar-gutter: stable both-edges;
  /* Alguns navegadores mobile calculam a rolagem horizontal pelo
     <html>, não pelo <body> — por isso precisa estar nos dois. */
  overflow-x: hidden;
  width: 100%;
}

body {
  background-color: var(--fundo);
  margin: 0;
  /* O balão de prêmio (.nuvem-premio) fica no DOM mesmo invisível
     (opacity: 0) e pode ultrapassar a borda da tela em telas
     estreitas, criando uma barra de rolagem horizontal na página
     inteira. Isso trava esse overflow sem afetar o layout normal. */
  overflow-x: hidden;
}

/* Camada extra de proteção: o Safari (iOS) tem um bug conhecido
   de ignorar overflow-x: hidden no body/html quando um elemento
   com position: absolute vaza da tela. Embrulhando o conteúdo
   numa div própria com sua própria trava, cobrimos esse caso. */
.trava-mobile {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--texto);
  font-weight: 600;
  margin: 0 0 4px 0;
}

p,
td,
th,
tr {
  color: var(--texto);
}

#current-date {
  color: var(--texto);
}

#logo {
  position: absolute;
  top: 30px;
  right: 30px;
  filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.35));
}

#star-text {
  position: absolute;
  right: 30px;
  top: 85px;
  color: var(--ouro);
  font-weight: 600;
  font-size: 14px;
}

div.header {
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

#ranking-title {
  background-image: linear-gradient(to right, var(--azul-principal), var(--verde-sucesso));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fluido: nunca fica grande demais em celular nem pequeno demais em telas largas */
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 700;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

div.bloco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ==========================================================
   CARDS DE ESTATÍSTICA (Participantes / Merges / Data)
   Cada classe define sua própria cor de "brilho" via custom
   property, e a regra de hover (abaixo, em @media hover:hover)
   é escrita uma única vez para as três.
   ========================================================== */
div.card-participantes,
div.card-merges,
div.card-date {
  background-color: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 20px;
  width: min(250px, 100%);
  flex: 1 1 220px;
  max-width: 250px;
  height: 180px;
  text-align: center;
  padding: 20px;
  padding-bottom: 40px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

div.card-participantes h2,
div.card-merges h2,
div.card-date h2 {
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-secundario);
  margin: 8px;
}

.card-participantes {
  --accent-glow: rgba(16, 185, 129, 0.35);
}

.card-merges {
  --accent-glow: rgba(37, 99, 235, 0.35);
}

.card-date {
  --accent-glow: rgba(124, 58, 237, 0.35);
}

/* ==========================================================
   RANKING HEADER & BUSCA
   ========================================================== */
.ranking-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 20px;
  padding: 0 20px;
}

#busca-ranking {
  position: absolute;
  right: 20px;
  padding: 10px 15px;
  border-radius: 20px;
  border: 2px solid #8f8d8de2;
  background-color: var(--fundo);
  color: var(--texto);
  /* Fluido: acompanha telas estreitas sem depender só do breakpoint */
  width: clamp(130px, 30vw, 250px);
  outline: none;
  transition: width 0.4s ease-in-out, border-color 0.3s ease;
}

#busca-ranking:focus {
  border-color: var(--azul-principal);
}

/* ==========================================================
   TABELA E PÓDIO
   ========================================================== */
div.table-ranking {
  background-color: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 20px;
  width: 95%;
  max-width: 90.625rem;
  margin: 15px auto 0 auto;
  height: 21.875rem;
  text-align: center;
  padding: 20px;
  overflow-y: auto;
  overflow-x: auto;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);

  /* Barra de rolagem — Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--azul-principal) transparent;
}

/* Barra de rolagem — Chrome, Edge, Safari */
div.table-ranking::-webkit-scrollbar {
  width: 8px;
}

div.table-ranking::-webkit-scrollbar-track {
  background: transparent;
}

div.table-ranking::-webkit-scrollbar-thumb {
  background-color: var(--azul-principal);
  border-radius: 8px;
}

div.table-ranking h3 {
  font-weight: 600;
  text-align: center;
}

div.podium {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
  position: relative;
  cursor: pointer;
}

/* ==========================================================
   CARDS DO PÓDIO (1º / 2º / 3º)
   Mesma lógica: cor da medalha vira custom property, a regra
   de hover é escrita uma vez só (dentro de @media hover:hover)
   ========================================================== */
div.card-primeiro,
div.card-segundo,
div.card-terceiro {
  background-color: var(--superficie);
  border-radius: 20px;
  width: min(250px, 100%);
  flex: 1 1 220px;
  max-width: 250px;
  height: 150px;
  text-align: center;
  padding: 20px;
}

div.card-primeiro {
  border: 3px solid var(--ouro);
  box-shadow: inset 0 0 10px rgba(211, 175, 55, 0.4);
  --medal-color: var(--ouro);
  --medal-glow: rgba(211, 175, 55, 0.3);
}

div.card-segundo {
  border: 3px solid var(--prata);
  box-shadow: inset 0 0 10px rgba(203, 201, 193, 0.35);
  --medal-color: var(--prata);
  --medal-glow: rgba(203, 201, 193, 0.25);
}

div.card-terceiro {
  border: 3px solid var(--bronze);
  box-shadow: inset 0 0 10px rgba(158, 76, 0, 0.4);
  --medal-color: var(--bronze);
  --medal-glow: rgba(158, 76, 0, 0.3);
}

#primeiro {
  color: var(--ouro);
}

#segundo {
  color: var(--prata);
}

#terceiro {
  color: var(--bronze);
}

.destaque-xp {
  font-weight: bold;
  color: inherit;
  /* Puxa a cor pai (Ouro, Prata, Bronze ou o branco da tabela) */
  background-color: rgba(211, 175, 55, 0.1);
  /* Fundo dourado transparente */
  border-radius: 8px;
}

/* Garanta que o card tem position relative para prender a nuvem */
.card-podium {
  position: relative;
  cursor: pointer;
}

/* 1. BASE DA NUVEM */
.nuvem-premio {
  position: absolute;
  z-index: 10;
  background-color: #26313F;
  color: #000000;
  padding: 10px;
  border-radius: 20px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  /* Trava a largura pra nunca ultrapassar a tela em celulares
     (era uma das causas da barra de rolagem horizontal) */
  max-width: min(160px, 90vw);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;

  /* Estado inicial invisível */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.5s ease-in-out;
  pointer-events: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* 2. O GATILHO POR TOQUE/TECLADO — funciona em qualquer aparelho */
.card-podium:focus .nuvem-premio {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nuvem-centro {
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  /* Centraliza */
}

.card-podium:focus .nuvem-centro {
  transform: translateX(-50%) translateY(0);
  outline: none;
}

/* ==========================================================
   ESTILIZAÇÃO DOS LINKS DO GITHUB
   ========================================================== */
.github-link {
  color: inherit;
  /* Puxa a cor pai (Ouro, Prata, Bronze ou o branco da tabela) */
  text-decoration: none;
  /* Remove o sublinhado feio padrão */
  transition: opacity 0.3s ease;
  /* Transição suave */
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

th:nth-child(1),
td:nth-child(1) {
  width: 15%;
}

th:nth-child(2),
td:nth-child(2) {
  width: 40%;
}

th:nth-child(3),
td:nth-child(3) {
  width: 15%;
}

th:nth-child(4),
td:nth-child(4) {
  width: 15%;
}

th:nth-child(5),
td:nth-child(5) {
  width: 15%;
}

thead th {
  color: var(--texto-secundario);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--borda);
}

tbody tr {
  border-bottom: 1px solid var(--borda);
}

td,
th {
  padding: 12px 8px;
  text-align: center;
}

/* ==========================================================
   HOVER — isolado para dispositivos com mouse de verdade.
   Tudo que só faz sentido "passando o mouse por cima" mora
   aqui dentro. Em touch (celular/tablet), nada disto ativa,
   evitando o hover "grudado" depois de tocar na tela.
   ========================================================== */
@media (hover: hover) {

  .card-participantes:hover,
  .card-merges:hover,
  .card-date:hover {
    background-color: var(--superficie-hover);
    box-shadow: 0 8px 20px var(--accent-glow);
    transform: translateY(-10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  }

  .card-primeiro:hover,
  .card-segundo:hover,
  .card-terceiro:hover {
    box-shadow: inset 0 0 12px var(--medal-color), 0 8px 20px var(--medal-glow);
    transform: translateY(-10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card-podium:hover .nuvem-premio {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .card-podium:hover .nuvem-centro {
    transform: translateX(-50%) translateY(0);
  }

  .github-link:hover {
    opacity: 0.7;
    /* Dá um leve efeito de brilho/transparência ao passar o mouse */
    text-decoration: underline;
    /* Coloca o sublinhado apenas no hover para indicar que é clicável */
  }

  tbody tr:hover {
    background-color: var(--superficie-hover);
  }

  div.table-ranking::-webkit-scrollbar-thumb:hover {
    background-color: var(--roxo-criativo);
  }
}

/* ==========================================================
   TOQUE — equivalente ao hover para celulares/tablets/iPads.
   Não existe "passar o mouse" no touch, então usamos :active
   (o estado de "dedo pressionado na tela"), que é o efeito
   visual mais parecido no toque. Reaproveita as mesmas
   custom properties definidas para o hover, sem duplicar cor.
   ========================================================== */
@media (hover: none) {

  /* scrollbar-gutter só faz sentido em navegadores com barra de
     rolagem "clássica" (que ocupa espaço fixo). Touch usa barra
     "overlay" (flutua por cima, não empurra layout) — então essa
     reserva de espaço não tem função aqui, só desativa por
     segurança/limpeza. */
  html {
    scrollbar-gutter: auto;
  }

  .card-participantes:active,
  .card-merges:active,
  .card-date:active {
    background-color: var(--superficie-hover);
    box-shadow: 0 8px 20px var(--accent-glow);
    transform: translateY(-10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  }

  .card-primeiro:active,
  .card-segundo:active,
  .card-terceiro:active {
    box-shadow: inset 0 0 12px var(--medal-color), 0 8px 20px var(--medal-glow);
    transform: translateY(-10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .github-link:active {
    opacity: 0.7;
    text-decoration: underline;
  }

  tbody tr:active {
    background-color: var(--superficie-hover);
  }
}

/* ==========================================================
   REGRAS DE RESPONSIVIDADE — Tablets e notebooks pequenos
   (cobre iPad Pro/Air em paisagem e retrato, ~768–1180px)
   ========================================================== */
@media (max-width: 1500px) {
  div.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
  }

  #logo {
    position: static;
  }

  #stars {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #star-text {
    position: static;
  }

  /* Empilha "Ranking Geral" e a busca em vez de deixar os dois
     lado a lado (era isso que fazia a busca "flutuar" no meio
     em iPad/Surface) */
  .ranking-header {
    flex-direction: column;
    gap: 10px;
  }

  /* Estado "Fechado" da barra de busca no touch */
  #busca-ranking {
    position: relative;
    right: auto;
    width: clamp(110px, 35vw, 200px);
    margin: 0 auto;
    text-align: center;
  }

  /* Estado "Aberto" (quando recebe o clique/foco) */
  #busca-ranking:focus {
    width: 90%;
    max-width: 350px;
    text-align: left;
  }
}

/* ==========================================================
   REGRAS DE RESPONSIVIDADE — Celulares
   ========================================================== */
@media (max-width: 600px) {
  div.card-participantes,
  div.card-merges,
  div.card-date,
  div.card-primeiro,
  div.card-segundo,
  div.card-terceiro {
    flex: 1 1 100%;
    max-width: 320px;
    height: auto;
    padding-bottom: 24px;
  }

  div.table-ranking {
    width: 100%;
    padding: 12px;
  }

  /* Cabeçalho da tabela estava sobrepondo (MERGES/REVIEWS/XP
     não cabiam nos 15% da coluna e transbordavam por cima da
     vizinha). Reduzimos fonte/padding e redistribuímos a largura.
     white-space: nowrap evita que palavras curtas como "POSIÇÃO"
     quebrem no meio (ex: "O" isolado na linha de baixo). */
  thead th {
    font-size: 9.5px;
    letter-spacing: 0;
    padding: 8px 2px;
    white-space: nowrap;
    /* Se o texto não couber, ele é cortado com "..." dentro da
       própria célula, em vez de vazar pra fora da tabela (era
       essa a causa real da barra horizontal) */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  td,
  th {
    padding: 8px 4px;
  }

  /* word-break só entra na coluna Nome, onde nomes de usuário
     longos realmente precisam poder quebrar */
  td:nth-child(2) {
    word-break: break-word;
  }

  th:nth-child(1),
  td:nth-child(1) {
    width: 14%;
  }

  th:nth-child(2),
  td:nth-child(2) {
    width: 30%;
  }

  th:nth-child(3),
  td:nth-child(3) {
    width: 19%;
  }

  th:nth-child(4),
  td:nth-child(4) {
    width: 19%;
  }

  th:nth-child(5),
  td:nth-child(5) {
    width: 18%;
  }
}