/* ===== Base & layout ===== */
body { font-family: Arial, sans-serif; background:#0b0b0f; color:#e4e8f0; margin:0; display:flex; }
#main { flex:3; padding:16px 18px; margin-right:340px; }
#sidebar {
  width:340px; padding:0; border-left:1px solid #1c2030; background:#06060a; color:#cbd5e1;
  height:100vh; box-sizing:border-box; position:fixed; right:0; top:0; display:flex; flex-direction:column;
}
.sb-half { flex:1 1 50%; min-height:0; display:flex; flex-direction:column; border-bottom:1px solid #111827; }
.sb-half:last-child { border-bottom:none; }
.sb-header {
  margin:0; padding:10px 12px; background:#0a0a12; position:sticky; top:0; z-index:1;
  border-bottom:1px solid #0f172a; display:flex; align-items:center; gap:10px;
}
.sb-header img { height:24px; width:auto; object-fit:contain; display:block; }
.sb-list { flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:6px; min-height:0; }

/* ===== Títulos ===== */
h2 { text-align:left; margin:8px 0 0 2.5%; color:#8b90ff; font-weight:600; }
.champ-gap { height:18px; }

/* ===== Tabela ===== */
table { border-collapse:separate; border-spacing:0 0px; margin:10px auto; width:95%; table-layout:fixed; }
th, td { border:1px solid #1f2437; padding:4px 10px; text-align:left; }
th { background:#06b6d4; position:sticky; top:0; z-index:2; }

/* Linhas em pares (bloco do jogo) */
tbody.pair { --accent:#7c3aed; --rowbg:#14162b; --glow:rgba(124,58,237,0.25); }
tbody.pair.pair-b { --accent:#06b6d4; --rowbg:#0f1f2a; --glow:rgba(6,182,212,0.22); }
tbody.pair tr td { background:var(--rowbg); border-color:#262b43; }

/* tarja colorida ocupando 100% da altura da célula */
tbody.pair tr td:first-child{
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 6px 100% no-repeat,
    var(--rowbg);
  background-origin: border-box;  /* usa a caixa da borda para altura total */
  background-clip: border-box;
  box-shadow: none;               /* remove o inset antigo */
}

tbody.pair tr:hover td {
  box-shadow: inset 5px 0 0 var(--accent), 0 0 0 1px rgba(255,255,255,0.03), 0 0 24px var(--glow);
}

/* Espaço entre jogos (ajuste aqui se quiser menor/maior) */
.gap-row td { border:none !important; padding:0; height:15px; background:transparent !important; box-shadow:none !important; }

/* Colunas e botões da primeira coluna */
.ctl-col { width:56px; text-align:center; }
.ctl-wrap { display:inline-flex; gap:6px; align-items:center; justify-content:center; width:100%; }
.ctl-btn { border:1px solid #2b3050; background:#161a2e; color:#e5e7eb; padding:3px 7px; border-radius:6px; cursor:pointer; }
.ctl-btn:hover { background:#1c2140; }

.col-date { width:80px; }
.col-num  { width:50px; text-align:center !important; font-variant-numeric:tabular-nums; }
.col-jogo { text-align:left; }

/* Ícone de copiar e toast */
.copy-ico {
  display:inline-block; width:16px; height:16px; margin-right:6px; background:#30385a;
  border-radius:4px; cursor:pointer; position:relative;
}
.copy-ico:after {
  content:'⧉'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#cbd5e1;
}
.copy-toast {
  position:fixed; bottom:16px; left:16px; background:#0b1220; color:#e5e7eb; border:1px solid #1f2937;
  padding:6px 10px; border-radius:8px; opacity:0; transition:opacity .2s, transform .2s;
  transform:translateY(6px); pointer-events:none;
}
.copy-toast.show { opacity:1; transform:translateY(0); }

/* Odds clicáveis e alvo 🎯 */
.odd-val { cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:4px; }
.target-flag { font-size:12px; opacity:.85; }

/* Cards do sidebar (alertas) */
.alert-card { border:1px solid #1f2937; background:#0c1220; color:#e5e7eb; padding:10px; border-radius:10px; cursor:pointer; transition:.2s; }
.alert-card:hover { background:#121a30; }
.alert-drop { border-left:5px solid #f87171; }
.alert-juice { border-left:5px solid #34d399; }
.alert-pinnacle.alert-drop { border-left-color:#3b82f6; }
.alert-title { font-weight:600; display:flex; align-items:center; gap:8px; }
/* Badge do Q — cabe 2 dígitos e o sinal de + (ex.: 9Q+) */
/* bolinha: largura = altura; nada de min-width nem padding */
.qtag{
  display:inline-flex;
  width:24px;
  height:24px;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:#0b0d16;
  box-sizing:border-box;
  padding:0;            /* importante p/ manter círculo */
  overflow:hidden;      /* evita deformar se o texto passar */
}

/* cores */
.q1 { background:#9ca3af; } .q2 { background:#f59e0b; } .q3 { background:#ef4444; }
.q4 { background:#a855f7; } .q5 { background:#3b82f6; } .q6 { background:#06b6d4; }
.q7 { background:#22c55e; } .q8 { background:#e879f9; }
.q9plus { background:#fde047; color:#111827; font-size:11px; letter-spacing:-0.2px; } /* 9+ */


/* Cores por nível */
.q1 { background:#9ca3af; }   /* cinza */
.q2 { background:#f59e0b; }   /* âmbar */
.q3 { background:#ef4444; }   /* vermelho */
.q4 { background:#a855f7; }   /* roxo */
.q5 { background:#3b82f6; }   /* azul */
.q6 { background:#06b6d4; }   /* ciano */
.q7 { background:#22c55e; }   /* verde */
.q8 { background:#e879f9; }   /* fúcsia */

/* 9Q+ (para qualquer streak >= 9) */
.q9plus { background:#fde047; color:#111827; } /* amarelo forte, texto escuro */

.dropchip { color:#fde68a; font-weight:700; }
.alert-details { margin-top:4px; font-size:.92em; color:#a3aed0; }

/* Efeito de flash para destacar linha */
@keyframes flashRow { 0%,100% { filter:none; } 50% { filter:brightness(1.7); } }
.flash td { animation: flashRow .6s ease-in-out 5; }

/* Destaque quando Pinnacle/Bet7k está melhor */
.pn-better { color:#22c55e; font-weight:700; }

/* Menu – separador vertical */
.vsep { display:inline-block; width:1px; height:18px; background:#293049; }

/* Botões “danger” pequenos (ex: Resetar Bet7k) */
.btn-danger-sm {
  padding:6px 10px; background:#8b0000; color:#fff;
  border-radius:6px; border:1px solid #2b3050; cursor:pointer;
}
.btn-danger-sm:hover { filter:brightness(1.05); }

/* Wrapper fixo (canto superior esquerdo) */
.fixed-top-left { position:fixed; top:10px; left:10px; z-index:9999; }

/* Overlay de sirene e seus filhos */
.siren-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.55);
  align-items:center; justify-content:center; z-index:9999;
  backdrop-filter: blur(2px); animation: blinkBg 1s linear infinite;
}
.siren-box {
  background:#0b0b0f; border:2px solid #ef4444; padding:18px 22px;
  border-radius:12px; text-align:center; box-shadow:0 0 30px rgba(239,68,68,0.35);
}
.siren-box h3 { margin:0 0 8px 0; color:#fca5a5; }
.siren-box p  { margin:6px 0; color:#e5e7eb; }
.btn-stop {
  margin-top:10px; padding:8px 12px; border-radius:8px;
  border:1px solid #ef4444; background:#1a0b0b; color:#fee2e2; cursor:pointer;
}

/* Toast inicial oculto */
.copy-toast { display:none; }

/* Mensagem vazia */
/* ===== Modal ===== */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:10000}
.modal.show{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.modal-dialog{
  position:relative;max-width:920px;width:min(96vw,920px);max-height:85vh;overflow:auto;
  background:#202334;border:1px solid #1f2937;border-radius:12px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.4)
}
.modal-dialog h3{margin:0 0 8px 0;color:#8b90ff}
.modal-desc{color:#a3aed0;margin:0 0 8px 0}

/* Seções do modal */
.section{border-top:1px solid #1f2937;padding-top:12px;margin-top:12px}
.section h4{margin:0 0 8px 0;color:#e5e7eb}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:6px}
.pref-item{display:flex;gap:10px;align-items:center;background:#0b0f1a;border:1px solid #1f2437;border-radius:8px;padding:10px}

/* Botões */
.btnbar{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn{background:#1f2937;border:1px solid #374151;color:#e5e7eb;padding:8px 12px;border-radius:8px;cursor:pointer;text-decoration:none}
.btn:hover{background:#374151}
.btn-primary{background:#2563eb;border-color:#1d4ed8}
.btn-primary:hover{background:#1d4ed8}
.btn-danger{background:#b91c1c;border-color:#991b1b}
.btn-danger:hover{background:#991b1b}
.muted{color:#94a3b8;font-size:12px}

/* Toast de copia */
.copy-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111827;color:#e5e7eb;
  border:1px solid #374151;border-radius:8px;padding:8px 12px;opacity:0;transition:opacity .2s ease;z-index:10001
}
.copy-toast.show{opacity:1}

/* Sirene/alerta */
.siren-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:11000}
.siren-box{background:#0c1220;border:1px solid #1f2937;border-radius:12px;padding:18px 16px;min-width:280px;text-align:center}
.siren-box h3{margin:0 0 8px 0;color:#ffb4b4}
.btn-stop{margin-top:8px;background:#b91c1c;border:1px solid #991b1b;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}

/* Tabelas & destaques */
.champ-gap{height:10px}
.game-row.flash{animation:flashRow 1s ease-in-out 3}
@keyframes flashRow{0%{outline:2px solid #8b90ff}100%{outline-color:transparent}}
.odd-val{cursor:pointer;position:relative}
.target-flag{margin-left:4px}
.pn-better{font-weight:600}

/* Header/colunas (ajuste de layout opcional) */
.col-date{white-space:nowrap}
.col-jogo{min-width:240px}
.ctl-col{width:50px}
.copy-ico{display:inline-flex;vertical-align:-2px;margin-right:6px;cursor:pointer;opacity:.8}
.copy-ico svg{width:18px;height:18px;fill:#9ca3af}
.copy-ico:hover{opacity:1}

/* Dá espaço só entre jogos (cada tbody) */
tbody.pair {
  display: table-row-group;   /* mantém comportamento normal */
  border-top: 6px solid transparent; /* cria espaço entre blocos */
}

/* Junta linhas dentro do mesmo jogo */
table {
  border-collapse: separate;
  border-spacing: 0;
}

/* controla espaço entre o nome do campeonato (h2) e a tabela */
h2 {
  margin-top: 20px;     /* espaço acima do título */
  margin-bottom: 8px;   /* espaço abaixo do título, entre o h2 e a tabela */
}

/* se quiser controlar direto pela tabela também */
#tabelas table {
  margin-top: 8px;      /* espaço entre título e primeira linha do jogo */
}

/* Espaço logo abaixo do cabeçalho (primeiro jogo) */
#tabelas table > tbody.pair:first-of-type {
  border-top: 3px solid #0b0b0f;   /* aqui você controla só o primeiro */
}

/* Linha consolidada */
 .best-row td {
 background:#1a1d38;
 border-color:#262b43;
 border-color:#262b43;
 border-top-color: transparent;   /* remove o traço externo superior do bloco */
 }


.best-row td:first-child {
  box-shadow: inset 6px 0 0 var(--accent);
}
.best-badge {
  font-size:11px;
  opacity:.85;
  margin-left:6px;
  color:#a3aed0;
}

/* Detalhes (casas) recolhíveis */
tbody.details.collapsed {
  display:none;
}

/* Esconde/mostra as linhas de detalhe (dentro do mesmo <tbody>) */
tr.detail-row.hidden { display: none; }

/* Alinha a 3ª coluna (Jogo) à direita APENAS nas linhas de detalhe */
#tabelas tr.detail-row td:nth-child(3) {
  text-align: right;
  padding-right: 8px; /* aproxime das odds, ajuste se quiser */
}

/* Mantém a linha consolidada (nome do jogo) como estava */
#tabelas tr.best-row td:nth-child(3) {
  text-align: left;
}

/* destaque para odds melhores/iguais à Bolsa */
#tabelas td.col-num.up-odd,
#tabelas .col-num .up-odd {
  color: #22c55e;
  font-weight: 700;
}

/* Modal genérico (se já tiver para prefs, pode reaproveitar classes) */
#mapModal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:9999; }
#mapModal.show { display:flex; }
#mapModal .map-modal { width:min(1000px,95vw); background:#0b0b0f; border:1px solid #1c2030; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.5); }
#mapModal .modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #1c2030; }
#mapModal .modal-header h3 { margin:0; font-size:16px; color:#e4e8f0; }
#mapModal .modal-header .close { background:transparent; color:#94a3b8; border:0; font-size:20px; cursor:pointer; }
#mapModal .modal-body { padding:12px 16px 16px; }
#mapModal .map-actions { display:flex; gap:10px; margin-bottom:10px; }
#mapModal .map-actions input { flex:1; padding:8px 10px; border-radius:8px; border:1px solid #1c2030; background:#06060a; color:#e4e8f0; }
#mapModal .map-actions .btn { padding:8px 10px; border-radius:8px; border:1px solid #1c2030; background:#11131a; color:#e4e8f0; cursor:pointer; }
#mapModal .map-actions .btn:hover { background:#171a22; }

#mapModal .map-table-wrap { max-height:62vh; overflow:auto; border:1px solid #1c2030; border-radius:10px; }
#mapModal .map-table { width:100%; border-collapse:collapse; }
#mapModal .map-table th, 
#mapModal .map-table td { padding:8px 10px; border-bottom:1px solid #1c2030; }
#mapModal .map-table thead th { position:sticky; top:0; background:#0c0d12; z-index:1; }
#mapModal .map-table td input { width:100%; padding:6px 8px; border-radius:6px; border:1px solid #1c2030; background:#ffffff; color:#f70000; }

#mapModal .btn { padding:6px 8px; border-radius:8px; border:1px solid #223; background:#17cb5f; color:#ffffff; cursor:pointer; }
#mapModal .btn:hover { background:#0b9549; }
#mapModal .btn.danger { border-color:#3a1e1e; background:#ff3a3a; }
#mapModal .btn.danger:hover { background:#d70404; }

#mapRows tr:hover { background:#0f1118; }
#mapRows td.bfid { color:#93c5fd; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Inverter ordem na barra do topo */
.toolbar{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Spans (texto de atualização e tempos) vão para a ESQUERDA */
.toolbar #lastUpdateText,
.toolbar #loopTimes{
  order: 1;
}

/* Botão de Configurações vai para a DIREITA */
.toolbar .ctl-btn{
  order: 2;
  margin-left: auto; /* empurra o botão para a direita */
}

/* Sobrepõe o margin-left inline dos spans do HTML */
.toolbar .muted{
  margin-left: 0 !important;
}

/* Inverter a ordem visual da barra do topo */
.toolbar{
  display: flex;
  flex-direction: row-reverse; /* agora o 1º filho (botão) vai para a direita */
  align-items: center;
  gap: 8px;
}

/* os spans têm margin-left inline no HTML; trocamos por margin-right */
.toolbar .muted{
  margin-left: 0 !important;
  margin-right: 12px;  /* ajuste se quiser mais/menos espaço */
}

/* Toolbar na ordem normal e itens ordenados manualmente */
.toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-direction: row !important; /* garante que não ficou row-reverse */
}

/* 1º: texto de atualização */
.toolbar #lastUpdateText{ order:1; }

/* 2º: botão Configurações */
.toolbar .ctl-btn{ order:2; }

/* 3º: métricas (se houver) */
.toolbar #loopTimes{ order:3; }

/* tira a margem-left inline dos spans e usa right */
.toolbar .muted{
  margin-left:0 !important;
  margin-right:12px;
}

.detail-row .ctl-col .ctl-btn{
  font-size: 11px;
  padding: 0 6px;
  line-height: 1;
  height: 20px;
  min-width: auto;
  border-radius: 6px;
}

/* manter os dois botões na mesma linha e bem juntinhos */
.detail-row .ctl-col .ctl-wrap{
  display: inline-flex;
  gap: 4px;
  white-space: nowrap;
  align-items: center;
}

/* Piscar a LINHA inteira (cada TD) por 10s */
td.row-flash-cell {
  animation: rowFlash 1s ease-in-out 5; /* 1s x 10 = 10s */
}
@keyframes rowFlash {
  0%   { background-color: rgba(56,189,248,0); }
  35%  { background-color: rgba(56,189,248,.18); }
  100% { background-color: rgba(56,189,248,0); }
}

/* Piscar a ODD específica por 10s */
.odd-val.cell-flash {
  box-shadow: 0 0 0 2px rgba(34,197,94,.85) inset;
  background: rgba(34,197,94,.14);
  animation: cellPulse 1s ease-in-out 5; /* 1s x 10 = 10s */
}
@keyframes cellPulse {
  0%   { background: rgba(34,197,94,0); }
  50%  { background: rgba(34,197,94,.18); }
  100% { background: rgba(34,197,94,0); }
}

/* Valor da odd piscando (texto) por 10s */
.odd-val .odd-num.value-flash {
  animation: valueFlash 1s ease-in-out 10; /* 1s × 10 = 10s */
}
@keyframes valueFlash {
  0%   { color: inherit; text-shadow: none; }
  50%  { color: #22c55e; text-shadow: 0 0 6px rgba(34,197,94,.55); }
  100% { color: inherit; text-shadow: none; }
}

/* garante que o espaçador é transparente e não herda nada do bloco */
tbody.pair tr.gap-row td{
  height: 12px;                         /* ajuste do espaço */
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;          /* tira a tarja da 1ª coluna */
}

/* some apenas o CONTORNO externo de cada bloco (tbody.pair) */
tbody.pair tr:first-child td { border-top-color: transparent; }
tbody.pair tr:last-child  td { border-bottom-color: transparent; }
tbody.pair td:first-child     { border-left-color: transparent; }
tbody.pair td:last-child      { border-right-color: transparent; }

/* remove a borda inferior da linha que vem antes do espaçador */
tbody.pair tr.best-row:has(~ tr.gap-row):not(:has(~ tr.detail-row:not(.hidden))) td{
  border-bottom-color: transparent !important;
}

/* THEAD: remove apenas as bordas externas esquerda/direita */
#tabelas table thead th:first-child { border-left: 0 !important; }
#tabelas table thead th:last-child  { border-right: 0 !important; }

/* 1:ctl  2:data  3:jogo  4:casa  5:empate  6:fora  7:juice */
#tabelas th:nth-child(5),
#tabelas td:nth-child(5) {
  width: 64px !important;   /* só Empate fica mais larga */
}

/* Centraliza o t�tulo da coluna 3 ("Jogo") sem mexer no corpo */
#tabelas thead th.col-jogo {
  text-align: center !important;
  vertical-align: middle;
}

/* célula única com cartão */
.map-card-cell { padding: 0; border: none; }

.map-card{
  background: #161824;
  border: 1px solid #27374f;
  border-radius: 10px;
  padding: 12px;
  margin: 8px 0;
}

.map-card__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.map-card__title{
  min-width: 0;
}
.map-card__bfid{
  font-weight: 700;
  color: #8bdcff;
  text-decoration: none;
  display: inline-block;
  margin-right: 8px;
}
.map-card__jogo{
  font-weight: 600;
  color: #eee;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-card__champ, .map-card__when{
  font-size: 12px; color: #aaa; margin-top: 2px;
}

.map-card__actions .btn{ margin-left: 6px; }

.map-card__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
}
.map-field{ display: flex; flex-direction: column; gap: 6px; }
.map-field__label{ font-size: 12px; color: #bbb; }
.map-field input{
  width: 100%;
  height: 28px;
  padding: 6px 8px;
  background: #0f0f0f;
  color: #eaeaea;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  box-sizing: border-box;
}

/* responsivo */
@media (max-width: 820px){
  .map-card__grid{ grid-template-columns: 1fr; }
}

.toolbar{ display:flex; align-items:center; gap:8px; }
.toolbar-spacer{ flex:1; }

.map-card__jogo{
  display:flex; align-items:baseline; gap:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-weight:600; color:#eee;
}
.map-card__bfid{ flex:0 0 auto; font-weight:700; color:#8bdcff; text-decoration:none; }
.map-card__jogo .sep{ flex:0 0 auto; color:#aaa; }

.map-card__meta{
  display:flex; align-items:center; gap:8px;
  color:#58c05b; font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.map-card__meta .champ{ overflow:hidden; text-overflow:ellipsis; }
.map-card__meta .when{ flex:0 0 auto; }
.map-card__meta .sep{ color:#777; }

.map-toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999999;        /* bem acima de modais/overlays */
  pointer-events: none;   /* não bloqueia cliques atrás */
  background: #222;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.map-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.map-toast.error { background: #b91c1c; }

.league-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #333;
}
.league-info {
  max-width: 80%;
  word-break: break-all;
}
.league-form {
  margin-top: 10px;
  display: flex;
  gap: 5px;
}
.league-form input {
  flex: 1;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin-right: 8px;
}

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

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

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

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

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

.switch{position:relative;display:inline-block;width:46px;height:24px;margin-right:8px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#bbb;transition:.2s;border-radius:24px}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;top:3px;background:white;transition:.2s;border-radius:50%}
.switch input:checked + .slider{background:#4caf50}
.switch input:checked + .slider:before{transform:translateX(22px)}

/* (opcional) cantos arredondados no topo */
#tabelas table thead th:first-child,
table.cabecalho thead th:first-child { border-top-left-radius: 8px; }
#tabelas table thead th:last-child,
table.cabecalho thead th:last-child  { border-top-right-radius: 8px; }

.map-searchbar{
  position:relative; display:flex; align-items:center;
  gap:.5rem; padding:.5rem .75rem .5rem 2.5rem;
  background:#12151b; border:1px solid #2b2f3a; border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02);
  transition:border-color .2s, box-shadow .2s; margin:12px 12px 0;
}
.map-searchbar:focus-within{
  border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.25);
}
.map-searchbar__icon{
  position:absolute; left:12px; width:18px; height:18px; fill:#9aa3b2; opacity:.9; pointer-events:none;
}
.map-searchbar__input{
  flex:1; background:transparent; border:0; outline:none; color:#e8edf5;
  font-size:14px; padding:.25rem 0;
}
.map-searchbar__input::placeholder{ color:#8892a3; }
.map-searchbar__clear{
  border:0; background:#222733; color:#cfd6e4; width:24px; height:24px;
  border-radius:50%; cursor:pointer; line-height:24px; text-align:center;
  transition:transform .1s, background .2s; font-size:16px;
}
.map-searchbar__clear:hover{ background:#2d3446; transform:scale(1.05); }
@media (max-width:560px){
  .map-searchbar{ margin:10px; }
}

#mapModal .modal-head{
  display:flex;
  justify-content:center;   /* centraliza horizontalmente */
  align-items:center;       /* alinha verticalmente */
  position:relative;        /* p/ posicionar o botão sem “puxar” o centro */
}

#mapModal .map-close-float{
  position: fixed;           /* fixa na tela */
  z-index: 10050;            /* acima do modal */
  display: none;
  border: none;
  background: #8b90ff;
  color: #0b1220;
  font-size: 18px;
  line-height: 1;
  padding: 10px 12px;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  cursor: pointer;
}
#mapModal.show .map-close-float{ display:block; }

.id-col { width: 60px; text-align: center; }
.id-btns button {
  background: #444;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
}
.id-btns button:hover { background: #17a2b8; }

.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.id-modal {
  background: #111;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  width: 300px;
}
.id-modal input {
  width: 100%;
  margin-bottom: 8px;
  background: #222;
  border: 1px solid #333;
  color: #fff;
  padding: 4px 6px;
  border-radius: 6px;
}
.id-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.id-actions button {
  background: #1CAF9A;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}

body {
  font-family: "Segoe UI", sans-serif;
  background: #0b0b0f;
  color: #fff;
  margin: 0;
  padding: 10px;
}

h1 {
  text-align: center;
  margin-bottom: 15px;
  color: #17a2b8;
}

.odds-table {
  width: 100%;
  border-collapse: collapse;
}

.odds-table th,
.odds-table td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid #222;
}

.main-row {
  background: #121218;
}

.sub-row {
  background: #18181f;
}

.expand-btn {
  background: #17a2b8;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

tbody.collapse {
  display: none;
}

tbody.collapse.show {
  display: table-row-group;
}

.sub-row.hidden { display: none; }
.main-row { cursor: pointer; transition: background 0.2s; }
.main-row:hover { background-color: #152232; }
.sub-row td { background-color: #0d1420; color: #ccc; }

/* Espaçamento entre jogos (linha separadora) */
.table-main tr.gap-row td {
  border: none !important;
  padding: 0 !important;
  height: 14px;           /* ajuste aqui: 12–24px */
  background: transparent !important;
  box-shadow: none !important;
}

/* Se quiser um respiro extra entre campeonatos */
#tabelas h2 { 
  margin: 24px 0 8px;     /* título do campeonato */
}

.table-main {
  margin-bottom: 24px;    /* respiro entre tabelas (caso tenha mais de uma) */
}

/* 🔹 Espaço apenas entre blocos de jogos (após a linha da Pinnacle) */
tr[data-source="pinnacle"] {
  border-bottom: 3px solid #0b0b0f; /* separador discreto entre jogos */
}

tr[data-source="pinnacle"] + tr[data-source="melhores"],
tr[data-source="pinnacle"] + tr.melhores-row {
  border-top: 16px solid transparent; /* cria espaço entre o jogo anterior e o próximo */
}

/* remove o espaçamento extra entre linhas internas */
tr[data-source="nordeste"],
tr[data-source="melhores"] {
  border-bottom: none !important;
}


/* um bloco por jogo */
tbody.pair { display: table-row-group; }

/* sem espaço entre as 3 linhas internas do jogo */
tbody.pair tr { border: none; }

/* espaço APENAS após a linha "Pinnacle" (antes do próximo jogo) */
tbody.pair tr.spacer td {
  height: 14px;             /* ajuste aqui */
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* (opcional) leve divisor abaixo da linha "Pinnacle" */
tbody.pair tr[data-source="pinnacle"] td {
  border-bottom: 1px solid #131722;
}

/* Odds da Nordestebola destacadas em verde */
.nordeste-best {
  color: #22c55e !important;
  font-weight: 700;
}

/* 💹 Flash verde/vermelho para variação de odds */
.flash-up {
  animation: flashUp 0.8s ease-in-out;
}
.flash-down {
  animation: flashDown 0.8s ease-in-out;
}
@keyframes flashUp {
  0%   { background-color: rgba(34,197,94,0.25); }
  50%  { background-color: rgba(34,197,94,0.45); }
  100% { background-color: transparent; }
}
@keyframes flashDown {
  0%   { background-color: rgba(239,68,68,0.25); }
  50%  { background-color: rgba(239,68,68,0.45); }
  100% { background-color: transparent; }
}

/* 💹 Flash verde/vermelho + setinhas de variação */
.flash-up { animation: flashUp 0.8s ease-in-out; }
.flash-down { animation: flashDown 0.8s ease-in-out; }

@keyframes flashUp {
  0% { background-color: rgba(34,197,94,0.25); }
  50% { background-color: rgba(34,197,94,0.45); }
  100% { background-color: transparent; }
}
@keyframes flashDown {
  0% { background-color: rgba(239,68,68,0.25); }
  50% { background-color: rgba(239,68,68,0.45); }
  100% { background-color: transparent; }
}

.odd-arrow {
  font-size: 13px;
  margin-left: 4px;
  font-weight: 700;
  opacity: 0.85;
  animation: arrowFade 1s ease forwards;
}
@keyframes arrowFade {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-4px); opacity: 0; }
}

/* Linha de odds Pinnacle sem juice (fair) */
tr[data-source="fair"] td {
  background-color: #152533;
  color: #66ccff;
  font-style: italic;
}

/* bolinha verde na frente do campeonato vinculado à Pinnacle */
.camp-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 8px;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
}

/* bolinha vermelha para campeonatos SEM vínculo Pinnacle */
.camp-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle;
}
.camp-dot--red{
  background:#ef4444;
  box-shadow:0 0 6px rgba(239,68,68,.6);
}

/* amarelo substituindo vermelho quando marcado */
.camp-dot--yellow {
  background:#facc15;
  box-shadow:0 0 6px rgba(250,204,21,.6);
}