/* Prancheta: visual próprio, pensado para celular em pé (a partir de 320 pontos de largura). */
:root {
  --campo: #17492d; --campo-claro: #1f6b3f; --giz: #f4f1e6;
  --fundo: #efe9d8; --papel: #fffdf6; --tinta: #1b2a21; --suave: #5f6d63; --linha: #ddd5bf;
  --ouro: #b57d0a; --vermelho: #b3261e; --azul: #235a9c; --verde-claro: #e3f0e6;
  --raio: 14px; --sombra: 0 1px 2px rgba(20, 40, 25, .12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --campo: #0f3320; --campo-claro: #1f6b3f; --giz: #eef0e6;
    --fundo: #0e1511; --papel: #17211b; --tinta: #eef0e6; --suave: #9aa89d; --linha: #2b3a30;
    --ouro: #e0aa3e; --vermelho: #ff8a80; --azul: #7fb2ee; --verde-claro: #1c3325; --sombra: none;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
#app.sem-menu { padding-bottom: 24px; }
h1, h2, h3, p { margin: 0; }
small, .suave { color: var(--suave); font-size: .82rem; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--campo); color: var(--giz); }
.topo h1 { flex: 1; font-size: 1.1rem; letter-spacing: .4px; }
.topo .ficha { font-size: .85rem; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .15); font-variant-numeric: tabular-nums; }
.topo .voltar { background: none; border: 0; color: var(--giz); font-size: 1rem; min-height: 44px; padding: 0 8px 0 0; }

main { padding: 14px 16px 0; display: grid; gap: 12px; }

/* Cartões e avisos */
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; box-shadow: var(--sombra); display: grid; gap: 10px; }
.cartao > h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; color: var(--suave); font-weight: 700; }
.aviso { border-radius: 12px; padding: 10px 12px; font-size: .9rem; background: #fff4c2; border: 1px solid #e6cf6a; color: #4b3d00; }
.aviso.erro { background: #fde3e0; border-color: #f0a8a0; color: #6d1510; }
.aviso.ok { background: var(--verde-claro); border-color: var(--campo-claro); color: var(--tinta); }
@media (prefers-color-scheme: dark) { .aviso { background: #3b3410; border-color: #6e5f1c; color: #f5e9a8; } .aviso.erro { background: #3d1a17; border-color: #7d3a34; color: #ffd6d1; } }

/* Botões */
.botao { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 50px; padding: 12px 16px;
  border: 0; border-radius: 12px; background: var(--campo-claro); color: #fff; font-weight: 700; text-align: center; text-decoration: none; }
.botao small { color: rgba(255, 255, 255, .8); font-weight: 400; }
.botao.secundario { background: var(--verde-claro); color: var(--campo-claro); }
.botao.secundario small { color: var(--suave); }
.botao.perigo { background: transparent; color: var(--vermelho); border: 1px solid var(--vermelho); }
.botao:disabled { opacity: .45; cursor: default; }
.botao.grande { min-height: 62px; font-size: 1.1rem; }
.fila { display: flex; gap: 8px; } .fila > * { flex: 1; }
input[type=file] { display: none; }

/* Linhas de lista */
.linha { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 4px; background: none; border: 0; border-bottom: 1px solid var(--linha); text-align: left; }
.linha:last-child { border-bottom: 0; }
.linha .cresce { flex: 1; min-width: 0; display: grid; }
.linha .cresce b, .linha .cresce small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .num { display: grid; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha.sugerido { background: var(--verde-claro); border-radius: 10px; padding-inline: 8px; }
.linha .seta { color: var(--suave); font-size: 1.3rem; }
.bolinha { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1px solid rgba(0, 0, 0, .3); }
.pos { flex: none; width: 38px; text-align: center; font-size: .7rem; font-weight: 800; padding: 4px 0; border-radius: 7px; color: #fff; }
.pos.GOL { background: #8a6d1a; } .pos.DEF { background: #235a9c; } .pos.MEI { background: #1f6b3f; } .pos.ATA { background: #b3261e; }
.etiqueta { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--verde-claro); color: var(--campo-claro); margin-left: 4px; vertical-align: middle; }

/* Abas e chips */
.abas { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--linha); }
.abas button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: none; font-size: .9rem; color: var(--tinta); }
.abas button.ativa { background: var(--papel); font-weight: 700; box-shadow: var(--sombra); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.chips button { flex: none; min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--linha); background: var(--papel); font-size: .88rem; }
.chips button.ativa { background: var(--campo-claro); border-color: var(--campo-claro); color: #fff; font-weight: 700; }

/* Início */
.inicio { min-height: 100vh; min-height: 100dvh; padding: calc(40px + env(safe-area-inset-top)) 20px 28px; align-content: start; gap: 14px;
  background: radial-gradient(circle at 50% -10%, var(--campo-claro), var(--campo) 62%); color: var(--giz); }
.inicio .marca { display: grid; place-items: center; margin-bottom: 4px; }
.inicio h1 { text-align: center; font-size: 2.4rem; letter-spacing: .5px; }
.inicio .lema { text-align: center; opacity: .85; margin-bottom: 10px; }
.inicio .cartao { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: var(--giz); box-shadow: none; }
.inicio .botao.secundario { background: rgba(255, 255, 255, .16); color: var(--giz); }
.inicio .cartao h3, .inicio .cartao .suave, .inicio .cartao small { color: rgba(244, 241, 230, .9); }
.inicio .botao.perigo:not(.secundario) { background: transparent; color: #ffd6d1; border: 1px solid #ffb4ab; }
.inicio .lema { text-wrap: balance; }
.inicio .botao:not(.secundario) { background: #f4f1e6; color: var(--campo); }
.inicio .botao:not(.secundario) small { color: #3c5a47; }
.inicio .rodape { text-align: center; opacity: .6; font-size: .8rem; margin-top: 8px; }

/* Tela do clube */
.heroi { color: #fff; border: 0; background: linear-gradient(135deg, var(--c1), var(--c2)); position: relative; overflow: hidden; }
.heroi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)); }
.heroi > * { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.heroi h2 { font-size: 1.6rem; line-height: 1.15; }
.heroi small { color: rgba(255, 255, 255, .85); }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.numeros b { display: block; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.proximo { display: grid; gap: 2px; }
.proximo .vs { font-size: 1.15rem; font-weight: 700; }
.grande-numero { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lance { padding: 6px 0; border-bottom: 1px dashed var(--linha); font-size: .92rem; } .lance:last-child { border: 0; }
.placar { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; }
.placar b { background: var(--tinta); color: var(--papel); border-radius: 8px; padding: 2px 12px; font-size: 1.2rem; font-variant-numeric: tabular-nums; }

/* Menu de baixo */
nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 6; display: flex;
  padding-bottom: env(safe-area-inset-bottom); background: var(--papel); border-top: 1px solid var(--linha); }
nav button { flex: 1; min-height: 60px; border: 0; background: none; font-size: .72rem; color: var(--suave); display: grid; place-items: center; align-content: center; gap: 0; }
nav button span { font-size: 1.35rem; line-height: 1.2; }
nav button.ativa { color: var(--campo-claro); font-weight: 700; }

/* Confirmação ao escolher o clube */
.folha { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 8; display: grid; gap: 10px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--papel); border-top: 2px solid var(--campo-claro); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
.folha h3 { font-size: 1.1rem; }
.espaco-folha { height: 170px; }