:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1f2630; --text:#e6edf3;
  --muted:#8b949e; --brand:#58a6ff; --ok:#3fb950; --err:#f85149;
  --warn:#f5c518; --stroke:#30363d;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}

/* ===== HEADER ANIMADO ===== */
header {
  position: sticky; top: 0; z-index: 20;
  background: var(--panel);
  border-bottom: 1px solid var(--stroke);
  padding: 10px 14px;
  opacity: 0;
  transform: translateY(-20px);
  animation: headerFadeIn 0.8s ease forwards;
}
header .wrap{display:flex;align-items:center;justify-content:center;position:relative}
.burger{position:absolute;left:0;background:transparent;border:none;color:var(--text);font-size:26px;cursor:pointer;line-height:1;opacity:0;transform:translateX(-20px);animation:burgerFadeIn 0.8s ease 0.3s forwards}
header h1{margin:0;color:var(--brand);font-size:22px;text-align:center;opacity:0;transform:translateY(-10px);animation:titleFadeIn 0.8s ease 0.5s forwards}

/* ===== SIDEBAR ===== */
.sidebar{position:fixed;top:0;left:-250px;width:250px;height:100%;background:var(--panel);transition:left 0.3s ease;z-index:50;overflow-y:auto;padding:10px;}
.sidebar.open{left:0;}
.sidebar ul{list-style:none;padding:0;margin:0;}
.sidebar ul li{margin-bottom:8px;}
.sidebar ul li a, .sidebar ul li button{
  color:var(--text);text-decoration:none;display:block;width:100%;
  background:none;border:none;text-align:left;padding:6px 10px;
  cursor:pointer;border-radius:6px;
}
.sidebar ul li button:hover, .sidebar ul li a:hover{background:var(--panel2);}
.submenu{display:none;padding-left:10px;}
.submenu li a{padding:4px 10px;}

/* Tabs */
.tabs{display:flex;gap:8px;align-items:center;padding:8px 14px;background:var(--panel2);border-bottom:1px solid var(--stroke)}
.tabs button{background:transparent;border:1px solid var(--stroke);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer}
.tabs button.active{border-color:var(--brand);color:#fff}

/* Container Jogos */
.container{max-width:1100px;margin:14px auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;padding:0 14px}
.card{
  background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:14px;
  opacity:0;transform:translateY(20px);animation:cardFadeIn 0.6s ease forwards;
  transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.5);}
.card:nth-child(1){animation-delay:0.1s}
.card:nth-child(2){animation-delay:0.2s}
.card:nth-child(3){animation-delay:0.3s}
.card:nth-child(4){animation-delay:0.4s}
.card:nth-child(5){animation-delay:0.5s}
.card:nth-child(6){animation-delay:0.6s}

/* Status e badges */
.status-bar{margin-bottom:8px;text-align:center;}
.jogo-horario{
  display:inline-block;
  background:#ffeb3b; /* amarelo chamativo */
  color:#000;
  padding:4px 12px;
  border-radius:12px;
  font-weight:700;
  font-size:0.95rem;
}

/* Campeonato e times */
.campeonato{display:flex;gap:8px;align-items:center;margin-bottom:8px;color:var(--brand);font-weight:700}
.campeonato img{width:28px;height:28px;border-radius:6px;object-fit:cover;background:#fff;border:1px solid #ccc3;transition:transform 0.3s, box-shadow 0.3s;}
.campeonato img:hover{transform:scale(1.2);box-shadow:0 4px 10px rgba(0,0,0,0.4);}
.fallback-ball{width:70px;height:70px;border-radius:50%;background:#fff;display:flex;justify-content:center;align-items:center;color:#000;font-weight:bold;font-size:30px;}
.times{display:flex;justify-content:space-between;align-items:center;gap:8px}
.time{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.time img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#fff;border:2px solid #fff3;box-shadow:0 4px 8px rgba(0,0,0,0.3);transition:transform 0.3s, box-shadow 0.3s}
.time img:hover{transform:scale(1.15);box-shadow:0 6px 12px rgba(0,0,0,0.5);}
.name{margin-top:6px;font-size:14px}
.versus{min-width:60px;text-align:center;color:var(--muted);font-weight:700;font-size:18px}
.info{margin-top:10px;display:flex;gap:8px;justify-content:center;align-items:center;color:var(--muted);font-size:13px}
.channel-logo{width:30px;height:30px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid #ccc3;transition:transform 0.2s;}
.channel-logo:hover{transform:scale(1.1);}

/* Footer */
footer{margin-top:20px;border-top:1px solid var(--stroke);background:var(--panel);color:var(--muted);font-size:12px;padding:10px 14px;text-align:center;opacity:0;transform:translateY(20px);animation:footerFadeIn 1s ease forwards}
footer .wrap{text-align:center}
footer:hover{color:var(--brand);transform:translateY(0) scale(1.05);transition:all 0.3s ease}

/* Bolinha animada ao vivo */
@keyframes bounce{0%{transform:translateY(0);}50%{transform:translateY(-5px);}100%{transform:translateY(0);}}

/* Animações */
@keyframes headerFadeIn{to{opacity:1;transform:translateY(0);}}
@keyframes burgerFadeIn{to{opacity:1;transform:translateX(0);}}
@keyframes titleFadeIn{to{opacity:1;transform:translateY(0);}}
@keyframes footerFadeIn{to{opacity:1;transform:translateY(0);}}
@keyframes cardFadeIn{to{opacity:1;transform:translateY(0);}}