/*
 * EloRank DS — design system compartilhado de todos os projetos do
 * elorank-games.com.br. Base: estilo "Raycast — Midnight command center"
 * (styles.refero.design), adaptado: cada projeto tem UMA cor de destaque
 * própria (--accent), definida por data-jogo no <html> ou <body>.
 *
 * Uso em qualquer projeto:
 *   <script src="https://elorank-games.com.br/ds/elorank.js"></script>
 *   <link rel="stylesheet" href="https://elorank-games.com.br/ds/elorank.css">
 *   <html lang="pt-BR" data-jogo="valorant">
 *
 * Regras completas em DESIGN.md (raiz do repositório elorank-games).
 */

/* ---------- Tokens ---------- */
/* Tema escuro é o padrão (e a identidade da marca). O claro entra por
 * data-theme="light" no <html>, aplicado pelo /ds/elorank.js conforme a escolha
 * salva do visitante ou, sem escolha, o tema do sistema. */
:root {
  /* Superfícies (do mais fundo ao mais alto) */
  --canvas: #040506;
  --card: #07080a;
  --recessed: #111214;
  --badge: #1b1c1e;

  /* Bordas */
  --slate: #2f3031;
  --line: #363739;

  /* Texto */
  --text: #ffffff;
  --text-2: #9c9c9d;
  --text-3: #6a6b6c;

  /* Ação neutra (o único botão preenchido do sistema): no escuro, botão
   * claro; no claro, botão escuro. */
  --btn-bg: #e6e6e6;
  --btn-fg: #454647;
  --btn-bg-hover: #ffffff;
  --btn-fg-hover: #1b1c1e;

  /* Vidro do menu e atmosfera do topo */
  --nav-bg: rgba(7, 8, 10, 0.6);
  --atmos-wash: rgba(4, 63, 150, 0.55);
  --atmos-wash-2: rgba(6, 18, 37, 0.2);
  --atmos-bar: 0.45;
  --field-bg: rgba(255, 255, 255, 0.05);

  /* Destaque do projeto — o hub usa o coral da marca. */
  --accent: #ff6363;
  --accent-tint: #452324;
  --accent-glow: rgba(255, 99, 99, 0.35);

  /* Status (só para feedback de formulário/resultado, nunca decoração) */
  --ok: #59d499;
  --info: #56c2ff;
  --erro: #ff6b6b;

  /* Tipografia */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Espaçamento — grade de 8px */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s8: 64px;
  --s10: 80px;
  --s12: 96px;
  --s15: 120px;

  /* Raios */
  --r-badge: 6px;
  --r-ctrl: 8px;
  --r-card: 16px;
  --r-card-lg: 20px;
  --r-pill: 9999px;

  /* Elevação: o "keycap" (inset), nunca sombra projetada em cards */
  --key: rgba(255, 255, 255, 0.05) 0 1px 0 0 inset, rgba(255, 255, 255, 0.25) 0 0 0 1px,
    rgba(0, 0, 0, 0.2) 0 -1px 0 0 inset;
  --key-soft: rgba(255, 255, 255, 0.1) 0 1px 0 0 inset, rgba(255, 255, 255, 0.06) 0 0 0 1px inset;
  --lift: rgba(0, 0, 0, 0.03) 0 7px 3px 0, rgba(0, 0, 0, 0.25) 0 4px 4px 0;

  --max: 1200px;
  --gutter: 24px;

  color-scheme: dark;
}

