:root{
  --bg:#f6f7f9; --card:#ffffff; --texto:#14181f; --texto2:#5a6472;
  --acento:#0a7d34; --acento-contraste:#ffffff; --chip:#eef2f0; --chip-texto:#1d3a29;
  --vivo:#c0271d; --linha:#e6e9ee;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1216; --card:#171b21; --texto:#eef1f5; --texto2:#a3adba;
    --acento:#38c06a; --acento-contraste:#08130b; --chip:#1e2a24; --chip-texto:#bfe7cf;
    --vivo:#ff5a4d; --linha:#262c34;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:125%}
body{margin:0;background:var(--bg);color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.4;
  /* trava a largura na tela: um único elemento largo demais esticava a página
     inteira (e junto o menu fixo, que fica left:0/right:0). "clip" não cria
     área de rolagem, então o seletor de dias com position:sticky continua funcionando. */
  overflow-x:clip}
.wrap{max-width:640px;margin:0 auto;padding:0 12px 32px}
header.topo{padding:14px 12px 6px;text-align:center}
header.topo h1{font-size:1.4rem;margin:0 0 2px}
header.topo p{margin:0;color:var(--texto2);font-size:.95rem}

.seletor-dias{position:sticky;top:0;z-index:5;background:var(--bg);
  display:flex;gap:8px;overflow-x:auto;padding:10px 4px;scrollbar-width:none}
.seletor-dias::-webkit-scrollbar{display:none}
.seletor-dias a{flex:0 0 auto;min-width:64px;min-height:52px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  padding:6px 12px;border-radius:12px;background:var(--card);color:var(--texto);
  text-decoration:none;border:1px solid var(--linha);font-weight:600}
.seletor-dias a.ativo{background:var(--acento);color:var(--acento-contraste);border-color:var(--acento)}

.competicao{margin:22px 4px 8px;font-size:.85rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--texto2);font-weight:700}
.jogo{background:var(--card);border:1px solid var(--linha);border-radius:14px;
  padding:14px 16px;margin:10px 0;box-shadow:0 1px 3px rgba(0,0,0,.06)}
/* jogo rolando: borda avermelhada sutil destaca de relance */
.jogo:has(.ao-vivo){border-color:color-mix(in srgb, var(--vivo) 45%, var(--linha))}
.jogo .linha1{display:flex;align-items:stretch;gap:14px}
/* bloco da hora: data (quando houver) em cima, hora grande, selo embaixo */
.jogo .hora{flex:0 0 auto;min-width:86px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
  font-size:1.45rem;font-weight:700;line-height:1.1}
.jogo .hora .hora-data{font-size:.74rem;font-weight:600;color:var(--texto2);
  text-transform:uppercase;letter-spacing:.02em}
.jogo .hora .ao-vivo,.jogo .hora .fim{margin-left:0}
.jogo .times{display:flex;flex-direction:column;justify-content:center;gap:9px;flex:1;
  min-width:0;border-left:1px solid var(--linha);padding-left:14px}
.jogo .time{display:flex;align-items:center;gap:10px;font-size:1.15rem}
.jogo .time>span:not(.placar){min-width:0;overflow-wrap:anywhere}
.jogo .time img{width:28px;height:28px;object-fit:contain;flex:0 0 auto}
.canais{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.canais-icone{font-size:1.05rem;opacity:.8;flex:0 0 auto}
.chip{background:var(--chip);color:var(--chip-texto);border-radius:999px;
  padding:6px 12px;font-size:.95rem;font-weight:600}
.ao-vivo{display:inline-block;background:var(--vivo);color:#fff;border-radius:6px;
  padding:2px 8px;font-size:.8rem;font-weight:700;margin-left:8px;animation:pulso 1.6s infinite}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){.ao-vivo{animation:none}}
.vazio{text-align:center;color:var(--texto2);padding:40px 12px;font-size:1.1rem}

:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
footer.rodape{text-align:center;color:var(--texto2);font-size:.8rem;margin-top:24px}
.instalar-app{display:inline-block;min-height:48px;padding:0 20px;margin:0 auto 14px;
  border:none;border-radius:12px;background:var(--acento);color:var(--acento-contraste);
  font-weight:700;font-size:1rem;cursor:pointer}
