:root{
  --primary-color:#28a745;      /* Verde principal */
  --secondary-color:#218838;    /* Verde hover */
  --accent-color:#FFD60A;       /* Amarelo p/ destaques */
  --text-color:#2B2D42;         /* Texto padrão */
  --light-color:#F8F9FA;        /* Fundo claro */
  --dark-color:#212529;         /* Texto escuro */
  --success-color:#4BB543;      /* Verde sucesso */
  --border-color:#dee2e6;       /* Borda neutra */
  --box-shadow:0 4px 12px rgba(0,0,0,.08);

  /* Altura do header p/ compensar o fixo */
  --header-h:88px;
}
@media (max-width:768px){
  :root{ --header-h:64px; }
}

/* ============ RESET ============ */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
html,body{height:100%}
body{
  background:linear-gradient(180deg,#f9fff9,#f1fff5);
  color:var(--text-color);
  margin:0;
  padding:0;
  padding-top:calc(var(--header-h) + -94px); /* espaço p/ header fixo */
}

/* ============ CONTAINER ============ */
.container{
  max-width:95%;   /* ocupa quase toda a tela */
  margin:0 auto;
  padding:20px 30px;
  padding-top:0; /* sem espaço extra acima */
}
@media (max-width:768px){
  .container{max-width:100%!important;padding-left:1px;padding-right:1px}
}

/* ============ HEADER FIXO ============ */
.main-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:14px 20px;
  background:var(--primary-color);color:#fff;
  border-radius:12px; /* desktop */
  border:1px solid transparent; /* desktop */
  box-shadow:var(--box-shadow);
}
.main-header h1{font-size:28px;font-weight:800;letter-spacing:.2px}
@media (max-width:768px){
  .main-header{border:none;border-radius:0}
}

/* Menu */
.menu-toggle{
  display:none;background:#fff;color:var(--primary-color);
  padding:8px 12px;border-radius:6px;cursor:pointer;font-size:18px;border:none
}
.nav-links{display:flex;gap:15px}
.nav-links a{color:#fff;text-decoration:none;font-weight:600;transition:color .25s}
.nav-links a:hover{color:var(--accent-color)}
@media (max-width:768px){
  .menu-toggle{display:block}
  .nav-links{display:none;flex-direction:column;width:100%;background:var(--primary-color);padding:10px;border-radius:8px}
  .nav-links.show{display:flex}
}

/* Logout */
.logout-btn{
  background:#fff;color:var(--primary-color);
  padding:10px 18px;border-radius:8px;border:none;cursor:pointer;font-weight:600;transition:all .3s
}
.logout-btn:hover{background:var(--accent-color);color:var(--dark-color);transform:translateY(-2px)}

/* ============ BANNER ============ */
/* ============ BANNER SLIDER ============ */
.banner-wrap {
  margin-top: 0; /* ✅ encosta no header — removida a margem duplicada */
}

.banner-slider {
  width: 100%;
  height: 280px;              /* altura padrão no desktop */
  max-width: 1200px;          /* largura máxima opcional */
  margin: 0 auto;             /* centraliza */
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  background: #fff;
}

.banner-slider img {
  width: 100%;
  height: 100%;               /* ocupa toda altura */
  object-fit: cover;          /* corta imagem sem distorcer */
  display: none;
  vertical-align: middle;
}

.banner-slider img.active {
  display: block;
}

/* Pontos (bolinhas do carrossel) */
.banner-slider .dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.banner-slider .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  cursor: pointer;
}
.banner-slider .dot.active {
  background: #fff;
}

/* Responsivo */
@media (max-width: 768px) {
  .banner-slider {
    height: 180px;   /* altura menor no mobile */
    border-radius: 0;
  }
}

/* ============ GRID DE JOGOS ============ */
.jogos-rodada > h2{
  display:flex;align-items:center;gap:8px;
  font-size:1.15rem;color:#0f172a;margin:8px 0 14px 4px;
}
.jogos-grid{display:grid;gap:25px;grid-template-columns:1fr}
@media (min-width:768px){  .jogos-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .jogos-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1400px){ .jogos-grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1800px){ .jogos-grid{grid-template-columns:repeat(5,1fr)} }
@media (min-width:2400px){ .jogos-grid{grid-template-columns:repeat(6,1fr)} }

/* ============ CARD DO JOGO ============ */
.jogo-card{
  background:#fff;border-radius:12px;box-shadow:var(--box-shadow);
  padding:24px;border:1px solid transparent;transition:all .3s ease;
  font-size:16px;
}
.jogo-card:hover{transform:translateY(-5px);box-shadow:0 8px 18px rgba(0,0,0,.12);border:1px solid var(--primary-color)}
@media (max-width:768px){
  .jogo-card{margin-left:0;margin-right:0;width:100%}
}

