:root {
  --fundo: #000;
  --painel: #0d0f0b;
  --borda: #262b20;
  --texto: #f1f3ee;
  --suave: #a3a99b;
  --verde: #7ed321;
  --verde-escuro: #5fa516;
  --prata: #c9ced6;
  --ouro: #f5c542;
  --bronze: #d08c4f;
  --twitch: #9146ff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Tela inicial: logo de fundo ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
}
.hero-logo {
  flex: 1;
  width: 100%;
  min-height: 280px;
  background: url("/img/logo.webp") center / contain no-repeat;
}

.painel {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--twitch);
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.botao:hover { filter: brightness(1.1); }
.botao svg { width: 20px; height: 20px; }
.botao-dono { background: var(--verde-escuro); font-size: 0.95rem; }

.botao-sec {
  padding: 6px 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--suave);
  font: inherit;
  cursor: pointer;
}
.botao-sec:hover { color: var(--texto); border-color: var(--suave); }

.usuario {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--painel);
  text-align: left;
}
.usuario img { width: 44px; height: 44px; border-radius: 50%; background: var(--borda); }
.usuario-info { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.usuario-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-info span { color: var(--verde); font-weight: 600; font-size: 0.92rem; }

.live { margin: 0; font-weight: 700; letter-spacing: 0.02em; }
.live.no-ar { color: #ff4d4d; }
.live.offline { color: var(--suave); font-weight: 500; }

.dica { margin: 0; color: var(--suave); font-size: 0.92rem; }
.link-twitch { color: var(--verde); font-weight: 600; text-decoration: none; }
.link-twitch:hover { text-decoration: underline; }

.aviso {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--verde-escuro);
  border-radius: 8px;
  background: rgba(126, 211, 33, 0.1);
}
.aviso.erro { border-color: #eb0400; background: rgba(235, 4, 0, 0.12); }

/* ---------- Ranking ---------- */
.ranking {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px 64px;
}
.ranking h2 { margin: 0 0 12px; font-size: 1.3rem; text-align: center; }
.ranking ol {
  list-style: none;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--painel);
  counter-reset: pos;
}
.ranking li {
  counter-increment: pos;
  display: grid;
  grid-template-columns: 32px 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-bottom: 1px solid var(--borda);
}
.ranking li:last-child { border-bottom: 0; }
.ranking li::before { content: counter(pos) "º"; color: var(--suave); font-weight: 700; text-align: right; }
.ranking li:nth-child(1)::before { color: var(--ouro); }
.ranking li:nth-child(2)::before { color: var(--prata); }
.ranking li:nth-child(3)::before { color: var(--bronze); }
.ranking li.eu { background: rgba(126, 211, 33, 0.12); border-radius: 6px; }
.ranking img, .ranking .inicial { width: 36px; height: 36px; border-radius: 50%; background: var(--borda); object-fit: cover; }
.ranking .inicial { display: grid; place-items: center; color: var(--verde); font-weight: 700; }
.ranking .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .min { color: var(--verde); font-weight: 600; font-variant-numeric: tabular-nums; }
.vazio { color: var(--suave); text-align: center; }