:root {
  --bg:#000;
  --panel:#111214;
  --panel-2:#0d0e10;
  --line:rgba(255,255,255,.08);
  --muted:#b8bcc6;
  --text:#f5f7fb;
  --green:#24e28c;
  --green-2:#00c176;
  --blue:#19b0ff;
  --red:#e53935;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:14px;
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1000px 400px at 60% -20%, rgba(56,189,248,.08), transparent 60%), var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.topbar {
  background: linear-gradient(180deg, #0b1222 30%, #0b0f14 100%);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.logo span {
  color: var(--accent);
}

.btn-refresh {
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  border: none;
  color: #001018;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(56,189,248,.3);
  transition: filter 0.2s;
}
.btn-refresh:hover {
  filter: brightness(1.1);
}

/* Painel principal */
.panel {
  max-width: 1400px;
  margin: 30px auto;
  padding: 0 16px;
  width: 100%;
}

.panel-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: .5px;
  color: var(--accent);
}

.table-container {
  overflow-x: hidden;              /* 🔹 impede o scroll lateral */
  background: #020a01;
  border: 1px solid #1f2021;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  width: 100%;
  display: block;
}

/* ===== TABELA ===== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;             /* 🔹 distribui as colunas igualmente */
}

th, td {
  padding: 4px 2px;                /* 🔹 reduz levemente o padding */
  word-wrap: break-word;           /* 🔹 quebra o conteúdo dentro da célula */
  white-space: normal;             /* 🔹 permite quebra de linha */
}


th {
  background: #0c0d10;
  color: var(--muted);
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .05em;
}

tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

.hora-header {
  background: #0c0d10;
  font-weight: bold;
  color: var(--accent);
}

/* ============================= */
/* 🎯 PADRONIZAÇÃO DE CORES */
/* ============================= */

/* Placar */
.placar-verde {
  background: #22c55e; /* verde padrão */
  color: #fff;
  font-weight: 600;
}
.placar-vermelho {
  background: #ef4444; /* vermelho padrão */
  color: #fff;
  font-weight: 600;
}
.placar-cinza {
  background: var(--gray);
  color: #cbd5e1;
}

/* Footer */
footer {
  margin-top: auto;
  text-align: center;
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--border);
}

/* Estatísticas */
.stat-col {
  font-size: 12px;
  padding: 4px 6px;
  background: #0f172a;
  font-family: 'Inter', sans-serif;
  text-align: center;
  white-space: nowrap;
  border-left: 1px solid rgba(255,255,255,0.03);
  border-right: 1px solid rgba(0,0,0,0.1);
}

.stat-verde {
  background: none !important;
  color: #22c55e !important;
}
.stat-amarelo {
  background: none !important;
  color: #22c55e !important; /* padronizado pro verde */
}
.stat-vermelho {
  background: none !important;
  color: #ef4444 !important;
}
.stat-azul {
  background: none !important;
  color: #3b82f6;
}

th.stat-header {
  font-size: 11px;
  padding: 4px 6px;
  color: #cbd5e1;
}

/* Tooltip (ícone info) */
.info-btn {
  background: transparent;
  border: none;
  color: #38bdf8;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: transform 0.2s;
}
.info-btn:hover { transform: scale(1.2); }

/* Legenda */
#legenda-box {
  margin-top: 12px;
  background: #0f172a;
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  display: none;
  color: #e2e8f0;
}
#legenda-box.visivel { display: block; }

