@font-face{font-family:'Fraunces';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/Fraunces-Regular.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/Fraunces-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-weight:900;font-style:normal;font-display:swap;
  src:url('fonts/Fraunces-Black.woff2') format('woff2');}
@font-face{font-family:'Karla';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/Karla-Regular.woff2') format('woff2');}
@font-face{font-family:'Karla';font-weight:500;font-style:normal;font-display:swap;
  src:url('fonts/Karla-Medium.woff2') format('woff2');}
@font-face{font-family:'Karla';font-weight:700;font-style:normal;font-display:swap;
  src:url('fonts/Karla-Bold.woff2') format('woff2');}

/* Mobile é o ponto de partida — tudo abaixo é pensado pra tela de celular
   primeiro, desktop só centraliza o mesmo cartão. */

:root{
  --carvao:#1E1815;
  --carvao-2:#2A221D;
  --peroba:#6E4429;
  --peroba-2:#8A5A34;
  --brasa:#C13B23;
  --brasa-dark:#9E2F1B;
  --brasa-glow:#E8862F;
  --fumaca:#9C948A;
  --osso:#EDE3D3;
  --osso-2:#F7F1E6;
  --ink:#241C17;
  --ink-muted:#6B5F53;
  --line:rgba(36,28,23,.14);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius:14px;
  --radius-sm:9px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--carvao);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.05rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.pagina{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--osso-2);
  display:flex;
  flex-direction:column;
}

header.topo{
  position:relative;
  overflow:hidden;
  padding:26px 22px 22px;
  text-align:center;
  color:var(--osso-2);
  background:linear-gradient(160deg,var(--carvao),var(--carvao-2));
}
.topo-bg{
  position:absolute; inset:0;
  background-image:url('img/chop.webp');
  background-size:cover;
  background-position:center center;
  opacity:.32;
}
.topo-conteudo{position:relative; z-index:1;}
.topo-logo{
  height:46px; width:auto; margin:0 auto 14px; display:block;
}
header.topo h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.9rem;
  margin:0;
  color:var(--osso-2);
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

main{flex:1; padding:24px 20px 48px; display:flex; flex-direction:column; gap:20px;}

/* ─ explicação do clube ─ */
.explica-clube{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px 20px; box-shadow:0 8px 24px rgba(30,24,21,.08);
}
.explica-clube h2{
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  color:var(--peroba); margin:0 0 14px; text-align:center;
}
.passos-clube{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.passos-clube li{display:flex; align-items:flex-start; gap:12px; font-size:.9rem; color:var(--ink);}
.passo-num{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--peroba); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
}

/* ─ login / cadastro ─ */
.abas{display:flex; gap:6px; margin-top:20px; margin-bottom:14px; position:relative; z-index:1;}
.aba{
  flex:1; padding:13px 10px; border:none; border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  font-family:var(--font-body); font-weight:700; font-size:.88rem; cursor:pointer;
  background:var(--osso); color:var(--ink-muted);
}
.aba.ativa{background:#fff; color:var(--peroba);}

.cartao-auth{
  display:flex; flex-direction:column; gap:14px;
  background:#fff; border-radius:0 0 var(--radius) var(--radius); padding:22px 22px 26px;
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(30,24,21,.12);
}
.cartao-auth p.hint{margin:0; color:var(--ink-muted); font-size:.86rem;}
.campo{display:flex; flex-direction:column; gap:5px;}
.campo label{font-size:.8rem; font-weight:700; color:var(--ink-muted);}
.campo input{
  width:100%;
  font-size:1.1rem;
  padding:14px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--osso-2);
  font-family:var(--font-body);
  letter-spacing:.01em;
}
.campo input:focus{outline:3px solid var(--brasa-glow); outline-offset:1px;}

.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  font-family:var(--font-body); font-weight:700; font-size:1rem;
  padding:16px 18px;
  border-radius:var(--radius-sm);
  border:none;
  cursor:pointer;
  background:var(--brasa);
  color:#fff;
  box-shadow:0 3px 10px rgba(193,59,35,.35);
}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.55; cursor:default; box-shadow:none;}
.btn.fantasma{
  background:transparent; color:var(--peroba); box-shadow:none;
  border:1px solid var(--peroba);
  font-size:.85rem; padding:10px 14px; width:auto;
}

.erro-msg{
  background:#F5DEDA; color:var(--brasa-dark); border-radius:var(--radius-sm);
  padding:14px 16px; font-size:.9rem;
}