/* Telas grandes: aumentar elementos */
@media (min-width:1400px){
  .jogo-card{padding:30px;font-size:18px;}
  .logo-time{max-width:80px;max-height:80px;}
  .nome-time{font-size:18px;}
  .placar-input{width:90px;height:60px;font-size:20px;}
  .btn-palpite{font-size:18px;padding:16px;}
}
@media (min-width:2000px){
  .jogo-card{padding:36px;font-size:20px;}
  .logo-time{max-width:100px;max-height:100px;}
  .nome-time{font-size:20px;}
  .placar-input{width:100px;height:70px;font-size:22px;}
  .btn-palpite{font-size:20px;padding:18px;}
}

/* Header do card */
.jogo-header{text-align:center;margin-bottom:14px}

/* Time + logo + nome */
.jogo-info{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:20px;
  font-weight:800;
  font-size:18px;
  color:var(--dark-color);
}
.jogo-info .time{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:90px;           /* largura fixa p/ evitar "sambar" */
}
.logo-time{
  display:block;
  margin:0 auto 6px auto;
  max-width:55px;
  max-height:55px;
  object-fit:contain;
}
.nome-time{
  display:block;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
}
.jogo-data{font-size:14px;color:#6c757d;margin-top:6px}

/* “X” estilizado */
.jogo-info .vs,
.placar-inputs > span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 10px;
  border-radius:50%;font-weight:900;font-size:18px;
  background:rgba(40,167,69,.08);color:var(--secondary-color);
  border:2px solid rgba(40,167,69,.3);
  box-shadow:inset 0 0 4px rgba(40,167,69,.15);
}
@media (max-width:768px){
  .placar-inputs > span{min-width:54px;height:54px;font-size:20px}
}

/* ============ MEUS PALPITES ============ */
.meu-palpite{
  background:#e6f7ed;border:1px solid #c9efd1;color:var(--success-color);
  border-radius:10px;padding:12px;margin:14px 0;text-align:center;font-weight:700;font-size:15px
}

/* ============ FORM DE PALPITE ============ */
.palpite-form{margin:12px 0;text-align:center}
.placar-inputs{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}
.placar-input{
  width:72px;height:48px;text-align:center;
  border:1px solid var(--border-color);border-radius:8px;
  font-size:18px;font-weight:800;transition:all .2s;outline:none
}
.placar-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 4px rgba(40,167,69,.18)}
@media (max-width:768px){
  .placar-inputs{gap:8px;padding:0 6px}
  .placar-input{flex:1;width:auto;min-width:0;height:56px;font-size:20px}
}

/* Botão */
.btn-palpite{
  width:100%;background:var(--primary-color);color:#fff;border:none;border-radius:10px;
  padding:12px 14px;font-weight:700;font-size:15px;cursor:pointer;transition:all .25s
}
.btn-palpite:hover{background:var(--secondary-color);transform:translateY(-2px)}

/* ============ BLOCO EXTRA ============ */
.jogo-extra{
  margin-top:12px;
  padding:12px;
  border-top:1px solid var(--border-color);
  font-size:14px;
  color:var(--dark-color);
  background:#fafafa;
  border-radius:0 0 10px 10px;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.jogo-extra p{
  margin:0;
  flex:1;
  min-width:120px;
  text-align:center;
  font-weight:600;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}
.jogo-extra .premio{
  font-weight:800;
  color:var(--primary-color);
  font-size:15px;
}

/* ============ ENVIAR TODOS ============ */
.btn-todos-palpites{
  display:block;margin:25px auto 0;background:var(--primary-color);color:#fff;
  padding:15px 22px;border:none;border-radius:10px;font-weight:700;font-size:15px;transition:all .25s
}
.btn-todos-palpites:hover{background:var(--secondary-color);transform:translateY(-2px)}

/* ============ ALERTAS ============ */
.alert.error{
  background:#fde2e1;border:1px solid #fac1bf;color:#8a1c1c;
  padding:12px;border-radius:10px;margin-bottom:14px;font-size:14px
}

/*========= para os palpites pagos e pendente se alinhar na mesma linha ======*/
.meus-palpites-titulo {
  display:block;
  text-align:center;
  margin:0 0 6px 0;
  font-weight:600;
  font-size:0.95em;
  color:#333;
}
.meus-palpites ul {
  display:grid;
  grid-template-columns:repeat(2,1fr); /* 2 por linha */
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  justify-items:center;
}
.meus-palpites li {
  background:#fff;
  border:1px solid #ddd;
  border-radius:4px;
  padding:2px 8px;
  font-size:0.85em;
  white-space:nowrap;
}

/* ============ PATROCINADORES (entre os jogos) ============ */
.patrocinador-card{
  background:#fff;
  border-radius:12px;
  box-shadow:var(--box-shadow);
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:all .3s ease;
}
.patrocinador-card:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 8px 18px rgba(0,0,0,.15)}
.patrocinador-card img{
  max-width:100%;max-height:70px;object-fit:contain;
  filter:grayscale(20%);
  transition:all .3s ease
}
.patrocinador-card img:hover{filter:none;transform:scale(1.08)}