@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: #f4efe2;
  --bg-elev: #fffdf8;
  --card: #ffffff;
  --card-2: #f3ecdb;
  --line: #e6dcc4;
  --line-soft: #eee6d2;

  --chalk: #241f18;
  --chalk-dim: #6e6353;
  --ink-faint: #93876f;

  --apito: #ff4b1f;
  --apito-2: #ff7a3d;
  --apito-deep: #c93611;
  --gold: #c98319;
  --verde: #2e9e56;
  --vermelho: #d33a3a;
  --azul: #2A4E8C;

  --escuro: #14110d;
  --escuro-2: #1c1712;

  --radius: 20px;
  --radius-sm: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--chalk);
  min-height: 100vh;
  line-height: 1.5;
}
a { color: var(--apito-deep); text-decoration: none; }
::selection { background: var(--apito); color: #fff; }

/* ---------- Topo (sempre escuro) ---------- */
.topo {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 14px 20px;
  background: var(--escuro);
  border-bottom: 3px solid var(--apito);
  position: sticky; top: 0; z-index: 50;
}
.logo-texto { position:absolute; left:50%; transform:translateX(-50%); font-family: 'Anton', sans-serif; font-size: 21px; letter-spacing: 0.5px; color: #f6f2e7; text-transform: uppercase; }
.logo-texto span { color: var(--apito-2); }
.topo-pontos { display:flex; align-items:center; gap:10px; }
.pontos-chip { background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); color:#f6f2e7; font-family:'Space Mono',monospace; font-size:12px; font-weight:700; padding:6px 11px; border-radius:20px; }
.avatar-chip { width:30px; height:30px; border-radius:50%; background:var(--apito); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-size:12px; }

/* ---------- Faixa de localização ---------- */
.faixa-local { display:flex; align-items:center; gap:6px; font-family:'Space Mono',monospace; font-size:11px; color: var(--chalk-dim); padding: 10px 18px; background: var(--card-2); border-bottom:1px solid var(--line); }

.container { max-width: 480px; margin: 0 auto; padding: 20px 18px 100px; }

/* ---------- Cartões ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; position: relative; box-shadow: 0 1px 3px rgba(36,31,24,0.04); }
.card-destaque { border: 1px solid rgba(255,75,31,0.35); background: linear-gradient(155deg, #fff 0%, #fff6ec 100%); }
.card-destaque::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--apito),var(--gold)); border-radius:var(--radius) var(--radius) 0 0; }

h1 { font-family:'Anton',sans-serif; font-weight:400; font-size:26px; text-transform:uppercase; line-height:1.15; margin-bottom:8px; color: var(--escuro); }
h2 { font-family:'Anton',sans-serif; font-weight:400; font-size:19px; text-transform:uppercase; margin-bottom:12px; color: var(--escuro); }
h3 { font-family:'Archivo',sans-serif; font-weight:800; font-size:14.5px; margin-bottom:6px; color: var(--escuro); }
p { color: var(--chalk-dim); line-height:1.6; font-size:13.5px; }

/* ---------- Botões ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; width:100%; gap:8px;
  background: linear-gradient(135deg, var(--apito) 0%, var(--apito-deep) 100%);
  color:#fff; font-family:'Archivo',sans-serif; font-weight:800; font-size:14.5px;
  padding:14px; border-radius:12px; border:none; cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(255,75,31,0.25);
}
.btn:active { transform: scale(0.97); }
.btn-secundario { background: transparent; border: 1.5px solid var(--line); color: var(--chalk); box-shadow: none; }
.btn-secundario:hover { border-color: var(--apito); color: var(--apito-deep); }
.btn-outline-branco { background: transparent; border: 1.5px solid var(--line); color: var(--chalk); box-shadow: none; }
.btn-escuro { background: var(--escuro); box-shadow:none; }

/* ---------- Campos ---------- */
label { display:block; font-family:'Space Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px; color: var(--ink-faint); margin-bottom:7px; }
input, select, textarea {
  width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid var(--line);
  background: var(--bg-elev); color: var(--chalk); font-family:'Archivo',sans-serif; font-size:15px;
  margin-bottom:14px; transition:border-color .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--apito); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--chalk);
  -webkit-box-shadow: 0 0 0px 1000px var(--bg-elev) inset;
  transition: background-color 5000s ease-in-out 0s;
}
.admin-body input:-webkit-autofill {
  -webkit-text-fill-color: #1c1a17;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

.campo-senha { position:relative; }
.campo-senha input { padding-right:46px; margin-bottom:0; }
.campo-senha-wrap { margin-bottom:14px; }
.toggle-senha { position:absolute; right:6px; top:6px; bottom:6px; width:38px; background:transparent; border:none; color:var(--ink-faint); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:8px; margin:0; padding:0; }
.toggle-senha:hover { color: var(--apito-deep); background: rgba(0,0,0,0.04); }
.toggle-senha svg { width:20px; height:20px; }

/* ---------- Crachá de time ---------- */
.crest { width: 40px; height: 40px; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-size:14px; color:#fff; flex-shrink:0; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15); }
.crest-sm { width:32px; height:32px; font-size:12px; }
.crest-lg { width:64px; height:64px; font-size:22px; }

/* ---------- Abas de competição ---------- */
.comp-tabs { display:flex; gap:8px; overflow-x:auto; padding: 12px 18px; scrollbar-width:none; background: var(--escuro); }
.comp-tabs::-webkit-scrollbar { display:none; }
.comp-tab { flex-shrink:0; padding:8px 14px; border-radius:20px; font-family:'Archivo',sans-serif; font-weight:700; font-size:11.5px; white-space:nowrap; }
.comp-tab.on { background: var(--apito); color:#fff; }
.comp-tab.off { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); border:1px solid rgba(255,255,255,0.1); }

/* ---------- Badges / status ---------- */
.badge { display:inline-block; padding:4px 11px; border-radius:20px; font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; }
.badge-ao-vivo { background: var(--vermelho); color:#fff; animation: pulse 1.6s infinite; }
.badge-agendado { background: var(--card-2); color: var(--chalk-dim); border:1px solid var(--line); }
.badge-encerrado { background: var(--card-2); color: var(--chalk-dim); border:1px solid var(--line); }
@keyframes pulse { 0%{opacity:1;} 50%{opacity:.55;} 100%{opacity:1;} }

/* ---------- Hero gradiente (usado na landing) ---------- */
.hero-gradiente {
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--apito) 0%, var(--apito-deep) 60%, #7a1c05 100%);
}

/* ---------- Transmissão da rodada (nível competição) ---------- */
.transmissao-rodada { border-radius: var(--radius-sm); overflow:hidden; margin-bottom:14px; border:1px solid var(--line); background:var(--card); }
.transmissao-rodada .tr-topo { display:flex; align-items:center; justify-content:space-between; padding:10px 13px; }
.transmissao-rodada .tr-info { font-family:'Archivo',sans-serif; font-weight:800; font-size:12px; color:var(--escuro); }
.transmissao-rodada .tr-por { font-family:'Space Mono',monospace; font-size:9.5px; color:var(--ink-faint); margin-top:1px; }
.transmissao-rodada .tr-video { position:relative; padding-top:52%; background:#000; }
.transmissao-rodada .tr-video iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* ---------- Cartão compacto de próximo jogo ---------- */
.proximo-compacto {
  display:flex; align-items:center; gap:10px;
  border-radius: var(--radius-sm); padding:12px 14px; margin-bottom:14px;
  background: linear-gradient(120deg, var(--apito) 0%, var(--apito-deep) 100%);
  color:#fff;
}
.proximo-compacto .pc-eyebrow { font-family:'Space Mono',monospace; font-size:8.5px; text-transform:uppercase; letter-spacing:0.6px; opacity:0.8; }
.proximo-compacto .pc-times { font-family:'Archivo',sans-serif; font-weight:800; font-size:12.5px; margin-top:2px; }
.proximo-compacto .pc-hora { font-family:'Space Mono',monospace; font-size:10px; opacity:0.85; margin-top:2px; }
.proximo-compacto .pc-seta { opacity:0.8; font-size:16px; }

/* ---------- Confrontos ---------- */
.match-card { background: var(--card); border:1.5px solid var(--line); border-radius: var(--radius); padding:16px; margin-bottom:12px; box-shadow: 0 1px 3px rgba(36,31,24,0.04); }
.match-card.correct { border-color: rgba(46,158,86,0.4); background: linear-gradient(155deg, #eef8f0, var(--card)); }
.match-card.wrong { border-color: var(--line); opacity: 0.85; }
.match-top { display:flex; align-items:center; gap:10px; }
.match-teams { flex:1; font-size:13px; font-weight:700; line-height:1.3; text-align:center; color: var(--escuro); }
.match-teams .vsx { color: var(--gold); font-family:'Anton',sans-serif; font-size:13px; margin:0 6px; }
.match-day { font-family:'Space Mono',monospace; font-size:10px; color: var(--ink-faint); text-align:right; line-height:1.4; min-width:60px; }

.vote-bar { display:flex; height:7px; border-radius:6px; overflow:hidden; margin:12px 0 5px; background: var(--line-soft); }
.vote-bar span { height:100%; }
.vote-bar .vc { background: var(--apito); }
.vote-bar .ve { background: var(--ink-faint); }
.vote-bar .vf { background: var(--azul); }
.vote-labels { display:flex; justify-content:space-between; font-family:'Space Mono',monospace; font-size:9.5px; color: var(--ink-faint); }

.match-reward { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); display:flex; align-items:center; gap:9px; }
.reward-tag { background: var(--apito); color:#fff; font-family:'Archivo',sans-serif; font-weight:800; font-size:10.5px; padding:5px 10px; border-radius:7px; white-space:nowrap; flex-shrink:0; }
.reward-desc { font-size:11.5px; color: var(--chalk-dim); line-height:1.4; flex:1; }
.reward-desc b { color: var(--escuro); font-weight:700; }

.jogo-linha { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 0; }
.time { flex:1; text-align:center; font-weight:700; font-size:13.5px; }
.time-casa { text-align:right; } .time-fora { text-align:left; }
.vs { font-family:'Anton',sans-serif; color:var(--apito); font-size:15px; padding:0 10px; }

.placar-stepper { display:flex; flex-direction:column; align-items:center; gap:8px; }
.stepper-btn { width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:var(--bg-elev); color:var(--escuro); font-family:'Archivo',sans-serif; font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.stepper-btn:active { background: var(--apito); color:#fff; border-color:var(--apito); }
.stepper-num { font-family:'Anton',sans-serif; font-size:32px; color: var(--escuro); min-width:36px; text-align:center; }
.placar-central { font-family:'Anton',sans-serif; font-size:22px; color:var(--ink-faint); }

/* ---------- Faixa de patrocínio do jogo ---------- */
.patrocinio-jogo { display:flex; align-items:center; gap:12px; background: linear-gradient(100deg, var(--apito) 0%, var(--apito-deep) 100%); color:#fff; border-radius: var(--radius-sm); padding:13px 16px; margin-bottom:14px; }
.patrocinio-jogo .pj-logo { width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.patrocinio-jogo .pj-texto { flex:1; }
.patrocinio-jogo .pj-eyebrow { font-family:'Space Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:0.6px; opacity:0.85; }
.patrocinio-jogo .pj-titulo { font-family:'Archivo',sans-serif; font-weight:800; font-size:12.5px; margin-top:2px; }
.patrocinio-jogo .pj-seta { opacity:0.8; }

/* ---------- Transmissão ---------- */
.transmissao-card { border-radius: var(--radius); overflow:hidden; margin-bottom:16px; border:1px solid var(--line); background:var(--card); }
.transmissao-topo { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; }
.transmissao-topo .tt-info { font-family:'Archivo',sans-serif; font-weight:800; font-size:12.5px; color:var(--escuro); }
.transmissao-topo .tt-por { font-family:'Space Mono',monospace; font-size:10px; color:var(--ink-faint); margin-top:2px; font-weight:400; }
.transmissao-video { position:relative; padding-top:56.25%; background:#000; }
.transmissao-video iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* ---------- Navegação inferior (sempre escura) ---------- */
.rodape-fixo {
  position: fixed; bottom:0; left:0; right:0;
  background: var(--escuro);
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex; justify-content:space-around;
  padding: 9px 0 max(9px, env(safe-area-inset-bottom));
  z-index:50;
}
.rodape-item { display:flex; flex-direction:column; align-items:center; color: rgba(246,242,231,0.5); font-family:'Space Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.3px; gap:4px; }
.rodape-item.ativo { color: var(--apito-2); }
.rodape-icone svg { width:20px; height:20px; stroke: currentColor; fill:none; stroke-width:1.8; }

/* ---------- Hero de perfil ---------- */
.profile-hero { background: linear-gradient(155deg, var(--escuro), var(--escuro-2)); border-radius: var(--radius); padding: 26px 20px; text-align:center; margin-bottom:16px; }
.profile-avatar { width:64px; height:64px; border-radius:50%; background: var(--apito); display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; color:#fff; font-size:22px; border:3px solid var(--gold); margin:0 auto 10px; }
.profile-name { font-family:'Archivo',sans-serif; font-weight:800; font-size:17px; color:#f6f2e7; }
.profile-sub { font-family:'Space Mono',monospace; font-size:10.5px; color:var(--gold); margin-top:4px; }

.stat-row { display:flex; gap:10px; margin-bottom:16px; }
.stat-box { flex:1; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center; }
.stat-num { font-family:'Anton',sans-serif; font-size:22px; color:var(--apito-deep); }
.stat-label { font-family:'Space Mono',monospace; font-size:9px; color:var(--ink-faint); text-transform:uppercase; margin-top:3px; }

/* ---------- Convite de amigos ---------- */
.convite-card { background: linear-gradient(155deg, var(--escuro), var(--escuro-2)); border-radius: var(--radius); padding:20px; margin-bottom:16px; color:#f6f2e7; }
.convite-card h3 { color:#f6f2e7; font-size:15px; }
.convite-card p { color: rgba(246,242,231,0.7); }
.convite-codigo { background: rgba(255,255,255,0.08); border:1.5px dashed rgba(255,255,255,0.3); border-radius:12px; padding:14px; text-align:center; font-family:'Space Mono',monospace; font-size:17px; letter-spacing:2px; color: var(--gold); margin:12px 0; font-weight:700; }

/* ---------- Cupom estilo ingresso ---------- */
.cupom { position:relative; border-radius: var(--radius); padding:18px; text-align:center; background: linear-gradient(155deg, var(--escuro) 0%, var(--escuro-2) 100%); border:1.5px dashed rgba(227,167,59,0.5); margin-bottom:14px; overflow:hidden; color:#f6f2e7; }
.cupom::before, .cupom::after { content:''; position:absolute; width:18px; height:18px; background:var(--bg); border-radius:50%; top:50%; transform:translateY(-50%); }
.cupom::before { left:-9px; } .cupom::after { right:-9px; }
.cupom-codigo { font-family:'Space Mono',monospace; font-weight:700; font-size:20px; letter-spacing:3px; color:var(--gold); margin:10px 0; }
.cupom.usado { opacity:0.5; border-color: var(--line); background: var(--card-2); color: var(--chalk-dim); }
.cupom.usado .cupom-codigo { color: var(--ink-faint); }

/* ---------- Parceiros / patrocinadores ---------- */
.parceiro-card { display:flex; gap:13px; align-items:flex-start; }
.parceiro-logo { width:48px; height:48px; border-radius:12px; background: var(--card-2); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; overflow:hidden; }
.parceiro-logo img { width:100%; height:100%; object-fit:contain; }
.parceiro-categoria { font-family:'Space Mono',monospace; font-size:10px; text-transform:uppercase; color: var(--ink-faint); letter-spacing:0.5px; }
.brand-pill { display:inline-block; padding:5px 11px; border-radius:20px; border:1.3px solid var(--apito); color:var(--apito-deep); font-size:11px; font-weight:700; margin:0 6px 6px 0; }
.oferta-box { background: var(--escuro); color:#f6f2e7; border-radius: var(--radius-sm); padding:14px; margin-top:12px; }
.oferta-box .of-eyebrow { font-family:'Space Mono',monospace; font-size:9.5px; color: var(--apito-2); text-transform:uppercase; letter-spacing:0.6px; }
.oferta-box p { color: rgba(246,242,231,0.85); margin-top:4px; }

/* ---------- Ranking ---------- */
.rank-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.rank-pos { width:26px; text-align:center; font-family:'Anton',sans-serif; font-size:16px; color: var(--ink-faint); }
.rank-item.top1 .rank-pos { color:#c98319; } .rank-item.top2 .rank-pos { color:#8a8a8a; } .rank-item.top3 .rank-pos { color:#a9662e; }
.rank-avatar { width:36px; height:36px; border-radius:50%; background:var(--apito); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-size:13px; flex-shrink:0; }
.rank-nome { flex:1; font-weight:700; font-size:13px; }
.rank-pontos { font-family:'Space Mono',monospace; font-weight:700; font-size:13px; color: var(--apito-deep); }

.aviso-regra { background: var(--card-2); border-left:3px solid var(--apito); padding:11px 13px; border-radius:8px; font-size:11.5px; color:var(--chalk-dim); margin-top:10px; line-height:1.5; }

table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:9px 6px; border-bottom:1px solid var(--line-soft); text-align:left; }
th { color:var(--apito-deep); text-transform:uppercase; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.4px; }

.erro { background:rgba(211,58,58,0.08); border:1px solid rgba(211,58,58,0.35); color:#b52d2d; padding:11px 14px; border-radius:10px; margin-bottom:14px; font-size:13px; }
.sucesso { background:rgba(46,158,86,0.08); border:1px solid rgba(46,158,86,0.35); color:#1f7a3d; padding:11px 14px; border-radius:10px; margin-bottom:14px; font-size:13px; }

/* ---------- Admin (tema claro) ---------- */
.admin-body { background:#f4f2ee; color:#1c1a17; }
.admin-wrap { max-width:1100px; margin:0 auto; padding:22px; }
.admin-topo { background:var(--escuro); color:#fff; padding:15px 26px; display:flex; justify-content:space-between; align-items:center; border-bottom:3px solid var(--apito); }
.admin-topo strong { font-family:'Anton',sans-serif; font-weight:400; letter-spacing:0.4px; }
.admin-nav { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.admin-nav a { background:#fff; padding:9px 15px; border-radius:9px; border:1px solid #e3e0d9; color:#4a453d; font-size:13px; font-weight:600; transition:all .15s ease; }
.admin-nav a.ativo, .admin-nav a:hover { background:var(--apito); color:#fff; border-color:var(--apito); }
.admin-card { background:#fff; border-radius:14px; padding:20px; margin-bottom:16px; border:1px solid #ece9e2; box-shadow:0 1px 3px rgba(0,0,0,0.03); }
.admin-body table th { color:#6e675b; background:#faf9f6; }
.admin-body input, .admin-body select, .admin-body textarea { color:#1c1a17; background:#fff; border:1px solid #ddd8cf; }
.admin-body label { color:#7a7468; }
.admin-body .toggle-senha { color:#a09a8c; }
.tag { display:inline-block; padding:3px 9px; border-radius:7px; font-size:11px; font-weight:700; }
.tag-ok { background:#dcf5e4; color:#16743b; }
.tag-pendente { background:#fdecd2; color:#a15c00; }