.titulo-linha{display:flex;align-items:center;gap:10px;margin:14px 4px 2px}
.titulo-dia{margin:0;font-size:1.2rem;font-weight:700}
.btn-menu{margin-left:auto;min-height:48px;padding:0 16px;border-radius:12px;
  border:1px solid var(--linha);background:var(--card);color:var(--texto);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.btn-menu .ico-filtro{flex:0 0 auto}
.btn-menu-contador{font-weight:800;font-size:1rem;line-height:1}
.btn-menu.filtrando{background:var(--acento);color:var(--acento-contraste);border-color:var(--acento)}

/* Menu de opções (abre pelo funil): ordenar + filtrar campeonatos */
.controles{display:flex;flex-direction:column;gap:8px;margin:8px 4px 6px;
  background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:12px}
.secao-titulo{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--texto2);font-weight:700;margin:2px 2px 0}
.filtro-lista{display:flex;flex-direction:column;gap:2px}
.visao{display:flex;width:100%;gap:4px;background:var(--card);
  border:1px solid var(--linha);border-radius:14px;padding:4px}
.visao-btn{flex:1;min-height:46px;border:none;border-radius:10px;background:transparent;
  color:var(--texto);font-weight:700;font-size:1rem;cursor:pointer}
.visao-btn.ativo{background:var(--acento);color:var(--acento-contraste)}
.filtro-btn{width:100%;min-height:48px;border-radius:14px;border:1px solid var(--linha);
  background:var(--card);color:var(--texto);font-weight:700;font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px}
.filtro-btn .ico-filtro{flex:0 0 auto}
.filtro-btn.filtrando{background:var(--acento);color:var(--acento-contraste);border-color:var(--acento)}
.filtro-contador{font-weight:800}
.filtro-painel{background:var(--card);border:1px solid var(--linha);border-radius:14px;
  padding:10px 14px;margin:0 4px 8px}
.filtro-todos{min-height:44px;padding:0 14px;border-radius:8px;border:none;
  background:var(--acento);color:var(--acento-contraste);font-weight:700;margin-bottom:8px;cursor:pointer}
.filtro-item{display:flex;align-items:center;gap:10px;min-height:48px;font-size:1.1rem;cursor:pointer}
.filtro-item input{width:22px;height:22px}

/* Etiqueta do campeonato no card (visão por horário / sem JS) */
.card-comp{font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--texto2);margin-bottom:8px}
.lista.por-campeonato .card-comp{display:none}

/* ===== Menu inferior (padrão de app) ===== */
body{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
.menu-inferior{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  align-items:stretch;
  /* altura garantida: a barra não encolhe quando o navegador do celular
     mostra/esconde a própria barra de endereço */
  height:auto;min-height:68px;
  /* Folga embaixo: o Chrome do Android desenha por baixo da barra do sistema e
     nem sempre informa a área segura (env fica 0). Sem esta folga mínima os
     rótulos do menu ficam escondidos atrás dos botões do aparelho. */
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--card);border-top:1px solid var(--linha);
  box-shadow:0 -2px 10px rgba(0,0,0,.06);
  /* camada própria de composição: evita o "tremer/encolher" do position:fixed no iOS */
  transform:translateZ(0);backface-visibility:hidden;will-change:transform}
.menu-inferior a{flex:1 1 0;min-width:0;height:68px;min-height:68px;
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;text-decoration:none;
  color:var(--texto2);font-size:.82rem;font-weight:600;padding:6px 2px;
  /* toque: sem atraso de duplo-toque, sem seleção acidental, sem flash azul */
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease}
.menu-inferior a span{white-space:nowrap;position:relative}
.menu-inferior a svg{flex-shrink:0;position:relative;
  width:26px;height:26px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* pílula suave atrás do item ativo: o "onde estou" fica visível de relance */
.menu-inferior a.ativo::before{content:'';position:absolute;inset:6px 6px;
  border-radius:14px;background:color-mix(in srgb, var(--acento) 13%, transparent)}
.menu-inferior a.ativo{color:var(--acento);font-weight:700}
.menu-inferior a.ativo svg{stroke-width:2.4}
/* feedback ao tocar */
.menu-inferior a:active{transform:scale(.94)}
@media (prefers-reduced-motion: reduce){
  .menu-inferior a{transition:none}
  .menu-inferior a:active{transform:none;opacity:.7}
}

/* ===== Cartões e listas das novas telas ===== */
.painel{background:var(--card);border:1px solid var(--linha);border-radius:14px;
  padding:14px 16px;margin:12px 4px}
.painel h2{margin:0 0 8px;font-size:1.1rem}
.painel p{margin:0 0 8px;color:var(--texto2)}
.aviso{background:var(--chip);color:var(--chip-texto);border-radius:12px;
  padding:12px 14px;margin:12px 4px;font-weight:600}

/* Tabela de classificação */
.tabela-wrap{overflow-x:auto;margin:8px 4px 18px;-webkit-overflow-scrolling:touch}
table.classificacao{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--linha);border-radius:14px;overflow:hidden}
table.classificacao th,table.classificacao td{padding:10px 8px;text-align:center;
  border-bottom:1px solid var(--linha);font-size:1rem;white-space:nowrap}
