/* sg-auth.css — base visual das páginas de conta (/login, /register, /rules).
 *
 * 🔑 UM ARQUIVO, TRÊS PÁGINAS. A `landing.html` carrega o próprio CSS inline (ela é anterior a isto e
 * fica como está). Daqui pra frente, página nova de conta usa ESTE arquivo — três cópias do mesmo CSS
 * divergem no primeiro ajuste, e o sintoma é a tela de login parecer de outro jogo que a de cadastro.
 *
 * Os tokens são os MESMOS da landing (copiados de lá, não inventados): quem chega pela landing e clica
 * em "Create account" não pode sentir que trocou de produto.
 */
/* ---- fontes SERVIDAS POR NÓS -------------------------------------------------------------------
 * Cinzel (display) + Barlow (texto) são o que carrega a maior parte do caráter da tela — trocá-las por
 * system-ui deixa tudo com cara de formulário genérico.
 *
 * 🔑 SERVIDAS DO NOSSO DOMÍNIO, não do CDN do Google (decisão do dev, 2026-08-06). Três motivos:
 *  · a tela de LOGIN não pode depender de um terceiro estar no ar;
 *  · o `start_offline.bat` roda sem internet, e uma fonte remota deixaria a tela quebrada no dev;
 *  · CDN de fonte vê o IP de cada jogador que abre a página — dado de terceiro sem contrapartida.
 * São 104KB (subset latin). O Cinzel é VARIÁVEL: os pesos 600 e 700 vinham byte a byte idênticos do
 * Google, então é um arquivo só, e o navegador interpola o peso.
 *
 * `font-display: swap` de propósito: com `block`, a fonte lenta esconde o formulário; com `swap`, ele
 * aparece na fonte de sistema e troca. Texto legível na hora vale mais que a troca visível.
 */
