/* ============================================================
   BRTank — estilo compartilhado (index, cadastro, jogar)
   ============================================================ */

:root{
  --ouro1:#ffd75e; --ouro2:#f5a524; --ouro3:#d97706; --ouro4:#8a4b06;
  --txt:#f3e9d6; --fraco:#a99b83;
  --ok:#5ee08a; --erro:#ff8a8a;
  --painel:rgba(18,13,9,.90);
  --borda:#8a6a2a;
}

*{box-sizing:border-box; margin:0; padding:0}

body{
  min-height:100vh; color:var(--txt);
  font:15px/1.6 "Segoe UI",system-ui,-apple-system,sans-serif;
  background:#0b0a0f url('brtank-hero.jpg') center top / cover no-repeat fixed;
  position:relative;
}
/* escurece a arte pro texto respirar */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(0,0,0,.25), transparent 60%),
    linear-gradient(180deg, rgba(8,6,12,.55) 0%, rgba(8,6,12,.80) 45%, rgba(8,6,12,.94) 100%);
}
.tudo{position:relative; z-index:1}

/* ---- barra de topo ---------------------------------------- */
.topbar{
  background:linear-gradient(180deg,#1a1410,#120d0a);
  border-bottom:2px solid var(--borda);
  box-shadow:0 2px 14px rgba(0,0,0,.6);
  padding:9px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  font-size:12.5px; color:var(--fraco);
}
.topbar .marca{
  font-weight:800; font-size:15px; letter-spacing:.5px;
  background:linear-gradient(180deg,var(--ouro1),var(--ouro3));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.topbar .dir{margin-left:auto; display:flex; gap:16px; align-items:center}
.topbar a{color:var(--ouro1); text-decoration:none}
.topbar a:hover{text-decoration:underline}

.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 12px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:rgba(20,50,30,.7); border:1px solid #2f6b45; color:var(--ok);
}
.pill.off{background:rgba(50,20,22,.7); border-color:#6b2f33; color:var(--erro)}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor}
.pill.on .dot{animation:pisca 2s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.3}}

/* ---- cabecalho -------------------------------------------- */
.hero{padding:38px 20px 8px; text-align:center}
.hero h1{
  font-size:64px; line-height:.95; letter-spacing:-2px; font-weight:900;
  background:linear-gradient(180deg,#fff3c4 0%,var(--ouro1) 35%,var(--ouro2) 65%,var(--ouro3) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 3px 0 var(--ouro4)) drop-shadow(0 0 26px rgba(245,165,36,.45));
}
.hero .lema{margin-top:8px; color:#d8c9ac; font-size:15px; text-shadow:0 2px 6px rgba(0,0,0,.8)}

/* ---- painel (a moldura dourada) --------------------------- */
.painel{
  background:var(--painel);
  border:2px solid var(--borda);
  border-radius:14px;
  box-shadow:
    0 0 0 1px rgba(255,215,94,.14) inset,
    0 14px 40px rgba(0,0,0,.65);
  padding:24px;
  position:relative;
}
/* fitinha dourada no topo do painel */
.painel::before{
  content:''; position:absolute; left:22px; right:22px; top:-2px; height:2px;
  background:linear-gradient(90deg,transparent,var(--ouro1),transparent);
}
.painel h2{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ouro1); margin-bottom:16px; font-weight:700;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.painel h2 small{font-weight:400; text-transform:none; letter-spacing:0; color:var(--fraco); font-size:12px}

/* ---- formulario ------------------------------------------- */
label{display:block; font-size:12px; color:var(--fraco); margin:14px 0 6px; font-weight:600}
input[type=text],input[type=password]{
  width:100%; padding:12px 14px; font:inherit; color:var(--txt);
  background:rgba(6,5,8,.85);
  border:1px solid #4a3a20; border-radius:9px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input[type=text]:focus,input[type=password]:focus{
  border-color:var(--ouro2); box-shadow:0 0 0 3px rgba(245,165,36,.16);
}
input::placeholder{color:#6b5f4c}

.btn{
  display:block; width:100%; margin-top:22px; padding:14px;
  border:1px solid #a8730f; border-radius:10px; cursor:pointer;
  font:inherit; font-weight:800; font-size:16px; letter-spacing:.3px; color:#2a1a02;
  background:linear-gradient(180deg,#ffd75e,var(--ouro2) 55%,var(--ouro3));
  box-shadow:0 3px 0 var(--ouro4), 0 8px 20px rgba(217,119,6,.32);
  text-align:center; text-decoration:none;
  transition:filter .15s, transform .06s, box-shadow .06s;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(3px); box-shadow:0 0 0 var(--ouro4), 0 4px 12px rgba(217,119,6,.25)}
.btn.sec{
  background:linear-gradient(180deg,#3a3229,#241e18);
  color:var(--txt); border-color:#5a4a33; box-shadow:0 3px 0 #17120d;
}
.btn.sec:active{box-shadow:0 0 0 #17120d}

.sexo{display:flex; gap:20px; margin-top:6px}
.sexo label{display:inline-flex; align-items:center; gap:7px; margin:0; color:var(--txt); font-weight:400; font-size:14px}

/* ---- avisos ------------------------------------------------ */
.msg{padding:13px 16px; border-radius:10px; font-size:13.5px; line-height:1.55}
.msg.ok{background:rgba(18,48,28,.9); border:1px solid #2f6b45; color:var(--ok)}
.msg.err{background:rgba(52,18,20,.9); border:1px solid #6b2f33; color:var(--erro)}
.nota{
  margin-top:18px; padding:13px 15px; border-radius:10px; font-size:12.5px; line-height:1.6;
  background:rgba(60,42,10,.75); border:1px solid #6b5218; color:#f0cf87;
}
code{background:rgba(0,0,0,.55); padding:2px 7px; border-radius:5px; color:var(--ouro1); font-size:12.5px}

/* ---- passos numerados -------------------------------------- */
.passos{counter-reset:p; list-style:none; margin:16px 0 0}
.passos li{
  counter-increment:p; position:relative; padding:12px 0 12px 40px;
  border-bottom:1px solid rgba(138,106,42,.28); font-size:14px;
}
.passos li:last-child{border-bottom:0}
.passos li::before{
  content:counter(p); position:absolute; left:0; top:11px;
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(180deg,var(--ouro1),var(--ouro3));
  color:#2a1a02; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 0 var(--ouro4);
}

.url{
  margin-top:12px; padding:13px 15px; border-radius:9px;
  background:rgba(0,0,0,.7); border:1px solid #4a3a20;
  font:12px/1.6 ui-monospace,Consolas,monospace; color:#9ec5fe;
  word-break:break-all; user-select:all;
}

.rodape{text-align:center; padding:30px 20px 40px; color:#8a7c66; font-size:12.5px}
.rodape a{color:var(--ouro2); text-decoration:none}
.rodape a:hover{text-decoration:underline}

.centro{max-width:520px; margin:22px auto 0; padding:0 20px}

@media(max-width:640px){
  .hero h1{font-size:44px}
  .topbar{font-size:11.5px; gap:12px}
}

/* ---- ficha do jogador (painel pos-login) ------------------- */
.ficha{display:flex; gap:16px; align-items:center}
.avatar{
  width:74px; height:74px; flex:0 0 74px; border-radius:14px;
  background:linear-gradient(180deg,#2a2118,#171009);
  border:2px solid var(--borda);
  box-shadow:0 0 0 1px rgba(255,215,94,.18) inset;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:10px; color:var(--fraco); letter-spacing:.08em; text-transform:uppercase;
}
.avatar span{
  display:block; font-size:28px; line-height:1; font-weight:900; letter-spacing:-1px;
  background:linear-gradient(180deg,var(--ouro1),var(--ouro3));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.dados{min-width:0; flex:1}
.pers{
  font-size:22px; font-weight:800; line-height:1.2;
  background:linear-gradient(180deg,#fff3c4,var(--ouro2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.moedas{display:flex; gap:8px; flex-wrap:wrap; margin-top:9px}
.moeda{
  font-size:11.5px; color:var(--fraco); padding:5px 11px; border-radius:8px;
  background:rgba(0,0,0,.45); border:1px solid #4a3a20; white-space:nowrap;
}
.moeda b{color:var(--txt); font-size:13.5px; font-variant-numeric:tabular-nums}
.moeda.cup b{color:#ffd75e}
.moeda.our b{color:#e8c07a}
.moeda.fc  b{color:#9ec5fe}

.servidor{
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(138,106,42,.28);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.servidor .rot{font-size:11px; color:var(--fraco); text-transform:uppercase; letter-spacing:.08em}
.servidor .nome{
  font-weight:700; font-size:15px;
  background:linear-gradient(180deg,var(--ouro1),var(--ouro3));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ---- layout largo, estilo portal do jogo ------------------- */
.portal{max-width:1060px; margin:20px auto 0; padding:0 20px}
.linha1{display:grid; grid-template-columns:1.75fr 1fr; gap:16px; align-items:start}
.linha2{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:16px}
@media(max-width:900px){
  .linha1,.linha2{grid-template-columns:1fr}
}

/* coluna do download / destaque */
.destaque{
  background:linear-gradient(165deg,#1d2b4a,#101a30);
  border:2px solid #2f4a7a; border-radius:14px; padding:20px; text-align:center;
  box-shadow:0 0 0 1px rgba(120,170,255,.14) inset, 0 14px 40px rgba(0,0,0,.6);
}
.destaque h3{
  font-size:19px; line-height:1.25; font-weight:900; letter-spacing:-.4px;
  background:linear-gradient(180deg,#ffe89a,#f5a524);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-transform:uppercase;
}
.destaque p{margin-top:9px; color:#a9bcd8; font-size:12.5px; line-height:1.55}
.destaque .btn{margin-top:16px}

/* listas de noticias */
.noticias{list-style:none}
.noticias li{
  padding:9px 0; border-bottom:1px solid rgba(138,106,42,.24);
  display:flex; justify-content:space-between; gap:12px; font-size:13px; line-height:1.45;
}
.noticias li:last-child{border-bottom:0}
.noticias .quando{color:var(--fraco); font-size:11.5px; white-space:nowrap}
.noticias .tag{color:var(--ouro1)}

/* botao de servidor, estilo placa */
.servidores{display:flex; flex-direction:column; gap:9px; margin-top:4px}
.placa{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 15px; border-radius:10px; text-decoration:none;
  background:linear-gradient(180deg,#2a2118,#181109);
  border:1px solid #6b5218; color:var(--txt); font-weight:700; font-size:14px;
  box-shadow:0 2px 0 #120c06;
}
.placa:hover{border-color:var(--ouro2)}
.placa .marca-s{
  font-size:11px; font-weight:600; color:var(--fraco);
  text-transform:uppercase; letter-spacing:.06em;
}

/* ---- painel de login em duas colunas ---------------------- */
.doiscol{display:grid; grid-template-columns:1.25fr .95fr; gap:20px; align-items:start}
@media(max-width:680px){ .doiscol{grid-template-columns:1fr} }
.doiscol .lado{
  padding-left:20px; border-left:1px solid rgba(138,106,42,.3);
  display:flex; flex-direction:column;
}
@media(max-width:680px){
  .doiscol .lado{padding-left:0; border-left:0; border-top:1px solid rgba(138,106,42,.3); padding-top:16px}
}
.doiscol .lado p{font-size:12.5px; color:var(--fraco); line-height:1.6}
.doiscol .lado .btn{margin-top:14px}

.faixa{
  margin-top:18px; padding:10px 14px; border-radius:9px; font-size:12.5px;
  background:rgba(0,0,0,.5); border:1px solid #4a3a20; color:#d8c9ac;
}
.faixa b{color:var(--ouro1)}

/* ---- botao abrir jogo -------------------------------------- */
.btn.grande{font-size:19px; padding:18px; letter-spacing:.4px}
.dica-abrir{
  margin-top:12px; font-size:12.5px; color:var(--fraco); line-height:1.6; text-align:center;
}
.dica-abrir a{color:var(--ouro1); font-weight:600}
.manual{margin-top:18px; border-top:1px solid rgba(138,106,42,.28); padding-top:14px}
.manual summary{
  cursor:pointer; font-size:12.5px; color:var(--fraco); user-select:none; list-style:none;
}
.manual summary::-webkit-details-marker{display:none}
.manual summary::before{content:'▸ '; color:var(--ouro2)}
.manual[open] summary::before{content:'▾ '}
.manual summary:hover{color:var(--ouro1)}