/* =============================================================
   Bolão do BUIU — Design System
   Paleta: gradiente azul + vermelho + dourado, glassmorphism
============================================================= */

:root{
  --bg-0:#0a0e16;
  --bg-1:#10162a;
  --bg-2:#182038;
  --emerald:#2563eb;
  --emerald-dark:#dc2626;
  --grad-principal:linear-gradient(135deg,#3b82f6 0%,#7c3aed 45%,#dc2626 100%);
  --gold:#eab976;
  --gold-strong:#f0c987;
  --text-0:#f4f7f5;
  --text-1:#b8c4bd;
  --text-2:#7c8b83;
  --danger:#ef4444;
  --glass-bg:rgba(255,255,255,0.045);
  --glass-border:rgba(255,255,255,0.09);
  --radius:18px;
  --shadow-lg:0 20px 60px -20px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(circle at 15% -10%, rgba(37,99,235,0.30), transparent 48%),
    radial-gradient(circle at 100% 10%, rgba(234,185,118,0.16), transparent 42%),
    radial-gradient(circle at 50% 120%, rgba(37,99,235,0.14), transparent 55%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1) 40%,var(--bg-0));
  background-attachment:fixed;
  color:var(--text-0);
  min-height:100vh;
  line-height:1.5;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.container{max-width:880px;margin:0 auto;padding:0 20px;}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(37,99,235,0.10), rgba(6,17,12,0.8));
  border-bottom:1px solid var(--glass-border);
  border-top:3px solid transparent;
  border-image:var(--grad-principal) 1;
  padding:16px 0;
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;letter-spacing:.2px;}
.brand .bola{
  width:34px;height:34px;border-radius:50%;
  background:var(--grad-principal);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
  font-size:1rem;
}
.brand .brand-logo{
  width:42px;height:42px;border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 3px rgba(37,99,235,0.18);
}
.brand small{display:block;font-weight:500;font-size:.7rem;color:var(--gold);letter-spacing:.5px;text-transform:uppercase;}

/* ---------- Cards / Glass ---------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(16px);
}
.card{padding:26px;margin-bottom:20px;}
.card-hero{
  padding:34px 30px;
  background:linear-gradient(155deg,rgba(37,99,235,0.22),rgba(220,38,38,0.10) 55%,rgba(6,17,12,0.4));
  text-align:center;
}
.card-hero h1{margin:0 0 8px;font-size:1.6rem;font-weight:800;}
.card-hero p{margin:0;color:var(--text-1);font-size:.95rem;}
.badge-gold{
  display:inline-block;padding:5px 14px;border-radius:999px;
  background:rgba(234,185,118,0.12);border:1px solid rgba(234,185,118,0.35);
  color:var(--gold-strong);font-weight:700;font-size:.72rem;letter-spacing:.6px;text-transform:uppercase;
  margin-bottom:14px;
}

/* ---------- Formulários ---------- */
label{display:block;font-size:.82rem;color:var(--text-1);margin-bottom:6px;font-weight:600;}
input[type=text],input[type=tel],input[type=password],input[type=number]{
  width:100%;padding:13px 15px;border-radius:12px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--glass-border);
  color:var(--text-0);font-size:.98rem;margin-bottom:16px;
  transition:border-color .15s, box-shadow .15s;
}
input:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(37,99,235,0.15);}
::placeholder{color:var(--text-2);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px 20px;border-radius:12px;border:none;cursor:pointer;
  font-weight:700;font-size:.98rem;letter-spacing:.2px;
  transition:transform .12s ease, filter .12s ease;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--grad-principal);color:#ffffff;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-gold{background:linear-gradient(135deg,var(--gold-strong),var(--gold));color:#241705;}
.btn-outline{background:transparent;border:1px solid var(--glass-border);color:var(--text-0);}
.btn-outline:hover{border-color:var(--emerald);}
.btn-danger{background:rgba(239,68,68,0.14);color:#fca5a5;border:1px solid rgba(239,68,68,0.35);}
.btn-sm{padding:9px 14px;font-size:.85rem;width:auto;}

/* ---------- Partidas / Palpites ---------- */
.partida-card{
  padding:18px 18px;margin-bottom:14px;
}
.partida-meta{
  text-align:center;font-size:.78rem;color:var(--text-2);margin-bottom:12px;
}
.partida-meta b{color:var(--text-1);}
.partida-times{
  display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px;
}
.time-box{display:flex;flex-direction:column;align-items:center;gap:8px;width:120px;text-align:center;}
.time-box .escudo{
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,0.06);
  border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:var(--gold-strong);
}
.time-box span{font-size:.85rem;font-weight:600;}
.vs{color:var(--text-2);font-weight:700;font-size:.85rem;}