/* ─ tela de resultado ─ */
[hidden]{display:none !important;}

.saudacao{display:flex; justify-content:space-between; align-items:flex-end; gap:10px;}
.saudacao .ola{font-size:.95rem; color:var(--ink-muted);}
.saudacao .nome{font-family:var(--font-display); font-weight:600; font-size:1.3rem; margin-top:2px; color:var(--peroba);}
.link-sair{
  border:none; background:none; color:var(--ink-muted); font-size:.82rem;
  text-decoration:underline; cursor:pointer; font-family:var(--font-body); padding:6px 0;
}

.saldo-card{
  background:linear-gradient(160deg,var(--peroba),var(--peroba-2));
  border-radius:var(--radius);
  padding:26px 22px;
  text-align:center;
  color:var(--osso-2);
  box-shadow:0 8px 24px rgba(110,68,41,.3);
}
.saldo-card .label{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; opacity:.85;}
.saldo-card .numero{
  font-family:var(--font-display); font-weight:900;
  font-size:3.4rem; line-height:1; margin:6px 0 2px;
}

.nivel-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px;
}
.nivel-topo{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px;}
.selo-nivel{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  padding:4px 14px; border-radius:20px; color:#fff;
}
.nivel-vida{font-size:.8rem; color:var(--ink-muted);}
.barra-nivel{height:8px; border-radius:4px; background:var(--osso); overflow:hidden;}
.barra-nivel > div{height:100%; background:var(--brasa-glow); border-radius:4px; transition:width .3s var(--ease,ease);}
.nivel-falta{font-size:.8rem; color:var(--ink-muted); margin-top:8px; text-align:center;}

section h2{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  color:var(--peroba); margin:0 0 12px;
}

.recompensas{display:flex; flex-direction:column; gap:12px;}
.recompensa{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 16px; display:flex; flex-direction:column; gap:10px;
}
.recompensa.disponivel{border-color:var(--brasa-glow); box-shadow:0 2px 10px rgba(232,134,47,.18);}
.recompensa .topo-item{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.recompensa .nome-item{font-weight:700; font-size:.98rem;}
.recompensa .descricao-item{color:var(--ink-muted); font-size:.85rem; margin-top:2px;}
.recompensa .custo{
  font-family:var(--font-display); font-weight:700; color:var(--peroba);
  white-space:nowrap; font-size:1.05rem;
}
.barra{height:6px; border-radius:4px; background:var(--osso); overflow:hidden;}
.barra > div{height:100%; background:var(--brasa-glow); border-radius:4px;}
.recompensa .falta{font-size:.78rem; color:var(--ink-muted);}
.recompensa button.btn{padding:12px 14px; font-size:.85rem;}

.extrato-lista{display:flex; flex-direction:column; gap:0;}
.extrato-linha{
  display:flex; justify-content:space-between; gap:10px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:.86rem;
}
.extrato-linha:last-child{border-bottom:none;}
.extrato-linha .desc{color:var(--ink-muted);}
.extrato-linha .pts{font-weight:700;}
.extrato-linha .pts.pos{color:#3F7A38;}
.extrato-linha .pts.neg{color:var(--brasa);}

.rodape-troca{text-align:center; padding-top:6px;}

.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:var(--carvao); color:#fff; padding:13px 20px; border-radius:var(--radius-sm);
  font-size:.88rem; max-width:90vw; text-align:center; z-index:100;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.toast.erro{background:var(--brasa-dark);}

.overlay{
  position:fixed; inset:0; background:rgba(30,24,21,.65);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:200;
}
.overlay[hidden]{display:none;}
.modal-resgate{
  background:#fff; border-radius:var(--radius); padding:32px 24px 26px; max-width:360px; width:100%;
  text-align:center;
}
.resgate-icone{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  background:linear-gradient(160deg,var(--peroba-2),var(--peroba));
  color:#fff; font-size:1.8rem; line-height:64px; font-weight:700;
}
.modal-resgate h3{font-family:var(--font-display); color:var(--peroba); margin:0 0 8px; font-size:1.4rem;}
.modal-resgate p.resgate-premio{
  font-family:var(--font-display); font-weight:600; color:var(--carvao); font-size:1.1rem; margin:0 0 10px;
}
.modal-resgate p.hint{color:var(--ink-muted); font-size:.88rem; margin:0 0 20px;}

@media (min-width:540px){
  body{padding:24px 0;}
  .pagina{min-height:auto; border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35);}
}