/* =========================================================================
   Telas de conta (entrar, criar conta, recuperar senha).

   Uma coluna centrada sobre a arte escura do jogo: logo, cartão do formulário,
   links do site e a nota de rodapé. Os ícones dos campos são SVG em data: URI
   — a CSP das rotas de conta não bloqueia, mas arquivo externo aqui seria
   uma requisição a mais numa página que precisa abrir rápido.
   ========================================================================= */

@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/poppins-700.woff2') format('woff2');
}

:root{
  color-scheme: dark;
  --ink:#08070a; --card:#161519; --card-2:#1c1b20;
  --paper:#eceaf0; --paper-strong:#fff; --muted:#9b98a4;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18);
  --red:#e02020; --red-hi:#f03131; --gold:#d9b774; --green:#57c98a;
  --sans:'Poppins','Segoe UI',system-ui,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  min-height:100vh; color:var(--paper); font-family:var(--sans); font-size:14px;
  background:var(--ink) url('/assets/images/auth-bg.webp') 50% 50%/cover no-repeat fixed;
  display:flex; flex-direction:column; align-items:center;
  padding:44px 20px 40px;
}
a{ color:var(--red); text-decoration:none; }
a:hover{ color:var(--red-hi); }

.wrap{ width:min(470px,100%); margin:auto 0; }
.wrap.wide{ width:min(560px,100%); }

.brand{ display:flex; justify-content:center; }
.brand img{ display:block; height:180px; width:auto; }

/* ------------------------------------------------------------- cartão --- */
.card{
  padding:34px 32px 30px; border-radius:18px;
  background:linear-gradient(180deg,rgba(28,27,32,.96),rgba(18,17,21,.97));
  border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(3px);
}
.card h1{
  margin:0 0 8px; font-size:24px; font-weight:600; line-height:1.25;
  color:var(--paper-strong); letter-spacing:-.01em;
}
.card .sub{ margin:0 0 26px; color:var(--muted); font-size:13.5px; line-height:1.6; }
.card.center h1, .card.center .sub{ text-align:center; }