@font-face{font-family:Cinzel;src:url(/assets/fonts/cinzel.woff2) format('woff2');
  font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/barlow-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/barlow-500.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/barlow-600.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  /* ⚠️ NÃO trocar o fallback por `var(--serif)`: variável CSS auto-referente é INVÁLIDA e some, levando
     junto todo texto que depende dela. Foi o que uma substituição em massa produziu aqui. */
  --serif:Cinzel,Georgia,"Times New Roman",serif;
  --sans:Barlow,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bg:#0b0e13;
  --ink:#ece6d8; --muted:#8b93a1; --faint:#5b6270;
  --gold:#e8b84b; --gold-2:#cf9f3a; --gold-ink:#241a06;
  --line:rgba(232,184,75,.16); --line-soft:rgba(255,255,255,.08);
  --panel:rgba(13,17,24,.62);
  --ok:#5fbf7a; --bad:#ff8f8f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  color:var(--ink);background:var(--bg);min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* fundo: a mesma arte da landing, com o mesmo tratamento */
.bg{position:fixed;inset:0;z-index:0;background:url(/assets/images/splash-art-login.png) center/cover no-repeat;
  filter:grayscale(.15) brightness(.62) contrast(1.02)}
.scrim{position:fixed;inset:0;z-index:1;background:
  radial-gradient(130% 100% at 50% 0%,rgba(11,14,19,.3),rgba(11,14,19,.82) 62%,var(--bg)),
  linear-gradient(180deg,rgba(11,14,19,.55),rgba(11,14,19,.2) 34%,var(--bg))}
.wrap{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:34px 18px}

/* ---- marca ACIMA do cartão (não dentro) ------------------------------------------------------ */
/* O logo fora da moldura é o que faz a tela parecer a porta de entrada do jogo, e não um formulário
   que por acaso tem uma imagem no topo. Ele fica na arte, o cartão fica sobre ela. */
.marca{display:flex;flex-direction:column;align-items:center;margin-bottom:22px}
.marca img{width:200px;height:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))}
.marca .tag{margin-top:9px;font:400 13px var(--sans);letter-spacing:3.64px;text-transform:uppercase;
  color:#f0d99a;text-shadow:0 1px 6px rgba(0,0,0,.8)}

/* Discord abaixo do cartão, como na referência */
.discord{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:22px;
  font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(236,230,216,.8);
  text-shadow:0 1px 6px rgba(0,0,0,.8);transition:color .15s}
.discord:hover{color:var(--gold)}
.discord svg{width:19px;height:19px;color:#7d8cf5}

/* versão, canto inferior direito — é o que se pede pro jogador quando ele reporta bug */
.versao{position:fixed;right:14px;bottom:11px;z-index:3;font:600 10.5px var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(236,230,216,.3);pointer-events:none}

/* Tela baixa: o cartão de cadastro tem 4 campos + termos + captcha e é ele quem estoura primeiro.
   Encolhe a MARCA (que é decoração) em vez de deixar o formulário sair da viewport.
   ⚠️ `width`, não `height` — o logo passou a ser dimensionado pela largura, e mexer na altura aqui
   brigaria com o `height:auto` em vez de encolher. */
@media (max-height:820px){
  .marca img{width:150px}
  .marca{margin-bottom:14px}
  .marca .tag{font-size:11.5px;letter-spacing:2.6px}
  .discord{margin-top:14px}
}

/* ---- o cartão -------------------------------------------------------------------------------- */
.card{width:100%;max-width:372px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:24px 24px 20px;backdrop-filter:blur(6px);box-shadow:0 18px 50px rgba(0,0,0,.55)}
/* título em Cinzel, 15px/700, spacing 3.3px — os números são da referência, medidos no navegador */
.card h1{font:700 15px/1.3 var(--serif);letter-spacing:3.3px;text-align:center;
  color:var(--gold);margin-bottom:20px;text-transform:uppercase}
.brand{display:flex;justify-content:center;margin-bottom:18px}
.brand img{height:44px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}

/* ---- campos ---------------------------------------------------------------------------------- */
.field{position:relative;margin-bottom:11px}
/* 🔴 `> svg`, NÃO `svg` — o descendente pegava o ícone DENTRO do botão do olho e quebrava os dois.
 * Medido no jogo (2026-08-06): o svg do botão virava `position:absolute`, saía do fluxo, e o botão
 * colapsava pra 16×16 (só o padding). Pior, o ícone era reposicionado em `left:13px` DO BOTÃO e
 * terminava em x=1127 enquanto a área clicável ficava em 1099–1115 — o olho VISÍVEL estava fora do
 * alvo, então o clique caía no input. O handler sempre esteve certo; a caixa é que estava em outro
 * lugar. Seletor descendente em componente que aninha é a família do "esconder subindo o DOM sem freio". */
.field > svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  color:var(--faint);pointer-events:none}
.field input{width:100%;height:48px;padding:0 13px 0 38px;font:400 13.5px var(--sans);color:var(--ink);
  background:rgba(0,0,0,.34);border:1px solid rgba(140,165,190,.16);border-radius:8px;outline:none;
  transition:border-color .15s,background .15s}
.field input::placeholder{color:var(--faint);letter-spacing:.9px;font-size:12.5px;text-transform:uppercase}
.field input:focus{border-color:var(--line);background:rgba(255,255,255,.06)}
/* 🔒 o olho de "mostrar senha" é BOTÃO, não ícone decorativo: precisa de foco e de rótulo pra leitor de
   tela, senão quem navega por teclado não alcança. */
/* alvo de toque de 34px: o ícone tem 16, mas dedo em celular não acerta 16px — e o botão precisa ser
   MAIOR que o ícone, não do tamanho dele. */
.field .eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:none;
  cursor:pointer;color:var(--faint);width:34px;height:34px;display:flex;align-items:center;
  justify-content:center;border-radius:7px;padding:0}
/* o ícone não recebe clique: o alvo é sempre o BOTÃO, senão `event.target` varia conforme onde o dedo
   caiu (svg ou button) e todo handler futuro precisa lembrar disso. */