/* Tema claro: mesma estrutura, papel branco e tinta quase preta. */
:root[data-theme="light"] {
  --canvas: #f6f6f7;
  --card: #ffffff;
  --recessed: #efeff1;
  --badge: #e8e8eb;

  --slate: #d6d6db;
  --line: #cacad0;

  --text: #0b0c0e;
  --text-2: #4f5056;
  --text-3: #6c6d73;

  --btn-bg: #1b1c1e;
  --btn-fg: #ffffff;
  --btn-bg-hover: #000000;
  --btn-fg-hover: #ffffff;

  --nav-bg: rgba(255, 255, 255, 0.72);
  --atmos-wash: rgba(99, 161, 255, 0.28);
  --atmos-wash-2: rgba(99, 161, 255, 0.06);
  --atmos-bar: 0.22;
  --field-bg: #ffffff;

  --accent: #e5484d;
  --accent-tint: #fde9e9;
  --accent-glow: rgba(229, 72, 77, 0.28);

  --ok: #18794e;
  --info: #0b68cb;
  --erro: #cd2b31;

  --key: rgba(0, 0, 0, 0.09) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 1px 2px 0, rgba(255, 255, 255, 1) 0 1px 0 0 inset;
  --key-soft: rgba(0, 0, 0, 0.07) 0 0 0 1px inset;
  --lift: rgba(0, 0, 0, 0.08) 0 1px 2px 0, rgba(0, 0, 0, 0.06) 0 4px 8px -2px;

  color-scheme: light;
}

/* Uma cor por projeto, nos dois temas. Projeto novo = um bloco em cada tema.
 * data-jogo pode estar no próprio <html> (página de um jogo) ou num elemento
 * dentro dele (cards da página inicial). */
[data-jogo="valorant"] {
  --accent: #ff4655;
  --accent-tint: #3a1519;
  --accent-glow: rgba(255, 70, 85, 0.35);
}
[data-jogo="lol"] {
  --accent: #c8aa6e;
  --accent-tint: #2c2416;
  --accent-glow: rgba(200, 170, 110, 0.3);
}
[data-jogo="tft"] {
  --accent: #a98bff;
  --accent-tint: #221a3a;
  --accent-glow: rgba(169, 139, 255, 0.32);
}
:root[data-theme="light"][data-jogo="valorant"],
[data-theme="light"] [data-jogo="valorant"] {
  --accent: #d92d3f;
  --accent-tint: #fde7e9;
  --accent-glow: rgba(217, 45, 63, 0.26);
}
:root[data-theme="light"][data-jogo="lol"],
[data-theme="light"] [data-jogo="lol"] {
  --accent: #8a6a2c;
  --accent-tint: #f6efe0;
  --accent-glow: rgba(138, 106, 44, 0.26);
}
:root[data-theme="light"][data-jogo="tft"],
[data-theme="light"] [data-jogo="tft"] {
  --accent: #6e4fe0;
  --accent-tint: #efeafe;
  --accent-glow: rgba(110, 79, 224, 0.26);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "calt", "kern", "liga", "ss03";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: var(--accent);
  color: var(--canvas);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout ---------- */
.er-container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.er-section {
  padding-block: var(--s12);
}
/* Duas seções seguidas não somam o espaço: fica um intervalo só. */
.er-section + .er-section {
  padding-top: 0;
}
@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }
  .er-section {
    padding-block: var(--s8);
  }
}

/* ---------- Tipografia ---------- */
.er-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.er-display {
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.004em;
  margin: 0;
  text-wrap: balance;
}
.er-h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.er-h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0;
}
.er-lead {
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}
.er-muted {
  color: var(--text-2);
}
.er-mono {
  font-family: var(--mono);
}

/* ---------- Navegação (pílula com vidro) ---------- */
.er-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: var(--s2);
}
.er-nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 52px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--nav-bg);
  backdrop-filter: blur(48px) saturate(140%);
  -webkit-backdrop-filter: blur(48px) saturate(140%);
}
.er-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.er-brand-mark {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.er-nav-links {
  display: flex;
  gap: var(--s3);
  margin-inline: auto;
  font-size: 14px;
  font-weight: 500;
}
.er-nav-links a {
  color: var(--text-2);
  transition: color 0.15s ease;
}
.er-nav-links a:hover,
.er-nav-links a[aria-current="page"] {
  color: var(--text);
}
@media (max-width: 760px) {
  .er-nav-links {
    display: none;
  }
  .er-nav {
    justify-content: space-between;
  }
}

/* ---------- Botões ---------- */
.er-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-ctrl);
  font: 500 14px/1 var(--font);
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.er-btn:active {
  transform: translateY(1px);
}
/* Primário: neutro de propósito (Mist). Nada de botão colorido. */
.er-btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--lift);
}
.er-btn-primary:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
}
.er-btn-ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--slate);
}
.er-btn-ghost:hover {
  background: var(--recessed);
  box-shadow: inset 0 0 0 1px var(--line);
}
.er-btn-sm {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
}
.er-btn:disabled,
.er-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Cards ---------- */
.er-card {
  position: relative;
  background: var(--card);
  border-radius: var(--r-card);
  padding: var(--s3);
  box-shadow: var(--key);
}
.er-card-edge {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line), var(--key-soft);
}
/* Card que leva a algum lugar: ganha o brilho do destaque no hover. */
a.er-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.er-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 50% -10%, var(--accent-tint), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
a.er-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--key), 0 0 0 1px var(--accent-glow), 0 20px 60px -20px var(--accent-glow);
}
a.er-card:hover::before {
  opacity: 1;
}
a.er-card > * {
  position: relative;
}