#legenda-box h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #38bdf8;
  font-weight: bold;
}
#legenda-box ul {
  margin: 0;
  padding-left: 16px;
  list-style: none;
}
#legenda-box li {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.dot.red { background: #ef4444; }
.dot.green { background: #22c55e; }

/* Cabeçalho com % ambas / torneio */
.resumo-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  margin-top: 12px;
}
.resumo-top .box {
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 110px;
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px rgba(0,0,0,0.6);
  animation: pulseLive 2.6s infinite ease-in-out;
}
.torneio-nome {
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56,189,248,0.4);
  letter-spacing: 1px;
}
@keyframes pulseLive {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255,255,255,0.1); }
  50% { transform: scale(1.05); box-shadow: 0 0 15px rgba(255,255,255,0.3); }
}
.box-vermelho {
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}
.box-verde {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

/* Filtro */
.filtro-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.filtro-wrapper select {
  background: linear-gradient(180deg, #1e293b, #0f172a);
  color: #e2e8f0;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #334155;
  font-size: 14px;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  max-width: 180px;
  width: 100%;

  /* ✅ Centraliza o texto do item selecionado */
  text-align-last: center;

}

/* ✅ Mantém o menu aberto alinhado à esquerda */
.filtro-wrapper select option {
  text-align: left;
  
}

.filtro-wrapper optgroup {
  background-color: #1e293b;
  color: #e2e8f0;
  font-weight: bold;
  text-align: left;
}

.filtro-wrapper option {
  background-color: #0f172a;
  color: #e2e8f0;
  text-align: left;
}

.filtro-ok {
  background-color: #22c55e !important;
  color: #fff !important;
}
.filtro-not {
  background-color: #ef4444 !important;
  color: #fff !important;
}

.limpar-btn {
  margin-left: 10px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #444;
  background-color: #222;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}
.limpar-btn:hover { background-color: #333; }

#container table { transition: opacity 0.3s ease; }
.fade-out { opacity: 0.3; }

select option[disabled] {
  color: #888;
  font-weight: 600;
}

/* ===== CÉLULA AJUSTADA (PLACAR GRANDE + ABREVIAÇÃO BRANCA) ===== */
.placar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  padding: 1px 0;                /* 🔹 menos espaço vertical */
  transform: scale(0.9);         /* 🔹 leve redução geral */
}

.placar-box .score {
  font-size: 14px;               /* 🔹 mantém destaque, mas 1px menor */
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.placar-box .teams {
  font-size: 8px;                /* 🔹 ligeiramente menor pra caber */
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  margin-top: 1px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 🔹 Células mais compactas pra eliminar scroll */
th, td {
  padding: 3px 2px;
  min-width: 38px;               /* 🔹 define largura mínima coerente */
}

/* 🔹 Mantém o texto centralizado verticalmente */
td {
  vertical-align: middle;
}

/* ===== CÉLULAS FUTURAS (AGUARDE) ===== */
.placar-vazio {
  background: transparent !important;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.placar-box.aguardando {
  line-height: 1.1;
  padding: 3px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.placar-box.aguardando .teams {
  font-size: 8px;
  font-weight: 800;
  color: #facc15; /* amarelo */
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.5px;
}

.placar-box.aguardando .aguarde {
  font-size: 7px;
  font-weight: 800;
  color: #fde047; /* amarelo claro */
  text-transform: uppercase;
  opacity: 0.9;
  margin-top: 1px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
}

/* animação opcional (piscando leve) */
@keyframes pulseAguarde {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.placar-box.aguardando .aguarde {
  animation: pulseAguarde 1.8s infinite ease-in-out;
}

/* ===== STATUS AO VIVO / AGUARDE ===== */
.placar-vazio {
  background: transparent !important;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.placar-box.aguardando {
  line-height: 1.1;
  padding: 3px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.placar-box.aguardando .teams {
  font-size: 8px;
  font-weight: 800;
  color: #facc15; /* amarelo */
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.5px;
}

.placar-box.aguardando .aguarde {
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 2px;
  letter-spacing: 0.4px;
  animation: pulseAguarde 1.5s infinite ease-in-out;
}

/* 🔹 Verde neon para jogos AO VIVO */
.placar-box.aguardando .aguarde:has(span.ao-vivo),
.placar-box.aguardando .aguarde:contains("AO VIVO") {
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}

/* 🔹 Amarelo para AGUARDE */
.placar-box.aguardando .aguarde:not(:contains("AO VIVO")) {
  color: #facc15;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* 🔹 Animação de brilho leve */
@keyframes pulseAguarde {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

:root {
  --azul: #035c8e;
  --azul-claro: #00a8ff;
  --amarelo: #f0c808;
  --fundo: #0b0e12;
  --painel: #11161c;
  --texto: #e9e9e9;
  --borda: #1c2229;
}

/* ===== BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--fundo);
  font-family: "Poppins", sans-serif;
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ===== NAVBAR ===== */
.navbar {
  background: linear-gradient(90deg, var(--azul) 0%, #023f68 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 36px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-logo {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-logo .fut {
  color: #fff;
}

.nav-logo .arena {
  color: var(--amarelo);
}

.nav-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.nav-links a {
  color: #d7d7d7;
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  transition: 0.3s;
  padding-bottom: 2px;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--amarelo);
  border-bottom: 2px solid var(--amarelo);
}

.btn-refresh {
  background: #fff;
  color: var(--azul);
  border: none;
  padding: 7px 15px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-refresh:hover {
  background: var(--amarelo);
  color: #000;
}

/* ===== LIGAS ===== */
.ligas {
  padding: 30px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.ligas h2 {
  color: var(--azul-claro);
  margin-bottom: 16px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.5px;
}

.ligas-grid {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  justify-content: flex-start;
    justify-content: center; /* ✅ centraliza tudo */
}

.liga-card {
  background: var(--painel);
  border: 2px solid var(--borda);
  border-radius: 12px;
  width: 210px;
  padding: 14px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.liga-card:hover {
  transform: translateY(-4px);
  border-color: var(--azul-claro);
  box-shadow: 0 0 18px rgba(0, 168, 255, 0.25);
}

.liga-card img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin-top: 10px;
  transition: 0.3s;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}

.liga-card:hover img {
  transform: scale(1.06);
}

.liga-card h3 {
  font-size: 16px;
  margin: 8px 0 0;
  font-weight: 600;
  color: #fff;
}

/* Estado ativo */
.liga-card.ativa {
  border-color: var(--azul-claro);
  box-shadow: 0 0 22px rgba(0, 168, 255, 0.35);
  animation: glow 2.5s infinite ease-in-out;
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 168, 255, 0.4); }
  50% { box-shadow: 0 0 25px rgba(0, 168, 255, 0.8); }
}

/* Estado inativo */
.liga-card:not(.ativa) {
  opacity: 0.6;
  filter: grayscale(0.8);
}

.liga-card:not(.ativa)::after {
  content: "INDISPONÍVEL NO MOMENTO";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #ff5c5c;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

/* Switch toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #444;
  transition: 0.4s;
  border-radius: 22px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--azul-claro);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* ===== FILTROS ===== */
.filtros {
  max-width: 1200px;
  margin: 20px auto;
  padding: 10px 40px;
}

.filtros h2 {
  font-size: 18px;
  color: var(--azul-claro);
  margin-bottom: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.filtro-boxes {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.filtro-item {
  background: #141a22;
  border: 1px solid #2c2c2c;
  color: #ccc;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
}

.filtro-item:hover {
  border-color: var(--azul-claro);
  color: var(--azul-claro);
}

.filtro-item.ativo {
  background: var(--azul-claro);
  color: #fff;
  border-color: var(--azul-claro);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.3);
}

/* ===== PAINEL ===== */
.panel {
  background: #010d15;
  border-radius: 14px;
  max-width: 1200px;
  margin: 30px auto;
  padding: 25px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.55);
  border: 1px solid #1a1f25;
}

.panel-title {
  text-align: center;
  color: var(--azul-claro);
  margin-bottom: 22px;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table-container {
  overflow-x: auto;
  scrollbar-color: #035c8e #0b0e12;
  scrollbar-width: thin;
}

.table-container::-webkit-scrollbar {
  height: 6px;
}
.table-container::-webkit-scrollbar-thumb {
  background: var(--azul);
  border-radius: 4px;
}

/* ===== FOOTER ===== */
footer {
  background: #0c0f13;
  color: #999;
  text-align: center;
  padding: 18px 10px 25px;
  font-size: 13px;
  border-top: 1px solid #1a1a1a;
  margin-top: 50px;
  letter-spacing: 0.3px;
}
footer strong {
  color: var(--azul-claro);
}

:root {
  --verde: #4dc101;
  --grad-telegram: linear-gradient(90deg, #7ae600, #e7e400);
  --fundo: #efefef;
  --painel: #fff;
  --borda: #d0d0d0;
  --texto: #222;
}

/* ===== BASE ===== */
body {
  margin: 0;
  background: var(--fundo);
  font-family: "Poppins", sans-serif;
  color: var(--texto);
}

/* ===== CABEÇALHO ===== */
.header {
  background: 022945;
  color: #fff;
  padding: 12px 0;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 0 30px;
}

/* LOGO */
.logo {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo .fut { color: #fff; }
.logo .zone { color: #f0c808; }

/* MENU */
.menu {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
}
.menu a:hover,
.menu a.active {
  background: rgba(0,0,0,0.15);
}
.menu a.active {
  box-shadow: inset 0 -2px 0 #f0c808;
}

/* ITEM ESPECIAL */
.menu a.telegram {
  background: linear-gradient(90deg, #00a1ff, #0729b5);
  color: #000;
  font-weight: 700;
  border-radius: 8px;
  padding: 7px 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.menu a.telegram:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(231, 228, 0, 0.5);
}

/* SPORTINGBET */
.partner img {
  height: 28px;
  filter: brightness(1.1);
}

/* ===== PAINEL / CONTEÚDO ===== */
.panel {
  background: #010d15;
  border-radius: 14px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 25px;
  box-shadow: 0 0 15px rgba(0,0,0,0.15);
  border: 1px solid var(--borda);
}

.panel-title {
  text-align: center;
  color: var(--verde);
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
}

/* TABELA (container dinâmico mantido) */
.table-container {
  width: 100%;
  overflow-x: auto;
  transition: opacity .3s ease;
}
.fade-out { opacity: 0.4; }

/* ===== FOOTER ===== */
footer {
  text-align: center;
  padding: 20px;
  color: #444;
  border-top: 1px solid #ccc;
  font-size: 13px;
  margin-top: 40px;
}
footer strong { color: var(--verde); }

.ligas {
  margin: 30px auto 20px;
  max-width: 1200px;
  background: #0d0e11;
  border-radius: 14px;
  padding: 25px 30px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  border: 1px solid #0d0e11;
}

.ligas h2 {
  color: #222;
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 20px;
}

.ligas-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-start;
    justify-content: center; /* ✅ centraliza tudo */
}

.liga-card {
  background: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  width: 220px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.liga-card:hover {
  transform: translateY(-4px);
  border-color: #00a8ff;
  box-shadow: 0 0 15px rgba(0,168,255,0.15);
}

.liga-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.liga-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.liga-card img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-top: 10px;
}

/* Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 22px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4dc101;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* Card ativo */
.liga-card.ativa {
  border-color: #4dc101;
  box-shadow: 0 0 18px rgba(77,193,1,0.2);
}

/* 🔹 Mantém o container das competições com o mesmo tamanho do painel da tabela */
.ligas {
  background: #0d0e11;
  border-radius: 14px;
  padding: 25px 30px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  border: 1px solid #0d0e11;
  margin: 40px auto 0;
  max-width: 1200px; /* mesmo limite do painel */
  width: 100%;       /* ocupa a largura do painel */
}

/* 🔹 Uniformiza o painel da tabela pra manter alinhamento */
.panel {
  background: #010d15;
  border-radius: 14px;
  max-width: 1200px; /* mesmo valor da seção .ligas */
  margin: 30px auto;
  padding: 25px;
  box-shadow: 0 0 15px rgba(0,0,0,0.15);
  border: 1px solid var(--borda);
  width: 100%;
}


/* =================================================== */
/* 📱 AJUSTE COMPLETO DE LAYOUT MOBILE - ESTILO EXTREMETIPS */
/* Mantém a estrutura original, apenas reorganiza visualmente */
/* =================================================== */

@media (max-width: 768px) {

  /* ======= GERAL ======= */
  html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: var(--fundo);
  }

  main, section, .panel, .ligas, .filtros {
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
  }

  /* ======= CABEÇALHO ======= */
  .header, .navbar, .topbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 14px 0;
  }

  .logo {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
  }

  .partner img {
    height: 28px;
    width: auto;
  }

  /* ======= MENU ======= */
  .menu, .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .menu a, .nav-links a {
    display: block;
    text-align: center;
    font-size: 15px;
    padding: 10px 0;
    width: 90%;
    border-radius: 6px;
  }

  /* ======= CARDS ======= */
  .ligas {
    padding: 20px 0;
    text-align: center;
  }

  .ligas h2 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 12px;
  }

  .ligas-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .liga-card {
    width: 100%;
    max-width: 340px;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    padding: 14px;
  }

  .liga-card img {
    width: 80px;
    height: 80px;
  }

  .liga-card h3 {
    font-size: 15px;
    margin-bottom: 6px;
  }

  /* ======= FILTROS ======= */
  .filtros {
    padding: 15px 0;
    margin-top: 10px;
  }

  .filtro-boxes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .filtro-item {
    width: 90%;
    text-align: center;
    font-size: 14px;
  }

  /* ======= PAINEL / TABELA ======= */
  .panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin: 20px auto;
    padding: 16px;
    max-width: 95%;
  }

  .panel-title {
    text-align: center;
    color: var(--verde, #4dc101);
    font-size: 17px;
    margin-bottom: 14px;
    font-weight: 700;
  }

  .table-container {
    width: 100%;
    overflow-x: hidden;
    border-radius: 12px;
  }

  table {
    width: 100%;
    min-width: unset;
    font-size: 11px;
    border-collapse: collapse;
  }

  th, td {
    padding: 3px 2px;
    text-align: center;
    white-space: nowrap;
  }

  th {
    font-size: 11px;
    font-weight: 600;
  }

  tr:nth-child(even) {
    background: rgba(0,0,0,0.02);
  }

  /* ======= ESPAÇAMENTO GERAL ======= */
  .resumo-top, .filtro-wrapper, .table-container, .ligas-grid {
    margin-bottom: 14px;
  }

  /* ======= FOOTER ======= */
  footer {
    font-size: 12px;
    text-align: center;
    padding: 18px;
    margin-top: 20px;
  }
}

/* ======= CELULARES MENORES (até 480px) ======= */
@media (max-width: 480px) {
  .panel {
    padding: 12px;
  }
  .liga-card {
    max-width: 300px;
    padding: 12px;
  }
  th, td {
    font-size: 10px;
    padding: 2px;
  }
  .panel-title {
    font-size: 15px;
  }
}

:root {
  --verde: #4dc101;
  --grad-telegram: linear-gradient(90deg, #7ae600, #e7e400);
}

/* ===== HEADER ===== */
.navbar {
  background: var(--verde);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  font-weight: 700;
  font-size: 22px;
}

.logo .fut {
  color: #fff;
}
.logo .zone {
  color: #f0c808;
}

.partner {
  height: 30px;
  width: auto;
}

/* ===== MENU DESKTOP ===== */
.menu {
  display: flex;
  gap: 20px;
}

.menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: 0.25s;
}
.menu a:hover,
.menu a.active {
  text-decoration: underline;
}

/* ===== BOTÃO MENU ===== */
.menu-toggle {
  display: none;
  background: none;
  border: 2px solid #fff;
  color: #fff;
  font-size: 22px;
  border-radius: 6px;
  width: 38px;
  height: 34px;
  cursor: pointer;
  transition: 0.25s;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
  }

  .menu {
    display: none;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 60px; /* abaixo do header */
    left: 0;
    right: 0;
    background: rgba(77, 193, 1, 0.95);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    padding: 20px 0;
    gap: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    animation: slideDown 0.25s ease;
  }

  .menu.active {
    display: flex;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .menu a {
    width: 90%;
    text-align: center;
    font-size: 16px;
    padding: 10px;
    border-radius: 6px;
    transition: 0.25s;
  }

  .menu a:hover {
    background: rgba(255, 255, 255, 0.15);
  }
}

/* ====== GRID 2x2 COMO NO PRINT ====== */
@media (max-width: 768px) {
  /* vira 2 colunas e elimina sobras laterais */
  .ligas-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 8px;               /* “respiro” nas bordas */
    justify-items: stretch;
  }

  /* card com duas colunas internas: (esquerda: título+toggle) (direita: logo) */
  .liga-card {
    width: 100% !important;
    max-width: none !important;
    height: 92px !important;      /* altura uniforme como no print */
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: 1fr 56px !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
  }

  /* bloco esquerdo empilhado (título em cima, toggle embaixo) */
  .liga-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* título menor pra caber bem em 2 colunas */
  .liga-card h3 {
    font-size: 14px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  /* toggle compacto */
  .switch {
    transform: scale(0.9);
    transform-origin: left center;
  }

  /* logo à direita, alinhado no topo/centro, tamanho fixo */
  .liga-card img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    justify-self: end !important;
  }

  /* remove qualquer overlay “indisponível” alto demais */
  .liga-card:not(.ativa)::after {
    font-size: 11px !important;
  }
}

/* (opcional) em telas muito pequenas, ainda dá pra manter 2 colunas
   sem quebrar, reduzindo um pouco mais a altura e a logo */
@media (max-width: 360px) {
  .liga-card { height: 86px !important; }
  .liga-card img { width: 44px !important; height: 44px !important; }
}


/* ====== DESKTOP / LARGE (sem scroll) ====== */
.table-container{
  width: 100%;
  overflow-x: hidden;      /* ✅ nada de barra no desktop */
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: unset;        /* ✅ libera largura pra caber sem scroll */
}

th, td{
  padding: 6px 4px;
  white-space: nowrap;
  vertical-align: middle;
}

/* ====== MOBILE/TABLET (com scroll horizontal) ======
   ajuste o breakpoint se quiser (1024px, 991px, 768px, etc.) */
@media (max-width: 1024px){
  .panel{ padding: 14px; }

  .table-container{
    overflow-x: auto;                    /* ✅ scroll só aqui */
    -webkit-overflow-scrolling: touch;   /* inércia iOS */
    margin: 0 -8px;
    padding: 0 8px;
  }

  table{
    min-width: 1320px;   /* ✅ garante todas as 20 colunas; aumente se precisar */
  }

  th, td{ padding: 5px 3px; }
  .placar-box .score{ font-size: 12px; }
  .placar-box .teams{ font-size: 8px; }

  /* barra de rolagem mais discreta no mobile */
  .table-container::-webkit-scrollbar{ height: 8px; }
  .table-container::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.2);
    border-radius: 8px;
  }
}

/* ===== DESKTOP: centralizar HORA e não cortar "GOLS" ===== */
@media (min-width: 1025px){

  /* 1ª coluna (HORA) — header e linhas */
  thead tr:nth-of-type(2) th:first-child{
    width: 72px;
    min-width: 72px;
    display: flex;             /* garante centro real */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px 4px;
    white-space: nowrap;
  }
  .hora-header{
    width: 72px;
    min-width: 72px;
    text-align: center;
    padding: 6px 4px;
    white-space: nowrap;
  }

  /* "DADOS" com folga para não empurrar "GOLS" */
  thead tr:nth-of-type(2) th.stat-header{
    min-width: 84px;
    text-align: center;
    white-space: nowrap;
  }

  /* Última coluna "⚽ Gols" — dá folga para aparecer o S */
  thead tr:nth-of-type(2) th:last-child{
    min-width: 96px;           /* ↑ aumente p/ 104/112 se quiser mais folga */
    text-align: center;
    padding: 6px 8px;
    white-space: nowrap;       /* não quebra G-O-L-S */
    overflow: visible;         /* não corta a última letra */
  }
  td.stat-azul{
    min-width: 96px;
    text-align: center;
    padding: 6px 8px;
    white-space: nowrap;
    overflow: visible;
  }

  /* Evita o "encostar" na borda direita do container */
  .table-container{
    overflow-x: hidden;        /* sem scroll no desktop */
    padding-inline: 14px;      /* respiro lateral evita corte visual */
  }

  /* Mantém cabeçalhos compactos mas legíveis */
  thead th{
    line-height: 1.2;
  }
}

/* tamanho do logo */
.header .logo img{
  height: 44px;      /* desktop */
  width: auto;
  display: block;
}

/* mobile/tablet: um pouco menor pra caber com o menu */
@media (max-width: 768px){
  .header .logo img{ height: 36px; }
}
@media (max-width: 480px){
  .header .logo img{ height: 32px; }
}

/* --- Gradiente do header no estilo da logo (azul → verde) --- */
.header{
  /* fallback */
  background: #4dc101;
  /* gradiente principal */
  background: linear-gradient(90deg, #26be86 0%, #0729b5 90%, #0729b5 100%);
  /* um leve brilho pra dar profundidade */
  box-shadow: 0 3px 12px rgba(0,0,0,.25);
}

/* garante contraste dos itens sobre o gradiente */
.header .logo,
.header .menu a,
.header .menu a svg,
.header .partner img,
.menu-toggle{
  color:#fff;
  fill:#fff;
}

/* se quiser o gradiente um pouco mais “azulado” no começo, troque #0a8cff por #0690ff */
/* se quiser mais “verde” no fim, aumente o % do #4dc101 */

/* realça a logo sobre o gradiente */
.header .logo img,
.header .logo svg,
.header .logo { /* se for texto/SVG */
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.25))
    drop-shadow(0 0 8px rgba(0,0,0,.25));
}

:root {
  --bg:#000;
  --panel:#111214;
  --panel-2:#0d0e10;
  --line:rgba(255,255,255,.08);
  --muted:#b8bcc6;
  --text:#f5f7fb;
  --green:#24e28c;
  --green-2:#00c176;
  --blue:#19b0ff;
  --red:#e53935;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:14px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* ===== HEADER ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #0a0b0c;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 2px 14px rgba(0,0,0,.6);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.logo img {
  height: 36px;
  width: auto;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.6));
}
.menu {
  display: flex;
  gap: 18px;
}
.menu a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .25s ease;
}
.menu a.active,
.menu a:hover {
  color: var(--green);
}
.partner img {
  height: 24px;
  opacity: .8;
  filter: brightness(0.9);
}

/* ===== LIGAS ===== */
.ligas {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 18px;
}
.ligas h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  background: linear-gradient(90deg,var(--green),var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ligas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 18px;
}
.liga-card {
  background: linear-gradient(180deg,#0d0e11,#0a0b0c);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.liga-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(36,226,140,.15);
}
.liga-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.liga-top h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.liga-card img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  filter: brightness(1.1);
  margin-top: 8px;
}
.liga-card.ativa {
  border: 1px solid rgba(36,226,140,.35);
  box-shadow: 0 6px 22px rgba(36,226,140,.15);
}

/* Switch modernizado */
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}
.switch input { display:none; }
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255,255,255,.1);
  border-radius: 20px;
  transition: background .3s ease;
}
.slider:before {
  position: absolute;
  content: "";
  height: 14px; width: 14px;
  left: 3px; bottom: 3px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform .3s ease, background .3s ease;
}
input:checked + .slider {
  background: linear-gradient(90deg,var(--green),var(--blue));
}
input:checked + .slider:before {
  transform: translateX(18px);
  background: #fff;
}

/* ===== PAINEL DA TABELA ===== */
.panel {
  max-width: 1200px;
  margin: 40px auto;
  padding: 22px;
  background: linear-gradient(180deg,#0d0e11 0%,#0a0b0c 100%);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.panel-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--green);
  text-align: center;
}
.table-container {
  overflow-x: auto;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.05);
  padding: 10px;
}

/* ===== FOOTER ===== */
footer {
  color: #8b8f98;
  text-align: center;
  padding: 32px 0 28px;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: 14px;
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width:768px){
  .menu { display:none; }
  .menu-toggle { display:block; }
  .header-inner { justify-content: space-between; }
}

.hourglass {
  animation: pulseHourglass 1.5s infinite ease-in-out;
  opacity: 0.85;
  display: inline-block;
  vertical-align: middle;
}
@keyframes pulseHourglass {
  0% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50% { transform: scale(1.1) rotate(15deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
}