.field .eye svg{width:16px;height:16px;display:block;pointer-events:none}
.field .eye:hover{color:var(--muted)}
.field .eye:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* ---- aceite dos termos ------------------------------------------------------------------------ */
.terms{display:flex;gap:10px;align-items:flex-start;margin:15px 0 14px}
.terms input[type=checkbox]{appearance:none;flex:0 0 17px;width:17px;height:17px;margin-top:1px;
  border:1px solid var(--line-soft);border-radius:4px;background:rgba(255,255,255,.04);cursor:pointer;
  position:relative;transition:border-color .15s,background .15s}
.terms input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
.terms input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--gold-ink);border-width:0 2px 2px 0;transform:rotate(42deg)}
.terms input[type=checkbox]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.terms label{font:12px/1.55 var(--sans);color:var(--muted);cursor:pointer}
.terms a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

/* ---- botões ---------------------------------------------------------------------------------- */
.btn{width:100%;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);border-radius:9px;transition:background .15s,color .15s,border-color .15s,transform .04s;
  padding:13px 16px;font-weight:600;letter-spacing:.1em;font-size:12.5px;text-transform:uppercase}
.btn:active{transform:translateY(1px)}
.btn[disabled]{cursor:not-allowed;opacity:.5}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-gold:hover:not([disabled]){background:var(--gold-2)}
.btn-ghost{background:transparent;color:var(--gold);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(232,184,75,.06)}
.btn + .btn{margin-top:10px}

/* ---- avisos ---------------------------------------------------------------------------------- */
.msg{display:none;font:12px/1.5 var(--sans);margin-top:12px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03)}
.msg.bad{display:block;color:var(--bad);border-color:rgba(255,143,143,.25)}
.msg.ok{display:block;color:var(--ok);border-color:rgba(95,191,122,.25)}
.hint{font:11.5px/1.55 var(--sans);color:var(--faint);margin-top:12px;text-align:center}
.hint a{color:var(--gold)}

/* separador "or" */
.sep{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--faint);font:11px var(--sans);
  letter-spacing:.16em;text-transform:uppercase}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line-soft)}

/* o slot do captcha some enquanto não há widget — caixa vazia reservando espaço parece defeito */
#sg-captcha-slot{margin:14px 0 4px;display:flex;justify-content:center}
#sg-captcha-slot:empty{display:none}

/* ---- páginas de texto (/rules) ---------------------------------------------------------------- */
.doc{width:100%;max-width:820px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:34px 34px 40px;backdrop-filter:blur(9px)}
.doc h1{font:600 24px/1.25 var(--serif);letter-spacing:.05em;color:var(--gold);margin-bottom:6px}
.doc h2{font:600 17px/1.3 var(--serif);letter-spacing:.04em;color:var(--gold);
  margin:34px 0 10px;padding-top:22px;border-top:1px solid var(--line-soft)}
.doc h2:first-of-type{border-top:none;padding-top:0}
.doc h3{font:600 13.5px var(--sans);letter-spacing:.05em;color:var(--ink);margin:20px 0 7px;text-transform:uppercase}
.doc p,.doc li{font:14px/1.75 var(--sans);color:var(--muted);margin-bottom:11px}
.doc ul,.doc ol{padding-left:20px;margin-bottom:12px}
.doc li{margin-bottom:6px}
.doc strong{color:var(--ink);font-weight:600}
.doc a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.doc .atualizado{font:11.5px var(--sans);color:var(--faint);margin-bottom:22px}
.doc .indice{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:20px;
  border-bottom:1px solid var(--line-soft)}
.doc .indice a{font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.voltar{margin-top:20px;text-align:center}
.voltar a{font:12px var(--sans);color:var(--muted)}
.voltar a:hover{color:var(--gold)}

@media (max-width:520px){
  .card{padding:22px 18px 18px}
  .doc{padding:26px 20px 30px}
}