/* ---------- Ícone circular ---------- */
.er-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 99999px;
  background: var(--accent-tint);
  color: var(--accent);
  box-shadow: var(--key-soft);
  flex: none;
}
.er-icon svg {
  width: 22px;
  height: 22px;
}

/* ---------- Badge / tag ---------- */
.er-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-badge);
  background: var(--badge);
  color: var(--text-2);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.er-badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Formulário ---------- */
.er-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-ctrl);
  background: var(--field-bg);
  box-shadow: inset 0 0 0 1px var(--slate);
  color: var(--text);
  font: 400 16px/1 var(--font);
  transition: box-shadow 0.15s ease;
}
.er-input::placeholder {
  color: var(--text-3);
}
.er-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.er-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

/* ---------- Bloco de código / comando ---------- */
.er-code {
  display: block;
  padding: 12px 16px;
  border-radius: var(--r-ctrl);
  background: var(--recessed);
  box-shadow: inset 0 0 0 1px var(--badge);
  color: var(--text);
  font: 400 13px/1.6 var(--mono);
  overflow-x: auto;
  white-space: pre;
}

/* ---------- Atmosfera do hero ---------- */
.er-atmos {
  position: absolute;
  inset: -20% 0 auto 0;
  height: 900px;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.er-atmos::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 30%, var(--atmos-wash), var(--atmos-wash-2) 60%, transparent 75%);
}
.er-atmos::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22%;
  width: 70%;
  height: 120px;
  transform: translateX(-50%) rotate(-12deg);
  background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent) 65%, transparent);
  filter: blur(60px);
  opacity: var(--atmos-bar);
}

/* ---------- Rodapé ---------- */
.er-footer {
  border-top: 1px solid var(--badge);
  padding-block: var(--s6);
  color: var(--text-3);
  font-size: 13px;
}
.er-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font: 400 12px/1.6 var(--mono);
  color: var(--text-3);
}
.er-meta > * + *::before {
  content: "|";
  margin-right: 12px;
  color: var(--slate);
}

/* ---------- Botão de tema (claro/escuro) ---------- */
.er-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--r-ctrl);
  background: transparent;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--slate);
  cursor: pointer;
  flex: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.er-theme-toggle:hover {
  color: var(--text);
  background: var(--recessed);
}
.er-theme-toggle svg {
  width: 16px;
  height: 16px;
}
/* Mostra o ícone do tema PARA O QUAL o botão leva. */
.er-theme-toggle .er-i-sol,
:root[data-theme="light"] .er-theme-toggle .er-i-lua {
  display: block;
}
.er-theme-toggle .er-i-lua,
:root[data-theme="light"] .er-theme-toggle .er-i-sol {
  display: none;
}
.er-nav-acoes {
  display: flex;
  align-items: center;
  gap: var(--s1);
}

/* Troca de tema suave: o elorank.js liga esta classe por um instante. */
.er-tema-trocando,
.er-tema-trocando *,
.er-tema-trocando *::before,
.er-tema-trocando *::after {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease,
    fill 0.25s ease !important;
}

/* Âncoras não ficam escondidas atrás do menu fixo. */
[id] {
  scroll-margin-top: 88px;
}