.opcoes-palpite{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.opcao{
  position:relative;
}
.opcao input{position:absolute;opacity:0;width:0;height:0;}
.opcao label{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 6px;border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--glass-border);
  cursor:pointer;text-align:center;font-size:.78rem;color:var(--text-1);
  transition:all .15s ease;margin-bottom:0;
}
.opcao label b{font-size:.72rem;font-weight:700;color:var(--text-0);}
.opcao input:checked + label{
  background:linear-gradient(135deg,rgba(34,197,94,0.22),rgba(34,197,94,0.08));
  border-color:#22c55e;
  color:var(--text-0);
  box-shadow:0 0 0 1px #22c55e inset;
}
.opcao input:disabled + label{opacity:.55;cursor:not-allowed;}

.resultado-tag{
  text-align:center;margin-top:10px;font-size:.78rem;font-weight:700;
}
.resultado-tag.acerto{color:var(--emerald);}
.resultado-tag.erro{color:var(--danger);}
.resultado-tag.aguardando{color:var(--text-2);font-weight:500;}

/* ---------- Ranking ---------- */
table.ranking{width:100%;border-collapse:collapse;}
table.ranking th{
  text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;
  color:var(--text-2);padding:10px 12px;border-bottom:1px solid var(--glass-border);
}
table.ranking td{padding:12px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:.92rem;}
table.ranking tr:last-child td{border-bottom:none;}
.pos{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;background:rgba(255,255,255,0.05);}
.pos-1{background:linear-gradient(135deg,var(--gold-strong),var(--gold));color:#241705;}
.pos-2{background:rgba(216,220,222,0.35);color:#111;}
.pos-3{background:rgba(196,140,90,0.45);color:#1f0f04;}
.linha-vencedor{background:rgba(234,185,118,0.07);}
.pontos-total{font-weight:800;color:var(--gold-strong);font-size:1rem;}

/* ---------- Alerts / Status ---------- */
.alert{padding:14px 16px;border-radius:12px;margin-bottom:16px;font-size:.88rem;border:1px solid transparent;}
.alert-success{background:rgba(37,99,235,0.1);border-color:rgba(37,99,235,0.3);color:#93c5fd;}
.alert-warning{background:rgba(234,185,118,0.1);border-color:rgba(234,185,118,0.3);color:var(--gold-strong);}
.alert-danger{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3);color:#fca5a5;}
.alert-info{background:rgba(148,163,184,0.1);border-color:rgba(148,163,184,0.25);color:#cbd5e1;}

.step-indicator{display:flex;justify-content:center;gap:8px;margin-bottom:22px;}
.step-indicator span{
  width:8px;height:8px;border-radius:50%;background:var(--glass-border);
}
.step-indicator span.ativo{background:var(--grad-principal);width:22px;border-radius:5px;transition:all .2s;}

.footer-note{text-align:center;color:var(--text-2);font-size:.78rem;padding:30px 0;}

.pix-box{
  background:rgba(255,255,255,0.03);border:1px dashed var(--glass-border);
  border-radius:14px;padding:16px;text-align:center;margin-bottom:16px;
}
.pix-codigo{
  word-break:break-all;font-family:monospace;font-size:.72rem;color:var(--text-1);
  background:rgba(0,0,0,0.25);padding:10px;border-radius:8px;margin:12px 0;
}

.trofeu-final{
  text-align:center;padding:40px 20px;
}
.trofeu-final .emoji{font-size:3.4rem;margin-bottom:12px;}
.trofeu-final h2{font-size:1.5rem;margin:0 0 6px;color:var(--gold-strong);}
.trofeu-final p{color:var(--text-1);}

@media (max-width:520px){
  .time-box{width:90px;}
  .time-box span{font-size:.76rem;}
  .card-hero h1{font-size:1.3rem;}
}

/* ---------- Cronômetro ---------- */
.cron-bloco{
  background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);
  border-radius:14px;padding:14px 18px;min-width:78px;text-align:center;
}
.cron-num{display:block;font-size:1.8rem;font-weight:800;color:var(--gold-strong);line-height:1;}
.cron-label{display:block;font-size:.7rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.5px;margin-top:6px;}