/* ------------------------------------------------------------- campos --- */
label{ display:block; margin:0 0 16px; }
label > span{
  display:block; margin:0 0 8px;
  color:var(--paper); font-size:13.5px; font-weight:500;
}
.field{ position:relative; display:block; }
.field > input{
  width:100%; height:46px; padding:0 14px 0 42px;
  border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,.035); color:var(--paper);
  font:inherit; font-size:14px; transition:border-color .15s, background .15s;
}
.field > input::placeholder{ color:#6f6c78; }
.field > input:focus{
  outline:none; border-color:rgba(224,32,32,.55);
  background:rgba(255,255,255,.05); box-shadow:0 0 0 3px rgba(224,32,32,.13);
}
.field > input:disabled{ opacity:.6; }
/* Ícone à esquerda: máscara para herdar a cor e ficar nítido em qualquer tela. */
.field::before{
  content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; background:#7d7a87;
  -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat;
  pointer-events:none;
}
.field--user{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.5-8 5.5V22h16v-2.5c0-3-3.6-5.5-8-5.5z'/%3E%3C/svg%3E"); }
.field--lock{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9h-2zM9 7a3 3 0 1 1 6 0v2H9V7z'/%3E%3C/svg%3E"); }
.field--mail{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.2-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E"); }
.field--key{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2a8 8 0 0 0-7.6 10.5L2 17v5h5v-3h3v-3h2.2A8 8 0 1 0 14 2zm3.5 5.5a1.8 1.8 0 1 1-3.6 0 1.8 1.8 0 0 1 3.6 0z'/%3E%3C/svg%3E"); }
/* Olho de mostrar/ocultar senha. */
.field .peek{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; padding:0; margin:0; border:0; border-radius:8px;
  background:transparent; cursor:pointer;
}
.field .peek::before{
  content:""; display:block; width:18px; height:18px; margin:0 auto;
  background:#7d7a87;
  -webkit-mask:var(--eye) center/contain no-repeat; mask:var(--eye) center/contain no-repeat;
  --eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.2 9.1 1 12c1.2 2.9 5.5 7 11 7s9.8-4.1 11-7c-1.2-2.9-5.5-7-11-7zm0 11.5A4.5 4.5 0 1 1 12 7.5a4.5 4.5 0 0 1 0 9zm0-2.3a2.2 2.2 0 1 0 0-4.4 2.2 2.2 0 0 0 0 4.4z'/%3E%3C/svg%3E");
}
.field .peek:hover::before{ background:var(--paper); }
.field .peek[aria-pressed="true"]::before{
  --eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.1 3.5 3.5 2.1l18.4 18.4-1.4 1.4-3.3-3.3c-1.6.8-3.4 1.4-5.2 1.4-5.5 0-9.8-4.1-11-7 .6-1.5 2-3.3 4-4.7L2.1 3.5zM12 5c5.5 0 9.8 4.1 11 7-.5 1.3-1.7 2.9-3.4 4.2l-3-3A4.5 4.5 0 0 0 10.8 7.4L8.6 5.2C9.7 5.1 10.8 5 12 5z'/%3E%3C/svg%3E");
}

.hint{ margin:-8px 0 16px; color:var(--muted); font-size:12px; line-height:1.55; }
.hint b{ color:#cfccd6; font-weight:600; }

/* --------------------------------------------------------- linha extra --- */
.row-extra{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:2px 0 22px; font-size:13px;
}
.check{ display:inline-flex; align-items:center; gap:9px; margin:0; color:var(--paper); cursor:pointer; }
.check input{ width:16px; height:16px; margin:0; accent-color:var(--red); cursor:pointer; }

/* ------------------------------------------------------------- botões --- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:48px; padding:0 18px; border:0; border-radius:10px;
  background:var(--red); color:#fff; font:inherit; font-size:15px; font-weight:600;
  cursor:pointer; transition:filter .15s, box-shadow .15s;
}
.btn:hover{ filter:brightness(1.08); box-shadow:0 8px 24px rgba(224,32,32,.28); }
.btn.ghost{
  background:transparent; color:var(--muted);
  border:1px solid var(--line-strong); font-weight:500;
}
.btn.ghost:hover{ color:var(--paper); box-shadow:none; }
.btn + .btn{ margin-top:10px; }

.foot-link{ margin:22px 0 0; text-align:center; color:var(--muted); font-size:13.5px; }
.foot-link a{ font-weight:600; }

/* ------------------------------------------------------------ recados --- */
.msg{
  padding:12px 14px; border-radius:10px; margin:0 0 18px;
  font-size:13.5px; line-height:1.55; border:1px solid var(--line);
}
.msg.error{ background:rgba(224,32,32,.12); border-color:rgba(224,32,32,.42); color:#ffc9c9; }
.msg.ok{ background:rgba(87,201,138,.12); border-color:rgba(87,201,138,.4); color:#bff0d3; }
.msg.info{ background:rgba(217,183,116,.10); border-color:rgba(217,183,116,.35); color:#f0e2c4; }

/* -------------------------------------------------------------- termo --- */
.terms-details{
  margin:6px 0 16px; padding:0 14px; border-radius:10px;
  border:1px solid rgba(217,183,116,.28); background:rgba(217,183,116,.06);
}
.terms-details summary{
  display:flex; align-items:center; gap:9px; padding:12px 0; cursor:pointer;
  color:var(--gold); font-size:12.5px; font-weight:600; list-style:none;
}
.terms-details summary::-webkit-details-marker{ display:none; }
.terms-details summary::before{
  content:""; width:14px; height:14px; flex:0 0 auto; background:var(--gold);
  -webkit-mask:var(--ch) center/contain no-repeat; mask:var(--ch) center/contain no-repeat;
  --ch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  transition:transform .15s;
}
.terms-details[open] summary::before{ transform:rotate(90deg); }
.terms-box{ font-size:12px; color:var(--muted); line-height:1.65; padding-bottom:12px; }
.terms-box h4{ color:var(--paper-strong); font-size:13px; margin:6px 0 8px; }
.terms-box ol{ padding-left:18px; display:grid; gap:7px; }
.terms-box b{ color:#cfccd6; }
.terms-fine{ margin-top:10px; font-size:11px; }
.terms-accept{
  display:flex; gap:10px; align-items:flex-start; margin:0 0 18px;
  font-size:12.5px; line-height:1.6; color:var(--muted);
}
.terms-accept input{ width:16px; height:16px; margin-top:2px; flex:0 0 auto; accent-color:var(--red); }
.terms-accept b{ color:#cfccd6; }

/* --------------------------------------------------- ficha de dados ----- */
.data{ margin:0 0 20px; border-top:1px solid var(--line); }
.data > div{
  display:flex; justify-content:space-between; gap:16px; padding:12px 0;
  border-bottom:1px solid var(--line); font-size:13.5px;
}
.data dt{ color:var(--muted); margin:0; }
.data dd{ margin:0; text-align:right; word-break:break-word; }
.tag{ font-size:11.5px; padding:3px 9px; border-radius:999px; }
.tag.ok{ background:rgba(87,201,138,.16); color:var(--green); }
.tag.pending{ background:rgba(217,183,116,.16); color:var(--gold); }
fieldset{ border:1px solid var(--line); border-radius:12px; padding:18px; margin:0 0 18px; }
legend{ padding:0 8px; color:var(--gold); font-size:13px; }
.links{ margin:18px 0 0; text-align:center; font-size:13.5px; color:var(--muted); }
.links a{ margin:0 8px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.g-recaptcha{ margin:2px 0 18px; }

/* ------------------------------------------------------------- rodapé --- */
.site-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px;
  margin:26px 0 0; font-size:13px;
}
.site-links a{ color:var(--muted); }
.site-links a:hover{ color:var(--paper); }
.site-note{ margin:14px 0 0; text-align:center; color:#6f6c78; font-size:11.5px; line-height:1.6; }

@media (max-width:520px){
  body{ padding:28px 14px 30px; }
  .brand img{ height:58px; }
  .card{ padding:26px 20px 24px; }
}