/* =====================================================================
 * Componentes de formulário e de página de projeto (busca + comando).
 * Usados pelas páginas de rank; servem a qualquer projeto novo.
 * ===================================================================== */

/* Nome do projeto no menu, ao lado da marca: "EloRank Games / TFT".
 * Com href="#topo" e data-er-topo, clicar sobe a página suavemente. */
.er-nav-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.er-nav-projeto {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.er-nav-projeto::before {
  content: "/";
  color: var(--slate);
}
.er-nav-projeto:hover {
  color: var(--text);
}
@media (max-width: 480px) {
  .er-nav-marca .er-brand-nome {
    display: none;
  }
}

/* Campo de formulário e linha com duas colunas. */
.er-field {
  display: grid;
  gap: 8px;
  margin-bottom: var(--s2);
}
.er-field > .er-label {
  margin: 0;
}
.er-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) {
  .er-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Seleção: mesmo poço do campo de texto, com seta. */
.er-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8b90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.er-select option {
  background: var(--card);
  color: var(--text);
}
textarea.er-input {
  height: auto;
  min-height: 88px;
  padding: 12px;
  resize: vertical;
  font: 400 14px/1.6 var(--mono);
}

/* Abas em pílula (alternar modo de busca, idioma etc.). A aba ativa vira
 * uma "tecla" clara dentro de um trilho fundo. */
.er-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--recessed);
  box-shadow: inset 0 0 0 1px var(--badge), inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.er-seg button {
  position: relative;
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font: 500 13px/1 var(--font);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.er-seg button:hover {
  color: var(--text);
}
.er-seg button[aria-selected="true"],
.er-seg button[aria-pressed="true"] {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--key);
}
.er-seg button:focus-visible {
  outline-offset: 1px;
}
.er-seg-sm {
  padding: 3px;
  gap: 2px;
}
.er-seg-sm button {
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

/* Chips clicáveis (variáveis do template). Pílula com o "(" ")" apagado e o
 * nome em destaque; no hover, ganham a cor do projeto. */
.er-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.er-chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--recessed);
  box-shadow: inset 0 0 0 1px var(--badge);
  color: var(--text);
  font: 400 12px/1 var(--mono);
  cursor: pointer;
  transition: color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.er-chip .er-chip-par {
  color: var(--text-3);
  transition: color 0.15s ease;
}
.er-chip:hover {
  color: var(--accent);
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent-glow);
}
.er-chip:hover .er-chip-par {
  color: var(--accent);
  opacity: 0.6;
}
.er-chip:active {
  transform: translateY(1px);
}

/* Código para copiar: bloco + botão "Copiar" ao lado. */
.er-copy {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.er-copy .er-code {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.er-copy .er-btn {
  height: auto;
  min-height: 40px;
}

/* Prévia do chat da live. */
.er-chat {
  border-radius: 12px;
  background: var(--recessed);
  box-shadow: inset 0 0 0 1px var(--badge);
  overflow: hidden;
}
.er-chat-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--badge);
}
.er-chat-linha {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}
.er-chat-quem {
  margin-right: 8px;
  font: 500 13px/1 var(--mono);
  color: var(--accent);
}

/* Aviso flutuante (copiado, erro de busca...). */
.er-toast {
  position: fixed;
  top: 84px;
  right: 24px;
  z-index: 200;
  max-width: 360px;
  padding: 12px 16px 12px 14px;
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--key), 0 12px 32px -12px rgba(0, 0, 0, 0.45);
  border-left: 3px solid var(--info);
  color: var(--text);
  font-size: 14px;
  animation: er-toast-in 0.25s ease;
  transition: opacity 0.3s ease;
}
.er-toast-ok {
  border-left-color: var(--ok);
}
.er-toast-erro {
  border-left-color: var(--erro);
}
@keyframes er-toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@media (max-width: 520px) {
  .er-toast {
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

/* Cabeçalho de card de etapa: "Buscar jogador" + "Passo 1". */
.er-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

/* Some com fade (resultado que aparece depois da busca). */
.er-surge {
  animation: er-toast-in 0.3s ease;
}
[hidden] {
  display: none !important;
}