table.classificacao th{background:var(--chip);color:var(--chip-texto);
  font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}
table.classificacao td.time{text-align:left;white-space:normal;min-width:150px}
table.classificacao td.time span{display:inline-flex;align-items:center;gap:8px}
table.classificacao td.time img{width:24px;height:24px;object-fit:contain}
table.classificacao td.pos{font-weight:700;width:34px}
table.classificacao td.pts{font-weight:800;color:var(--acento)}
table.classificacao tr.meu-time td{background:color-mix(in srgb, var(--acento) 14%, transparent)}
.grupo-titulo{margin:18px 4px 6px;font-size:.9rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--texto2)}

/* Seleção de times */
.times-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 4px}
.time-op{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 12px;
  background:var(--card);border:2px solid var(--linha);border-radius:12px;cursor:pointer;
  font-size:1.02rem;min-width:0}
.time-op img{width:30px;height:30px;object-fit:contain;flex:0 0 auto}
.time-op input{width:22px;height:22px;flex:0 0 auto}
/* sem min-width:0 o nome do time não encolhe e estica a página para além da tela */
.time-op span{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.time-op.marcado{border-color:var(--acento);background:color-mix(in srgb, var(--acento) 10%, var(--card))}
.busca-times{width:calc(100% - 8px);min-height:52px;font-size:1.05rem;padding:10px 12px;margin:6px 4px;
  border-radius:12px;border:1px solid var(--linha);background:var(--card);color:var(--texto)}
.btn-principal{display:block;width:calc(100% - 8px);min-height:54px;margin:12px 4px;
  border:none;border-radius:14px;background:var(--acento);color:var(--acento-contraste);
  font-weight:700;font-size:1.08rem;cursor:pointer;text-align:center;text-decoration:none;
  line-height:54px}
.btn-secundario{display:block;width:calc(100% - 8px);min-height:52px;margin:10px 4px;
  border:1px solid var(--linha);border-radius:14px;background:var(--card);color:var(--texto);
  font-weight:700;font-size:1rem;cursor:pointer;text-align:center;text-decoration:none;line-height:52px}
.selo-time{display:inline-flex;align-items:center;gap:8px;background:var(--chip);
  color:var(--chip-texto);border-radius:999px;padding:6px 14px;font-weight:700;margin:4px 6px 4px 0}
.selo-time img{width:22px;height:22px;object-fit:contain}
.marca-meu-time{display:inline;font-size:.95em;line-height:1}

/* Placar ao vivo nos cards */
.jogo .time .placar{margin-left:auto;font-weight:800;font-size:1.3rem;
  min-width:26px;text-align:right;color:var(--texto);font-variant-numeric:tabular-nums}
.fim{display:inline-block;background:var(--chip);color:var(--chip-texto);border-radius:6px;
  padding:2px 8px;font-size:.8rem;font-weight:700;margin-left:8px}

/* Escudo do time do coração no menu inferior */
.menu-inferior a img.menu-escudo{width:28px;height:28px;object-fit:contain;position:relative}
/* rádio do time do coração usa o mesmo visual dos cartões */
.time-op input[type=radio]{width:22px;height:22px;flex:0 0 auto;accent-color:var(--acento)}

/* Abas da tela Meu time */
#abas-meutime{margin:6px 0 14px;position:sticky;top:0;z-index:5}