/* ===========================================================================
   PORTAL DO ASSOCIADO
   ===========================================================================
   Desenhado para o polegar, numa coluna só. A navegação mora na barra de baixo
   porque no celular o menu tem de ficar onde a mão já está — e as áreas de
   toque não descem de 44px, que é o mínimo que se acerta em pé, no sol, na
   entrada do clube.
   =========================================================================== */

.socio {
  touch-action: manipulation;
  overflow-x: hidden;
  background: var(--fundo);
  /* A barra de abas é fixa: o conteúdo precisa de chão embaixo, mais a área
     segura do iPhone, senão o último cartão fica debaixo do menu. */
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* ---- barra do topo ---- */
.barra-app {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}
/* Serve para <img class="marca-app"> e para o <picture> antigo: a altura tem de
   valer no elemento que de fato pinta o pixel, senao o PNG de 638x240 entra em
   tamanho natural e estoura a barra. */
.marca-app, .marca-app img { height: 21px; width: auto; display: block; flex: 0 0 auto; }

/* `hidden` precisa vencer o display:flex da barra e da navegacao. Sem isto o
   atributo nao esconde nada, e a barra aparece na tela de login. */
.barra-app[hidden], .abas-app[hidden] { display: none !important; }
.barra-acoes { display: flex; align-items: center; gap: 8px; }
.chip-clube {
  font-size: .72rem; color: var(--texto-fraco);
  max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.icone-botao {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.icone-botao:hover { background: var(--fundo-alt); }
.icone-botao svg { width: 19px; height: 19px; stroke: var(--texto-fraco); fill: none; stroke-width: 1.8; }

.socio main { padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 0 auto; }
/* Toda aba enche a janela, mesmo a curta.
   A barra de abas é `fixed; bottom:0` e nunca se mexe — quem se mexe é a
   janela. Aba longa (Início) rola, o Safari recolhe a própria barra inferior e
   o menu encosta no fim da tela. Aba curta (Agenda vazia, Jogar com uma volta)
   não rola, o Safari mantém a barra dele e o menu aparece deslocado para cima,
   com uma faixa em branco embaixo. Garantindo altura mínima de janela em todas
   as abas, o estado é o mesmo em todas e o menu para de pular. */
.socio main {
  min-height: calc(100dvh - 42px - 76px
    - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
@supports not (height: 100dvh) {
  .socio main { min-height: calc(100vh - 42px - 76px); }
}
/* Na tela de entrada não há abas nem barra: o painel já resolve a altura. */
.socio.sem-abas main { min-height: 0; }
.socio .carta { margin: 0; }
.socio h1 { font-size: 1.35rem; margin: 0; letter-spacing: -.01em; }
.pagina-topo h1 { margin-bottom: 2px; }
.pagina-topo p { margin: 0; font-size: .84rem; }

/* ---- abas de baixo ---- */
.abas-app {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--fundo-carta) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--borda);
}
.abas-app button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 52px; padding: 7px 4px; border: 0; border-radius: 12px;
  background: transparent; color: var(--texto-fraco);
  font: inherit; font-size: .68rem; cursor: pointer;
}
.abas-app button svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; }
svg.icone-preenchido { fill: currentColor !important; stroke: none !important; }
.abas-app button.ativa { color: var(--ace-green-2); }
.abas-app button span {
  white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.abas-app button.ativa svg { stroke-width: 2.1; }

/* ---- cartão de perfil ---- */
.perfil-cartao {
  background: var(--fundo-carta); border: 1px solid var(--borda);
  border-radius: 18px; padding: 18px;
}
.perfil-topo { display: flex; align-items: center; gap: 14px; }
.avatar-grande {
  position: relative; flex: 0 0 auto;
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--ace-green) 0%, #1d5c44 100%);
  color: #fff; font-size: 1.35rem; font-weight: 700; letter-spacing: .02em;
}
.avatar-grande .selo {
  position: absolute; right: -2px; bottom: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ace-green-2); border: 2.5px solid var(--fundo-carta);
}
.avatar-grande .selo svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 3.2; }
.perfil-quem { min-width: 0; }
.perfil-quem h1 { font-size: 1.28rem; line-height: 1.15; }
.perfil-quem p { margin: 2px 0 7px; font-size: .82rem; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 99px;
  background: var(--fundo-alt); color: var(--texto-fraco);
  font-size: .7rem; font-weight: 600;
}
.etiqueta svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 3.2; }
.etiqueta.ok { background: #E4F0E6; color: #1F6B3A; }
:root[data-theme="dark"] .etiqueta.ok { background: #17331F; color: #86C79A; }

.perfil-numeros {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda);
  text-align: center;
}
.perfil-numeros > div + div { border-left: 1px solid var(--borda); }
.perfil-numeros b { display: block; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.02em; }
.perfil-numeros span { font-size: .72rem; color: var(--texto-fraco); }

/* ---- atalhos ---- */
.atalhos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.atalhos button {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 6px; border: 1px solid var(--borda); border-radius: 14px;
  background: var(--fundo-carta); color: var(--texto);
  font: inherit; font-size: .76rem; font-weight: 500; cursor: pointer;
}
.atalhos button:active { transform: scale(.98); }
.bolha {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 12px; background: var(--fundo-alt); flex: 0 0 auto;
}
.bolha svg { width: 18px; height: 18px; stroke: var(--ace-green-2); fill: none; stroke-width: 1.8; }
.bolha.ouro { background: #FAF0DA; }
.bolha.ouro svg { stroke: #A9791B; }
:root[data-theme="dark"] .bolha.ouro { background: #33290F; }

/* ---- gráfico de handicap ---- */
.grafico-hcp { width: 100%; }
.tela-grafico { position: relative; }
.tela-grafico svg { display: block; width: 100%; height: 118px; }
.tela-grafico .area { fill: var(--ace-green-2); opacity: .10; }
.tela-grafico .linha { fill: none; stroke: var(--ace-green-2); stroke-width: 2.2; stroke-linejoin: round; }
.tela-grafico .ponto { fill: var(--ace-green-2); }
.valor-ponto {
  position: absolute; transform: translate(-50%, -145%);
  padding: 1px 6px; border-radius: 7px;
  background: var(--fundo-carta); border: 1px solid var(--borda);
  font-size: .68rem; font-weight: 700; white-space: nowrap;
}
.eixo { display: flex; justify-content: space-between; margin-top: 4px; font-size: .68rem; color: var(--texto-fraco); }
.legenda-grafico { margin: 10px 0 0; font-size: .72rem; color: var(--texto-fraco); }

/* ---- listas ---- */
.socio .lista { display: flex; flex-direction: column; }
.resultado-linha, .jogador-linha, .reserva-linha, .torneio-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--borda);
}
.socio .lista > *:last-child { border-bottom: 0; }
.resultado-linha > div, .jogador-linha > div, .reserva-linha > div, .torneio-linha > div { flex: 1 1 auto; min-width: 0; }
.resultado-linha b, .jogador-linha b, .reserva-linha b, .torneio-linha b { display: block; font-size: .88rem; }
.resultado-linha .fraco, .jogador-linha .fraco, .reserva-linha .fraco, .torneio-linha .fraco {
  display: block; font-size: .76rem;
}
.fraco.menor { font-size: .7rem; opacity: .85; }
.resultado-linha.eu { background: color-mix(in srgb, var(--ace-green-2) 6%, transparent); border-radius: 10px; padding-inline: 8px; }
.resultado-linha.fora { opacity: .72; }

.medalha {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fundo-alt); color: var(--texto-fraco);
  font-size: .85rem; font-weight: 700;
}
.medalha.ouro { background: #F6E4B4; color: #7A5A12; }
.medalha.prata { background: #E4E7E9; color: #5A6165; }
.medalha.bronze { background: #EFD9C6; color: #7A4A22; }

.avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fundo-alt); color: var(--texto-fraco);
  font-size: .76rem; font-weight: 700;
}

button.link {
  border: 0; background: none; padding: 4px 2px; cursor: pointer;
  color: var(--ace-green-2); font: inherit; font-size: .78rem; font-weight: 600;
}

/* ---- botões ---- */
.par-de-botoes { display: flex; gap: 8px; }
.saida-resumo { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--fundo-alt, #f3f6f3); }
.saida-dados { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.saida-dados b { font-size: 16px; }
.par-de-botoes > button { flex: 1 1 auto; }
.socio button.principal, .socio .acoes-fim button, .par-de-botoes > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--borda); background: var(--fundo-carta); color: var(--texto);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.socio button.principal {
  background: var(--ace-green); border-color: var(--ace-green); color: #fff;
}
.socio button.principal:disabled { opacity: .6; }
.socio button.principal svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.socio button.grande { width: 100%; min-height: 52px; font-size: .95rem; }
.acoes-fim { display: flex; flex-direction: column; gap: 8px; }
.acoes-fim button.perigo { color: #A0483C; }

/* ---- subtela ---- */
.subtela-topo { display: flex; align-items: flex-start; gap: 10px; }
.subtela-topo > div { min-width: 0; flex: 1 1 auto; }
.subtela-topo p { margin: 2px 0 0; font-size: .8rem; }
.voltar {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; margin-left: -8px;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.voltar:hover { background: var(--fundo-alt); }
.voltar svg { width: 20px; height: 20px; stroke: var(--texto); fill: none; stroke-width: 2.2; }

/* ---- campeonato privado ---- */
.privado-cartao {
  padding: 13px 0; border-bottom: 1px solid var(--borda); cursor: pointer;
}
.privado-cartao:last-child { border-bottom: 0; }
.privado-cartao.encerrado { opacity: .74; }
.privado-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.privado-topo b { display: block; font-size: .92rem; }
.privado-topo .fraco { font-size: .76rem; }
.privado-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.privado-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--texto-fraco); }
.privado-meta svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.convite { text-align: center; }
.convite p { margin: 0 0 8px; font-size: .82rem; }
.codigo-grande {
  display: block; margin: 4px 0 14px;
  font-size: 2.1rem; font-weight: 700; letter-spacing: .22em;
  color: var(--ace-green); font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .codigo-grande { color: var(--ace-green-3); }
.combinado { margin: 0; font-size: .92rem; font-style: italic; color: var(--texto); }

/* ---- formulário ---- */
.formulario { display: flex; flex-direction: column; gap: 16px; }
.socio .campo { display: flex; flex-direction: column; gap: 6px; }
.socio .campo .rot, .bloco-modalidade .rot {
  font-size: .74rem; font-weight: 700; color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .07em;
}
.socio .campo small { font-size: .72rem; color: var(--texto-fraco); }
.socio .campo input, .navegacao-dia input {
  width: 100%; min-height: 46px; padding: 0 13px;
  border: 1px solid var(--borda); border-radius: 11px;
  background: var(--fundo-carta); color: var(--texto);
  font: inherit; font-size: .95rem;
}
.socio .campo input:focus-visible, .navegacao-dia input:focus-visible {
  outline: 2px solid var(--ace-green-2); outline-offset: 1px; border-color: transparent;
}
.campo--par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bloco-modalidade { display: flex; flex-direction: column; gap: 8px; }
.rodape-forma { margin: 0; font-size: .74rem; color: var(--texto-fraco); text-align: center; line-height: 1.5; }

/* O seletor de modalidade é a decisão principal do formulário: ele muda a
   conta do handicap e o jeito de ganhar. Por isso é cartão grande com o porquê
   de cada escolha, e não um <select> escondido no meio dos campos. */
.modalidades { display: flex; flex-direction: column; gap: 9px; }
.modalidade {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  width: 100%; padding: 14px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--borda); border-radius: 14px;
  background: var(--fundo-carta); color: var(--texto); font: inherit;
  transition: border-color .15s, background .15s;
}
.modalidade > div { flex: 1 1 auto; min-width: 0; }
.modalidade b { display: block; font-size: .92rem; margin-bottom: 3px; }
.modalidade .resumo { display: block; font-size: .78rem; color: var(--texto-fraco); line-height: 1.45; }
.modalidade .porque { display: block; margin-top: 5px; font-size: .74rem; color: var(--ace-green-2); font-weight: 500; }
.modalidade .marca {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 21px; height: 21px; margin-top: 1px;
  border: 1.5px solid var(--borda); border-radius: 50%; background: transparent;
}
.modalidade .marca svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 3.4; opacity: 0; }
.modalidade.ativa { border-color: var(--ace-green-2); background: color-mix(in srgb, var(--ace-green-2) 5%, var(--fundo-carta)); }
.modalidade.ativa .marca { background: var(--ace-green-2); border-color: var(--ace-green-2); }
.modalidade.ativa .marca svg { opacity: 1; }
.selo-recomendado {
  position: absolute; top: -8px; right: 12px;
  padding: 2px 8px; border-radius: 99px;
  background: var(--ace-green); color: #fff;
  font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.nota-allowance { margin: 0; font-size: .74rem; color: var(--texto-fraco); }

.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.segmentado button {
  min-height: 44px; border: 1.5px solid var(--borda); border-radius: 11px;
  background: var(--fundo-carta); color: var(--texto-fraco);
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
}
.segmentado button.ativa { border-color: var(--ace-green-2); color: var(--ace-green-2);
  background: color-mix(in srgb, var(--ace-green-2) 7%, var(--fundo-carta)); }

.codigo-entrada {
  width: 100%; min-height: 62px; padding: 0 14px; text-align: center;
  border: 1.5px solid var(--borda); border-radius: 14px;
  background: var(--fundo-carta); color: var(--texto);
  font: inherit; font-size: 1.7rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase;
}

/* ---- cartão buraco a buraco ---- */
.grade-buracos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.buraco { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.buraco span { font-size: .66rem; color: var(--texto-fraco); font-weight: 600; }
.buraco input {
  width: 100%; min-height: 44px; padding: 0; text-align: center;
  border: 1px solid var(--borda); border-radius: 10px;
  background: var(--fundo-carta); color: var(--texto);
  font: inherit; font-size: 1rem; font-weight: 600;
  -moz-appearance: textfield;
}
.buraco input::-webkit-outer-spin-button, .buraco input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.buraco input:focus-visible { outline: 2px solid var(--ace-green-2); outline-offset: 1px; border-color: transparent; }

/* ---- agenda ---- */
.navegacao-dia { display: grid; grid-template-columns: 46px 1fr 46px; gap: 8px; align-items: center; }
.navegacao-dia button {
  min-height: 46px; border: 1px solid var(--borda); border-radius: 11px;
  background: var(--fundo-carta); color: var(--texto); font: inherit; font-size: 1.1rem; cursor: pointer;
}
.horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.horario {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 52px; padding: 8px 4px;
  border: 1px solid var(--borda); border-radius: 11px;
  background: var(--fundo-carta); color: var(--texto); font: inherit; cursor: pointer;
}
.horario strong { font-size: .92rem; font-variant-numeric: tabular-nums; }
.horario small { font-size: .68rem; color: var(--texto-fraco); }
.horario.minha { border-color: var(--ace-green-2); background: color-mix(in srgb, var(--ace-green-2) 8%, var(--fundo-carta)); }

/* ---- dados ---- */
.dados { display: flex; flex-direction: column; }
.dado { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--borda); }
.dados > .dado:last-child { border-bottom: 0; }
.dado .rot { font-size: .8rem; color: var(--texto-fraco); }
.dado .val { font-size: .9rem; font-weight: 600; text-align: right; }
.dado small { flex-basis: 100%; text-align: right; font-size: .7rem; color: var(--texto-fraco); }

/* ---- pagamento da inscrição ---- */
.pix-codigo {
  width: 100%; margin-bottom: 12px; padding: 11px 12px;
  border: 1px solid var(--borda); border-radius: 11px;
  background: var(--fundo-alt); color: var(--texto);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem; line-height: 1.5; word-break: break-all; resize: none;
}
.botao-arquivo {
  display: block; position: relative; cursor: pointer;
}
.botao-arquivo input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.botao-arquivo span {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 12px;
  background: var(--ace-green); color: #fff;
  font-size: .95rem; font-weight: 600;
}
.botao-arquivo input:disabled + span { opacity: .6; }

/* ---- foto do perfil ----------------------------------------------------
   A foto substitui as iniciais no mesmo círculo, sem mudar o tamanho: trocar a
   foto não pode reflowar o cabeçalho inteiro. O botão de câmera fica no canto
   oposto ao selo da federação, para os dois não brigarem pelo mesmo canto. */
.avatar-grande.com-foto { background: var(--fundo-alt); }
.avatar-grande img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; display: block;
}
.avatar-grande .trocar-foto {
  position: absolute; left: -2px; bottom: -2px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--fundo-carta); border: 1px solid var(--borda);
  box-shadow: var(--sombra);
}
.avatar-grande .trocar-foto svg {
  width: 13px; height: 13px;
  stroke: var(--ace-green); fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.avatar-grande .trocar-foto:focus-within {
  outline: 2px solid var(--ace-green-2); outline-offset: 1px;
}
.acoes-foto { display: flex; justify-content: flex-end; margin-top: -4px; }

/* ---- histórico agrupado por etapa --------------------------------------
   A mesma volta rende uma linha por premiação (categoria e geral). Elas ficam
   DENTRO do cartão da etapa, recuadas e menores, para o olho ler "uma etapa,
   duas premiações" em vez de "duas etapas iguais". */
.etapa-bloco + .etapa-bloco {
  border-top: 1px solid var(--borda); padding-top: 12px; margin-top: 12px;
}
.etapa-bloco .premiacoes {
  margin: 6px 0 0 46px;
  display: flex; flex-direction: column; gap: 2px;
}
.premiacao-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: .78rem; line-height: 1.5;
}
.premiacao-linha .posto {
  flex: 0 0 auto; font-weight: 700; color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* ---- cartão buraco a buraco -------------------------------------------
   O cartão de papel do clube é horizontal, 18 colunas. No celular isso não
   cabe: a mesma tabela vira LINHAS, mantendo as colunas que o jogador lê no
   papel — buraco, par e índice de handicap. Ida e Volta continuam separadas,
   com subtotal, porque é assim que ele confere antes de assinar. */
.cartao-buracos { display: flex; flex-direction: column; gap: 14px; }
.cartao-nove { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cartao-nove thead th {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-fraco); text-align: right; padding: 0 6px 6px;
  border-bottom: 1px solid var(--borda);
}
.cartao-nove thead th:first-child { text-align: left; }
.cartao-nove tbody th {
  text-align: left; font-size: .9rem; font-weight: 700; width: 2.4rem;
  padding: 3px 6px; color: var(--texto);
}
.cartao-nove td { padding: 3px 6px; text-align: right; font-size: .84rem; }
.cartao-nove td.par { color: var(--texto-fraco); width: 2.6rem; }
/* O índice é o dado mais fraco da linha: quem confere tacada não olha para ele
   toda hora, mas precisa dele para saber onde recebe tacada de handicap. */
.cartao-nove td.si { color: var(--texto-fraco); width: 2.6rem; opacity: .72; font-size: .78rem; }
.cartao-nove td.tacadas { width: 3.6rem; padding-right: 0; }
.cartao-nove td.tacadas input {
  width: 100%; min-height: 38px; padding: 0 6px; text-align: right;
  border: 1px solid var(--borda); border-radius: 9px;
  background: var(--fundo-carta); color: var(--texto);
  font: inherit; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cartao-nove td.tacadas input:focus-visible {
  outline: 2px solid var(--ace-green-2); outline-offset: 1px; border-color: transparent;
}
.cartao-nove tbody tr:nth-child(odd) { background: var(--fundo-alt); }
.cartao-nove tfoot th, .cartao-nove tfoot td {
  border-top: 1px solid var(--borda); padding-top: 7px;
  font-weight: 700; font-size: .84rem;
}
.cartao-nove tfoot th { text-align: left; }
.cartao-nove tfoot td.tacadas { padding-right: 6px; color: var(--realce); }
.cartao-resumo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-top: 10px; border-top: 2px solid var(--realce);
}
.cartao-resumo b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }

/* ---- painel de marca: capa E formulário no mesmo verde -------------------
   O guia da ACE manda 60% de verde escuro. Com o formulário dentro do painel, a
   tela de entrada cumpre essa proporção de verdade — e o claro fica reservado
   para as telas de dentro, que são as de leitura diária.

   Sobre verde, tudo inverte: o campo deixa de ser branco com borda cinza e vira
   translúcido com borda clara, e o botão primário troca de lado — fundo claro,
   texto verde escuro. É o mesmo par de cores do guia, na ordem oposta. */
.entrada {
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  min-height: calc(100svh - 38px);
}
@supports not (height: 100svh) { .entrada { min-height: calc(100vh - 96px); } }
/* Sem barra de abas, sem o chão reservado para ela. */
.socio.sem-abas { padding-bottom: 0; }
.painel-marca {
  overflow: hidden; border-radius: var(--raio-g);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .05) 1.4px, transparent 1.5px) 0 0/16px 16px,
    radial-gradient(circle at 72% 62%, rgba(255, 255, 255, .04) 1.4px, transparent 1.5px) 0 0/22px 22px,
    linear-gradient(168deg, var(--ace-green) 0%, #14503A 52%, #0B3325 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(11, 51, 37, .18);
}
.painel-capa { padding: 30px 22px 24px; text-align: center; }
.hero-simbolo {
  height: 58px; width: auto; display: block; margin: 0 auto 13px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .22));
}
.painel-capa h1 {
  font-size: 1.62rem; line-height: 1.14; font-weight: 700;
  letter-spacing: -.02em; margin: 0; color: #fff; text-wrap: balance;
}
/* A promessa fica em UMA linha, sempre: como o texto é fixo e a largura da tela
   não é, o corpo encolhe com a tela em vez de a frase quebrar. */
.hero-promessa {
  margin: 9px auto 0; white-space: nowrap;
  font-size: clamp(.78rem, 3.4vw, 1rem);
  line-height: 1.4; font-weight: 600; letter-spacing: .01em;
  color: var(--ace-green-3);
}
/* Entregas alinhadas à esquerda mesmo com a capa centrada: lista centrada
   obriga o olho a reencontrar o início de cada linha. */
.hero-itens {
  list-style: none; margin: 16px auto 0; padding: 15px 0 0;
  max-width: 34ch; text-align: left;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-direction: column; gap: 9px;
}
.hero-itens li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .84rem; line-height: 1.4;
  color: color-mix(in srgb, #fff 88%, var(--ace-green-3));
}
.hero-itens svg {
  flex: 0 0 auto; width: 13px; height: 13px; margin-top: 3px;
  stroke: var(--ace-green-3); fill: none; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- o formulário, dentro do verde ---- */
.painel-forma {
  padding: 20px 22px 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .12);
  display: flex; flex-direction: column; gap: 13px;
}
.painel-forma .campo { gap: 6px; }
.painel-forma .campo, .painel-forma label {
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: color-mix(in srgb, #fff 72%, var(--ace-green-3));
}
.painel-forma .campo input {
  width: 100%; min-height: 48px; padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 11px;
  background: rgba(255, 255, 255, .08); color: #fff;
  font: inherit; font-size: .95rem; font-weight: 500;
}
.painel-forma .campo input::placeholder { color: rgba(255, 255, 255, .42); font-weight: 400; }
.painel-forma .campo input:focus-visible {
  outline: 2px solid var(--ace-green-3); outline-offset: 1px;
  border-color: transparent; background: rgba(255, 255, 255, .13);
}
.painel-forma hr {
  border: 0; border-top: 1px solid rgba(255, 255, 255, .12); margin: 3px 0;
}
/* Botão primário invertido: claro sobre verde. Verde sobre verde sumiria. */
.painel-forma button.principal {
  min-height: 48px; margin-top: 3px;
  background: var(--ace-off-white); color: var(--ace-green);
  border: 0; border-radius: 12px;
  font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
}
.painel-forma button.principal:hover { background: #fff; }
.painel-forma button.principal:focus-visible {
  outline: 2px solid var(--ace-green-3); outline-offset: 2px;
}
.painel-forma button.link {
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--ace-green-3); text-align: center;
}
.painel-forma button.link:hover { color: #fff; }
.nota-forma {
  margin: 2px 0 0; font-size: .74rem; line-height: 1.5; text-align: center;
  color: rgba(255, 255, 255, .55);
}
/* Aviso sobre verde: o fundo claro dos avisos do app sumiria o texto. */
.painel-forma .aviso {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; border-radius: 10px; padding: 10px 12px; font-size: .84rem;
}
.painel-forma .aviso.erro {
  background: rgba(165, 52, 43, .28); border-color: rgba(255, 160, 150, .45);
}
.painel-forma .aviso.ok {
  background: rgba(123, 177, 122, .2); border-color: rgba(123, 177, 122, .5);
}

/* Assinatura no pé: a marca fecha a tela sem repetir o logo grande. */
.assinatura-marca {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 2px 0 0; padding-top: 4px;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-fraco);
}
.assinatura-marca img { height: 18px; width: auto; opacity: .55; }

/* ---- marca d'água nos estados vazios -----------------------------------
   "Marca d'água" é uma das aplicações oficiais do guia. Estado vazio é onde ela
   cabe: o espaço já está sobrando, e o símbolo em baixo contraste preenche sem
   disputar leitura com o texto. */
.vazio:not(.sc-score) { position: relative; }
.vazio:not(.sc-score)::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 92px; height: 103px; transform: translate(-50%, -56%);
  background: url('/img/ace-simbolo-completo.png') center/contain no-repeat;
  opacity: .05; pointer-events: none;
}


/* ---- ajuste da foto ----------------------------------------------------------
   O recorte é mostrado no formato final — círculo — e não num quadrado com a
   promessa de que depois vira círculo. Quem ajusta precisa ver o que vai sair. */

dialog.ficha {
  max-width: min(92vw, 340px); width: 100%; padding: 20px;
  border: 1px solid var(--borda); border-radius: 18px;
  background: var(--fundo-carta); color: var(--texto);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
dialog.ficha::backdrop { background: rgba(8, 22, 15, .5); backdrop-filter: blur(2px); }
dialog.ficha h2 { margin: 0 0 16px; font-size: 1.1rem; }
dialog.ficha .ficha-acoes { display: flex; gap: 8px; margin-top: 18px; }
dialog.ficha .ficha-acoes button {
  flex: 1 1 auto; min-height: 46px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--borda); background: var(--fundo-carta); color: var(--texto);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
dialog.ficha .ficha-acoes button.principal {
  background: var(--ace-green); border-color: var(--ace-green); color: #fff;
}
.recorte-palco {
  position: relative; width: 260px; height: 260px; margin: 0 auto;
  overflow: hidden; border-radius: 50%;
  background: var(--fundo-alt); cursor: grab;
  touch-action: none;   /* sem isto o arraste rola a página no celular */
  user-select: none; -webkit-user-select: none;
}
.recorte-palco:active { cursor: grabbing; }
.recorte-palco img {
  position: absolute; top: 0; left: 0;
  max-width: none; transform-origin: 0 0;
  pointer-events: none; -webkit-user-drag: none;
}
/* Um anel por cima, para a borda do círculo ficar nítida sobre foto clara. */
.recorte-mascara {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16);
  pointer-events: none;
}
.ajuste-foto .zoom { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; }
.ajuste-foto .zoom svg { width: 18px; height: 18px; stroke: var(--texto-fraco); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.ajuste-foto .zoom input { flex: 1 1 auto; accent-color: var(--ace-green-2); }
.ajuste-foto .fraco { margin: 0; font-size: .78rem; text-align: center; }

/* ---- convite para instalar ---------------------------------------------------
   Fica acima da barra de abas, não por cima dela: cobrir a navegação para
   pedir instalação é cobrar um pedágio que ninguém pediu. */
.convite-instalar {
  position: fixed; left: 12px; right: 12px; z-index: 40;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 10px);
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 16px;
  background: var(--fundo-carta); border: 1px solid var(--borda);
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
  max-width: 540px; margin: 0 auto;
}
.convite-instalar > div { flex: 1 1 auto; min-width: 0; }
.convite-instalar b { display: block; font-size: .88rem; }
.convite-instalar span { display: block; font-size: .76rem; color: var(--texto-fraco); line-height: 1.4; }
.convite-instalar button.principal {
  flex: 0 0 auto; min-height: 40px; padding: 0 15px; border-radius: 11px;
  border: 0; background: var(--ace-green); color: #fff;
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.convite-instalar button.fechar {
  flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: transparent; color: var(--texto-fraco);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.convite-instalar button.fechar:hover { background: var(--fundo-alt); }

/* ---- resultados do clube -----------------------------------------------------
   Oito categorias no Cearense: a barra rola na horizontal em vez de quebrar em
   três linhas e empurrar a classificação para fora da tela. */
.chips {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: 0 0 auto; min-height: 38px; padding: 0 14px; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--fundo-carta); color: var(--texto-fraco);
  font: inherit; font-size: .82rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.chips button.ativa {
  background: var(--ace-green); border-color: var(--ace-green); color: #fff;
}

.linha-etapa {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--borda); cursor: pointer;
}
.linha-etapa:last-child { border-bottom: 0; }
.linha-etapa > div { flex: 1 1 auto; min-width: 0; }
.linha-etapa b { display: block; font-size: .9rem; }
.linha-etapa .fraco { display: block; font-size: .76rem; }
.linha-etapa .seta { color: var(--texto-fraco); font-size: 1.1rem; }

.resultado-linha .pontos {
  flex: 0 0 auto; text-align: right; line-height: 1.1;
}
.resultado-linha .pontos b { display: block; font-size: .95rem; font-variant-numeric: tabular-nums; }
.resultado-linha .pontos span { font-size: .64rem; color: var(--texto-fraco); }
.etapa-a-etapa { font-variant-numeric: tabular-nums; }
.nota-regra { margin: 0 0 10px; font-size: .76rem; }

/* ---- jogar: o cartão da volta ------------------------------------------------
   Quem marca está em pé, no sol, de luva, às vezes com o carrinho andando.
   Um buraco por vez com alvos grandes — grade de dezoito campinhos minúsculos
   é o jeito certo de garantir erro de digitação. */

.volta-andamento { display: flex; align-items: center; gap: 12px; }
.volta-andamento > div { flex: 1 1 auto; min-width: 0; }
.volta-andamento b { display: block; font-size: .92rem; }
.volta-andamento .fraco { display: block; font-size: .78rem; }
.volta-andamento button { flex: 0 0 auto; }

.volta-placar {
  flex: 0 0 auto; width: 54px; text-align: center; line-height: 1.05;
}
.volta-placar b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.volta-placar span { font-size: .68rem; color: var(--texto-fraco); }

.navegacao-buraco {
  display: grid; grid-template-columns: 52px 1fr 52px; gap: 10px;
  align-items: center; margin-bottom: 16px;
}
.navegacao-buraco button {
  min-height: 46px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--fundo-carta); color: var(--texto); font: inherit; font-size: 1.2rem; cursor: pointer;
}
.navegacao-buraco button:disabled { opacity: .35; }
.navegacao-buraco .passo { text-align: center; font-size: .84rem; color: var(--texto-fraco); font-weight: 600; }

/* Acumulado colado ao teclado: uma linha, sem rolar. */
.acumulado-mini {
  display: flex; flex-wrap: nowrap; gap: 4px 10px; align-items: baseline; white-space: nowrap; overflow: hidden;
  margin: -6px 0 12px; padding: 8px 10px; border-radius: 10px;
  background: var(--fundo-alt, #f3f6f3); font-size: .72rem; color: var(--texto-fraco);
}
.acumulado-mini b { font-size: 1.05rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.acumulado-mini .fraco { margin-left: auto; }

/* Teclado de tacadas: quatro colunas (duas linhas), com o PESO da tela —
   número grande, borda firme. Os detalhes (putts, fairway) ficam leves. */
.teclas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.tecla {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 62px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--borda-forte, #c9d3cc); background: var(--fundo-carta); color: var(--texto); font: inherit;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.tecla b { font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tecla span { font-size: .62rem; color: var(--texto-fraco); }
.tecla.no-par { border-color: var(--ace-green-2); }
.tecla.ativa {
  background: var(--ace-green); border-color: var(--ace-green); color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ace-green) 25%, transparent);
}
.tecla.ativa span { color: rgba(255,255,255,.8); }
.tecla.digitada { background: #8a3a2a; border-color: #8a3a2a; box-shadow: 0 0 0 3px rgba(138,58,42,.25); }
.tecla.outro { border-style: dashed; box-shadow: none; }
.tecla.outro b { font-size: 1.2rem; color: var(--texto-fraco); }
.par-de-botoes .mini-acao { padding: 7px 12px; font-size: .8rem; font-weight: 500; }

.parcial-numeros { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-bottom: 14px; }
.parcial-numeros > div + div { border-left: 1px solid var(--borda); }
.parcial-numeros b { display: block; font-size: 1.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.parcial-numeros span { font-size: .7rem; color: var(--texto-fraco); }

/* Aviso de versão nova. Fica no topo, e não embaixo: a barra de abas e o
   convite de instalar já disputam o pé da tela. */
.barra-atualizar {
  position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px;
  z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 14px;
  background: var(--ace-green); color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  max-width: 540px; margin: 0 auto;
}
.barra-atualizar span { flex: 1 1 auto; font-size: .84rem; }
.barra-atualizar button.principal {
  flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 10px;
  border: 0; background: #fff; color: var(--ace-green);
  font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
}

/* ---- atesto do cartão --------------------------------------------------------
   O marcador vê o cartão buraco a buraco. Assinar um "72" sem ver onde as
   tacadas caíram é assinar em branco. */
.busca-marcador {
  width: 100%; min-height: 46px; padding: 0 13px; margin: 12px 0;
  border: 1px solid var(--borda); border-radius: 11px;
  background: var(--fundo-carta); color: var(--texto); font: inherit; font-size: .95rem;
}
.previa-cartao {
  display: block; width: 100%; max-height: 44vh; object-fit: contain;
  border-radius: 12px; background: var(--fundo-alt); margin: 10px 0;
}
.grade-atesto { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.celula-atesto {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 2px; border-radius: 9px;
  border: 1px solid var(--borda); background: var(--fundo-alt);
}
.celula-atesto .n { font-size: .6rem; color: var(--texto-fraco); line-height: 1; }
.celula-atesto b { font-size: 1.02rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.celula-atesto .par { font-size: .55rem; color: var(--texto-fraco); line-height: 1; }
.celula-atesto.abaixo { background: #DCEBE0; border-color: #A9CDB4; }
.celula-atesto.no-par { background: var(--fundo-carta); }
.celula-atesto.acima { background: #F6EEDA; border-color: #E0CDA1; }
.celula-atesto.muito-acima { background: #F6E2DE; border-color: #E0B7AE; }
:root[data-theme="dark"] .celula-atesto.abaixo { background: #17331F; border-color: #2C5C39; }
:root[data-theme="dark"] .celula-atesto.acima { background: #37301D; border-color: #57492A; }
:root[data-theme="dark"] .celula-atesto.muito-acima { background: #3A2521; border-color: #5C382F; }
.jogador-linha .seta, .resultado-linha .seta { color: var(--texto-fraco); font-size: 1.1rem; flex: 0 0 auto; }
.dica-campo { margin: -6px 0 0; font-size: .74rem; color: var(--texto-fraco); line-height: 1.45; }

/* Escolha do tee: as quatro cores do cartão oficial. */
.escolha-tee { display: flex; gap: 6px; flex-wrap: nowrap; }
.chip-tee {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1.5px solid var(--borda, #dcdcd6); border-radius: 99px;
  padding: 7px 3px; background: var(--fundo-carta, #fff); font-size: .74rem;
  flex: 1; justify-content: center; min-width: 0; white-space: nowrap;
}
.chip-tee i { width: 11px; height: 11px; flex: none; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); }
.chip-tee.tee-preto i { background: #222; }
.chip-tee.tee-azul i { background: #2b5f9e; }
.chip-tee.tee-branco i { background: #fff; }
.chip-tee.tee-vermelho i { background: #c0392b; }
.chip-tee.ativo { border-color: var(--ace-green, #0F3D2E); background: var(--realce-suave, #E9F1EC); font-weight: 600; }

/* ---- detalhes do buraco: putts, fairway, areia, penalidade ---- */
.detalhes-buraco { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }
.detalhe-linha { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 8px; }
.detalhe-linha .rot { font-size: .72rem; color: var(--texto-fraco); font-weight: 600; }
.detalhe-linha .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.detalhe-linha .chip {
  min-width: 36px; min-height: 30px; padding: 0 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--borda); background: transparent; color: var(--texto-fraco); font: inherit; font-size: .76rem; font-weight: 500;
}
.detalhe-linha .chip.ativo { background: var(--ace-green); border-color: var(--ace-green); color: #fff; }
.detalhe-linha .contador { display: inline-flex; align-items: center; gap: 10px; }
.detalhe-linha .contador button {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo-carta);
  color: var(--texto); font: inherit; font-size: 1.1rem; cursor: pointer; padding: 0;
}
.detalhe-linha .contador button:disabled { opacity: .35; }
.detalhe-linha .contador b { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.detalhes-buraco .gir { margin: 2px 0 0; font-size: .72rem; color: var(--texto-fraco); }
.detalhes-buraco .gir.sim { color: var(--ace-green-2); font-weight: 600; }

/* ---- estatísticas: tiles, gráficos, medidores ----
   A paleta dos gráficos é a mesma das marcas do cartão: verde abaixo do par,
   terra acima, cinza no par. Validada nos dois temas (ver graficos.js). */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kpis.tres { grid-template-columns: repeat(3, 1fr); }
.kpi { text-align: center; padding: 8px 2px; border-radius: 10px; background: var(--fundo-alt); min-width: 0; }
.kpi b { display: block; font-size: 1.25rem; line-height: 1.1; letter-spacing: -.02em; }
.kpi span { display: block; font-size: .62rem; color: var(--texto-fraco); margin-top: 3px; line-height: 1.2; }
.kpi small { display: block; font-size: .58rem; color: var(--texto-fraco); opacity: .8; margin-top: 2px; line-height: 1.2; }
.chips-periodo { display: flex; gap: 6px; margin: 0 0 12px; }
.chips-periodo .chip {
  min-height: 32px; padding: 0 12px; border-radius: 99px; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 600;
  border: 1px solid var(--borda); background: var(--fundo-carta); color: var(--texto);
}
.chips-periodo .chip.ativo { background: var(--ace-green); border-color: var(--ace-green); color: #fff; }

.gf { display: block; width: 100%; height: auto;
  --gf-eagle: #1c6b3f; --gf-birdie: #5aa35a; --gf-par: #c9c6b8; --gf-bogey: #d98b48; --gf-duplo: #7a3b12;
  --gf-serie: var(--ace-green-2); --gf-guia: var(--borda); --gf-ink: var(--texto-fraco);
}
:root[data-theme="dark"] .gf { --gf-par: #4a5c50; --gf-bogey: #e09a5a; --gf-duplo: #a4562a; --gf-serie: #7BB17A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gf { --gf-par: #4a5c50; --gf-bogey: #e09a5a; --gf-duplo: #a4562a; --gf-serie: #7BB17A; }
}
.gf-linha { margin-top: 4px; }
.gf-empilhada { height: 22px; border-radius: 6px; margin-top: 8px; }
.gf-divergente { margin-top: 4px; }
.gf-guia { stroke: var(--gf-guia); stroke-width: 1; }
.gf-referencia { stroke: var(--gf-ink); stroke-width: 1; stroke-dasharray: none; opacity: .55; }
.gf-zero { stroke: var(--texto); stroke-width: 1; opacity: .5; }
.gf-serie { fill: none; stroke: var(--gf-serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gf-ponto { fill: var(--gf-serie); stroke: var(--fundo-carta); stroke-width: 2; }
.gf-ponto.melhor { fill: var(--gf-eagle); }
.gf-eixo { font-size: 9px; fill: var(--gf-ink); font-family: inherit; }
.gf-eixo.forte { font-weight: 700; fill: var(--texto); }
.gf-rotulo { font-size: 10px; fill: var(--texto); font-family: inherit; font-weight: 600; }
.gf-rotulo.forte { font-size: 11px; font-weight: 700; }
.gf-seg.eagle { fill: var(--gf-eagle); } .gf-seg.birdie { fill: var(--gf-birdie); } .gf-seg.par { fill: var(--gf-par); }
.gf-seg.bogey { fill: var(--gf-bogey); } .gf-seg.duplo { fill: var(--gf-duplo); }
.gf-dentro { font-size: 10px; font-weight: 700; fill: var(--texto); font-family: inherit; }
.gf-dentro.claro { fill: #fff; }
.gf-col.acima { fill: var(--gf-bogey); } .gf-col.abaixo { fill: var(--gf-birdie); } .gf-col.zero { fill: var(--gf-par); }
.gf-legenda { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 6px; margin-top: 8px; font-size: .64rem; color: var(--texto-fraco); }
.gf-legenda > span { display: inline-flex; align-items: center; gap: 5px; }
.gf-legenda b { color: var(--texto); font-variant-numeric: tabular-nums; }
.gf-chave { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.gf-chave.eagle { background: #1c6b3f; } .gf-chave.birdie { background: #5aa35a; } .gf-chave.par { background: #c9c6b8; }
.gf-chave.bogey { background: #d98b48; } .gf-chave.duplo { background: #7a3b12; }
:root[data-theme="dark"] .gf-chave.par { background: #4a5c50; }
:root[data-theme="dark"] .gf-chave.bogey { background: #e09a5a; }
:root[data-theme="dark"] .gf-chave.duplo { background: #a4562a; }
.gf-leitura { margin: 10px 0 0; font-size: .78rem; color: var(--texto-fraco); line-height: 1.45; }
.gf-leitura b { color: var(--texto); }

.medidores { display: flex; flex-direction: column; gap: 10px; }
.medidor-linha { display: grid; grid-template-columns: 1fr 96px 44px; align-items: center; gap: 10px; }
.medidor-rot b { display: block; font-size: .8rem; }
.medidor-rot small { display: block; font-size: .62rem; color: var(--texto-fraco); }
.medidor-valor { text-align: right; font-size: 1rem; font-variant-numeric: tabular-nums; }
.gf-medidor { height: 8px; }
.gf-trilha { fill: var(--realce-suave); }
.gf-cheio { fill: var(--ace-green-2); }

/* ---- volta em grupo: um cartão por pessoa, uma tela por buraco ---- */
.grupo-jogadores { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-bottom: 12px; }
.jogador-do-grupo {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; min-width: 0;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-carta); color: var(--texto); font: inherit; cursor: pointer;
}
.jogador-do-grupo span { font-size: .66rem; color: var(--texto-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.jogador-do-grupo b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.jogador-do-grupo.ativo { border-color: var(--ace-green); background: var(--realce-suave); }
.jogador-do-grupo.ativo span { color: var(--ace-green); font-weight: 600; }
.chips-grupo { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-grupo .chip {
  min-height: 32px; padding: 0 12px; border-radius: 99px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--ace-green); background: var(--realce-suave); color: var(--ace-green); display: inline-flex; align-items: center;
}
.jogador-linha.escolhido { background: var(--realce-suave); border-radius: 10px; }

.convite-linha { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.convite-linha > div:first-child b { display: block; }
.convite-linha > div:first-child span { font-size: .78rem; }
.jogador-linha.convidado { opacity: .75; }

/* ---- eventos e comunicados ----
   A cor vem da categoria (--cor): tag, chip e a barra da data. */
.evento-linha {
  display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); cursor: pointer;
}
.evento-linha > div { flex: 1 1 auto; min-width: 0; }
.evento-linha b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evento-linha .fraco { display: block; font-size: .74rem; }
.evento-data {
  flex: none; width: 44px; height: 44px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cor) 12%, var(--fundo-carta)); border-left: 3px solid var(--cor); color: var(--cor);
}
.evento-data b { font-size: 1.05rem; line-height: 1; font-variant-numeric: tabular-nums; }
.evento-data span { font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; }
.tag-evento {
  display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px; color: var(--cor); background: color-mix(in srgb, var(--cor) 14%, transparent);
}
.chips-categoria { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: none; }
.chips-categoria .chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--fundo-carta); color: var(--texto); font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer;
}
.chips-categoria .chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--cor, var(--texto-fraco)); }
.chips-categoria .chip.ativo { background: var(--ace-green); border-color: var(--ace-green); color: #fff; }
.chips-categoria .chip.ativo i { background: #fff; }
.evento-detalhe .cartaz { display: block; width: 100%; height: auto; border-radius: 12px; margin-bottom: 12px; }
.evento-detalhe .linha-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .76rem; }
.evento-detalhe p { margin: 0 0 10px; font-size: .9rem; line-height: 1.5; }
.texto-evento { white-space: pre-line; }
.botao-link { display: inline-block; margin-top: 6px; padding: 10px 16px; border-radius: 12px; background: var(--ace-green); color: #fff; text-decoration: none; font-weight: 600; font-size: .88rem; }
dialog.aviso-clube { padding: 0; overflow: hidden; max-width: min(92vw, 380px); }
dialog.aviso-clube img { display: block; width: 100%; height: auto; max-height: 52vh; object-fit: cover; }
dialog.aviso-clube .ficha-corpo { padding: 16px 20px 0; }
dialog.aviso-clube h2 { margin: 8px 0 6px; }
dialog.aviso-clube .ficha-acoes { padding: 0 20px 20px; }

/* ---- calendário do mês ---- */
.cal-cabecalho { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 6px; margin-bottom: 10px; }
.cal-cabecalho button {
  min-height: 38px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo-carta); color: var(--texto);
  font: inherit; font-size: 1.1rem; cursor: pointer;
}
.cal-cabecalho .cal-mes { font-size: .95rem; font-weight: 700; border: 0; background: none; }
.cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-semana span { text-align: center; font-size: .62rem; font-weight: 700; color: var(--texto-fraco); padding: 4px 0; }
.cal-dia {
  aspect-ratio: 1 / 1.05; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 5px 0 0;
  border: 1px solid transparent; border-radius: 10px; background: none; color: var(--texto); font: inherit; cursor: pointer; min-width: 0;
}
.cal-dia .num { font-size: .84rem; font-variant-numeric: tabular-nums; line-height: 1; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.cal-dia.hoje .num { background: var(--realce-suave); color: var(--ace-green); font-weight: 700; }
.cal-dia.ativo { background: var(--ace-green); border-color: var(--ace-green); color: #fff; }
.cal-dia.ativo .num { background: none; color: #fff; }
.cal-dia:not(.com-evento) .num { color: var(--texto-fraco); }
.cal-dia.ativo:not(.com-evento) .num { color: rgba(255,255,255,.8); }
.cal-dia .pontos { display: flex; gap: 2px; height: 6px; }
.cal-dia .pontos i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.cal-dia .pontos i.reserva { width: 10px; height: 3px; border-radius: 2px; background: var(--ace-green-3); margin-top: 1.5px; }
.cal-dia.ativo .pontos i { box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.cal-vazio { aspect-ratio: 1 / 1.05; }
.cal-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: .78rem; }
.cal-dia-titulo { font-weight: 600; text-transform: capitalize; }
.cal-dia-titulo b { font-size: 1.05rem; margin-right: 2px; }
.evento-linha.sem-data { padding: 9px 0; }
.evento-cor { flex: none; width: 4px; height: 34px; border-radius: 2px; background: var(--cor); }

/* ---- diálogos com a marca ---- */
dialog.dialogo-ace { padding: 0; overflow: hidden; max-width: min(92vw, 360px); }
dialog.dialogo-ace .dialogo-marca {
  display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--ace-green); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
dialog.dialogo-ace .dialogo-marca img { width: 18px; height: 18px; object-fit: contain; }
dialog.dialogo-ace .ficha-corpo { padding: 18px 20px 0; }
dialog.dialogo-ace h2 { margin: 0 0 10px; font-size: 1.05rem; }
dialog.dialogo-ace .dialogo-texto { margin: 0 0 8px; font-size: .95rem; line-height: 1.45; color: var(--texto); }
dialog.dialogo-ace .dialogo-texto.forte { font-weight: 600; }
dialog.dialogo-ace .dialogo-entrada {
  width: 100%; box-sizing: border-box; margin-top: 8px; min-height: 48px; padding: 0 14px; font: inherit; font-size: 1.15rem;
  border: 1.5px solid var(--borda); border-radius: 12px; background: var(--fundo-carta); color: var(--texto);
}
dialog.dialogo-ace .dialogo-entrada:focus { outline: none; border-color: var(--ace-green-2); }
dialog.dialogo-ace .ficha-acoes { padding: 16px 20px 20px; margin-top: 4px; }
dialog.dialogo-ace .ficha-acoes button.perigo { background: #C24333; border-color: #C24333; color: #fff; }

/* Uma marca d'água só, grande, atrás do scorecard — e não uma em cada
   célula vazia (o `.vazio` da célula de score puxava a regra de cima). */
.sc-grade { position: relative; }
.sc-grade::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 46%; max-width: 190px; aspect-ratio: 92 / 103;
  transform: translate(-50%, -50%); background: url('/img/ace-simbolo-completo.png') center/contain no-repeat;
  opacity: .05; pointer-events: none; z-index: 0;
}
.sc-grade > table { position: relative; z-index: 1; }

/* ---- tee off e formato ---- */
.chips-formato { display: flex; gap: 6px; }
.chips-formato .chip {
  flex: 1; min-height: 36px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo-carta); color: var(--texto);
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.chips-formato .chip.ativo { background: var(--realce-suave); border-color: var(--ace-green); color: var(--ace-green); }
.socio button.tee-off { font-size: 1.05rem; letter-spacing: .02em; }
.socio button.link { display: block; width: 100%; text-align: center; }

/* ---- GPS no buraco ---- */
.gps-numeros { display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: end; text-align: center; margin-bottom: 10px; }
.gps-num b { display: block; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gps-num.forte b { font-size: 2.6rem; color: var(--ace-green); }
.gps-num span { display: block; font-size: .66rem; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.gps-nota { margin: 6px 0 0; font-size: .74rem; }
.gps-painel .link { margin-top: 8px; }
.ponto-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.ponto-linha b { display: block; font-size: .9rem; }
.ponto-linha .fraco { display: block; font-size: .74rem; }
.ponto-linha button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo-carta); color: var(--texto); font: inherit; font-size: .82rem; font-weight: 600; }
.ponto-linha button.principal { background: var(--ace-green); border-color: var(--ace-green); color: #fff; }
.ponto-linha button:disabled { opacity: .4; }

/* ---- mapa do buraco ---- */
.mapa-buraco { position: relative; overflow: hidden; border-radius: 14px; background: #1d2a22; margin: 8px auto 0; touch-action: manipulation; }
.mapa-tiles { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.mapa-tiles img { position: absolute; width: 256px; height: 256px; }
.mapa-desenho { position: absolute; left: 0; top: 0; }
.mapa-desenho .mm circle { fill: #fff; stroke: #0F3D2E; stroke-width: 2; }
.mapa-desenho .mm-green circle { fill: #7BB17A; }
.mapa-desenho .mm-green.forte circle { fill: #2E7D32; stroke: #fff; }
.mapa-desenho .mm-tee circle { fill: #fff; }
.mapa-desenho .mm-alvo circle { fill: #F2C14E; stroke: #fff; }
.mapa-desenho .mm-jogador circle { fill: #2a78d6; stroke: #fff; stroke-width: 2.5; }
.mapa-desenho .mm-jogador .halo { fill: rgba(42,120,214,.25); stroke: none; }
.mapa-desenho .mm text { font: 700 12px system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 3px; }
.mapa-desenho .ml-green { stroke: rgba(255,255,255,.7); stroke-width: 2; stroke-dasharray: 3 3; }
.mapa-desenho .ml-medida { stroke: #F2C14E; stroke-width: 2.5; }
.mapa-desenho .ml-medida.fraca { stroke: rgba(242,193,78,.6); stroke-dasharray: 4 4; }
.mapa-desenho .md { font: 700 13px system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 3px; }
.mapa-desenho .md.forte { font-size: 16px; }
.mapa-norte { position: absolute; right: 10px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.mapa-atribuicao { position: absolute; left: 8px; bottom: 6px; font-size: .58rem; color: rgba(255,255,255,.75); text-shadow: 0 0 3px rgba(0,0,0,.8); }

/* ---- as chamadas principais (Início e Jogar) ---------------------------
   Um só botão preenchido por tela; os outros com borda forte. É a resposta
   ao "não tem peso de botão, tudo é igual" do Tiago. */
.acoes-principais { display: flex; flex-direction: column; gap: 10px; }
.acao-primaria {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px; padding: 0 18px;
  border: 0; border-radius: 14px; background: var(--ace-green); color: #fff; font: inherit; font-size: 1.25rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(15,61,46,.22); cursor: pointer;
}
.acao-primaria svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.2; flex: none; }
.acao-primaria svg.icone-preenchido { fill: currentColor !important; stroke: none !important; }
.acao-primaria.gigante { min-height: 76px; }
.acao-primaria.continuar { background: var(--ace-green-2); justify-content: flex-start; text-align: left; box-shadow: 0 6px 18px rgba(46,125,50,.28); }
.acao-primaria .acao-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.acao-primaria .acao-texto b { font-size: 1.25rem; }
.acao-primaria .acao-texto span { font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acao-primaria:disabled { opacity: .7; }
.acao-forte {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 14px; text-align: left;
  border: 2px solid var(--ace-green); border-radius: 14px; background: var(--fundo-carta); color: var(--ace-green); font: inherit; cursor: pointer;
}
.acao-forte .bolha { background: var(--realce-suave); width: 40px; height: 40px; }
.acao-forte .bolha svg { stroke: var(--ace-green); width: 22px; height: 22px; stroke-width: 2; }
.acao-forte .acao-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.acao-forte .acao-texto b { font-size: 1rem; }
.acao-forte .acao-texto span { font-size: .84rem; color: var(--texto-fraco); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acao-forte > svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.4; flex: none; }
.acao-contorno {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 16px;
  border: 2px solid var(--ace-green); border-radius: 14px; background: var(--fundo-carta); color: var(--ace-green); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.acao-contorno.curta { width: auto; min-height: 44px; padding: 0 14px; font-size: .9rem; white-space: nowrap; flex: none; }

/* ---- Torneios ---- */
.hero-ranking {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 88px; padding: 14px 18px; text-align: left;
  border: 0; border-radius: 16px; background: linear-gradient(135deg, var(--ace-green) 0%, #1d5c44 100%); color: #fff; font: inherit; cursor: pointer;
  box-shadow: 0 8px 24px rgba(15,61,46,.28);
}
.hero-posicao { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; flex: none; min-width: 44px; display: grid; place-items: center; }
.hero-posicao svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 2; }
.hero-texto { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.hero-texto b { font-size: 1.1rem; }
.hero-texto span { font-size: .88rem; color: rgba(255,255,255,.92); }
.hero-ranking > svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2.4; flex: none; }
.linha-etapa { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--borda); cursor: pointer; }
.linha-etapa > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.linha-etapa b { font-size: 1rem; }
.linha-etapa .fraco { font-size: .84rem; }
.linha-etapa .etiqueta { font-size: .84rem; min-width: 44px; justify-content: center; white-space: nowrap; flex: none; }
.linha-etapa .seta { color: var(--texto-fraco); font-size: 1.2rem; }
.linha-etapa.proxima { cursor: default; }
.linha-amigos {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 0 14px; margin-top: 14px; text-align: left;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-carta); color: var(--texto); font: inherit; font-size: .95rem; cursor: pointer;
}
.linha-amigos span { color: var(--texto-fraco); }
.linha-amigos b { color: var(--texto); }
.linha-amigos svg { width: 20px; height: 20px; stroke: var(--texto-fraco); fill: none; stroke-width: 2.2; }

/* ---- folha "Novo jogo" ---- */
dialog.folha-novo-jogo {
  max-width: none; width: 100vw; margin: auto 0 0; max-height: 92dvh; overflow: auto; box-sizing: border-box; padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; border: 0;
  display: flex; flex-direction: column; gap: 16px; box-shadow: 0 -12px 40px rgba(0,0,0,.18);
}
dialog.folha-novo-jogo:not([open]) { display: none; }
.folha-alca { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--borda); }
.folha-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.folha-topo h2 { margin: 0 0 3px; font-size: 1.25rem; }
.folha-topo p { margin: 0; font-size: .88rem; }
.folha-topo p.menor { font-size: .8rem; }
.folha-fechar { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--fundo-alt); display: grid; place-items: center; cursor: pointer; flex: none; }
.folha-fechar svg { width: 20px; height: 20px; stroke: var(--texto); fill: none; stroke-width: 2.2; }
.folha-grupo { display: flex; flex-direction: column; gap: 8px; }
.folha-rotulo { font-size: .74rem; font-weight: 700; color: var(--texto-fraco); letter-spacing: .06em; text-transform: uppercase; }
.grade-tees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grade-tees .chip-tee { min-height: 56px; font-size: 1rem; gap: 8px; padding: 0 12px; border-radius: 12px; border-width: 2px; }
.grade-tees .chip-tee i { width: 16px; height: 16px; }
.folha-novo-jogo .chips-formato .chip { min-height: 52px; font-size: .95rem; border-width: 2px; }
.folha-novo-jogo .chips-formato .chip.ativo { border-color: var(--ace-green); }
.folha-gps { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.folha-gps > svg { width: 22px; height: 22px; stroke: var(--ace-green); fill: none; stroke-width: 2; flex: none; }
.folha-gps > span { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.folha-gps b { font-size: 1rem; }
.folha-gps > span > span { font-size: .84rem; color: var(--texto-fraco); }
.folha-gps input { appearance: none; -webkit-appearance: none; width: 52px; height: 32px; border-radius: 99px; background: var(--borda); position: relative; flex: none; margin: 0; cursor: pointer; }
.folha-gps input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .15s; }
.folha-gps input:checked { background: var(--ace-green-2); }
.folha-gps input:checked::after { transform: translateX(20px); }

/* ---- barra de abas: a ativa se distingue de longe ---- */
.abas-app button { font-size: .75rem; position: relative; padding-top: 9px; }
.abas-app button svg { width: 24px; height: 24px; }
.abas-app button.ativa { color: var(--ace-green); font-weight: 700; }
.abas-app button.ativa::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 3px; border-radius: 2px; background: var(--ace-green); }
.abas-app button.ativa svg { stroke-width: 2.4; }

/* ---- piso tipográfico: nada abaixo de 12 px ---- */
.evento-data span { font-size: .75rem; }
.evento-linha .fraco, .resultado-linha .fraco, .jogador-linha .fraco, .reserva-linha .fraco { font-size: .82rem; }
.evento-linha b, .resultado-linha b { font-size: .95rem; }
.kpi span { font-size: .72rem; }
.kpi small { font-size: .68rem; }
.volta-placar span { font-size: .78rem; }

/* ---- o botão central: Jogar, elevado sobre a barra --------------------
   Um disco verde saindo da barra, com o golfista em branco. Não é a aba
   ativa que muda de cor: é o botão que existe para ser achado. */
.abas-app { overflow: visible; }
.abas-app button.central { padding-top: 0; justify-content: flex-end; gap: 2px; color: var(--ace-green); font-weight: 700; }
.abas-app button.central::before { display: none; }
.abas-app button.central .disco {
  display: grid; place-items: center; width: 62px; height: 62px; margin-top: -30px; border-radius: 50%;
  background: linear-gradient(150deg, var(--ace-green-2) 0%, var(--ace-green) 100%); color: #fff;
  box-shadow: 0 0 0 5px var(--fundo-carta), 0 8px 22px rgba(15,61,46,.35);
  transition: transform .12s;
}
.abas-app button.central:active .disco { transform: scale(.94); }
.abas-app button.central .disco svg { width: 30px; height: 30px; }
.abas-app button.central.em-jogo .disco { box-shadow: 0 0 0 5px var(--fundo-carta), 0 0 0 8px rgba(46,125,50,.28), 0 8px 22px rgba(15,61,46,.35); }
.abas-app button.central.em-jogo .disco::after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #F2C14E; border: 2px solid var(--fundo-carta); transform: translate(20px, -20px); }
.abas-app button.central .disco { position: relative; }
.abas-app button.central span:last-child { font-size: .75rem; }

/* =======================================================================
   O padrão novo das telas (09/09): capa, cards de canto largo e sombra
   suave, ícones em ladrilhos, blocos de ação com disco e seta. A tela
   inicial dá o tom e as outras seguem.
   ======================================================================= */
.socio .carta { border-radius: 18px; box-shadow: 0 10px 30px rgba(15,61,46,.08); border-color: #E6E4DB; }
.socio .carta-topo { background: var(--fundo-carta); padding: 14px 18px; min-height: 52px; }
.socio .carta-topo h2 { display: inline-flex; align-items: center; gap: 10px; font-size: 1.02rem; }
.socio .carta-topo h2 svg { width: 22px; height: 22px; stroke: var(--ace-green-2); fill: none; stroke-width: 1.9; }
.socio .carta-topo .link { display: inline-flex; align-items: center; gap: 2px; font-size: .84rem; color: var(--texto); font-weight: 600; }
.socio .carta-topo .link svg { width: 18px; height: 18px; stroke: var(--texto); fill: none; stroke-width: 2.2; }
.socio .carta .corpo { padding: 16px 18px; }

.capa { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 1200 / 305; box-shadow: 0 10px 30px rgba(15,61,46,.12); }
.capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.capa-texto { position: absolute; left: 18px; bottom: 14px; right: 18px; color: #fff; font-size: 1rem; line-height: 1.3; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.capa-texto span { display: block; max-width: 60%; }
.capa-texto i { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--ace-green-3); margin-top: 8px; }

.perfil-cartao { border-radius: 18px; box-shadow: 0 10px 30px rgba(15,61,46,.08); border-color: #E6E4DB; padding: 18px 18px 14px; }
.perfil-topo[role=button] { cursor: pointer; }
.avatar-grande { width: 84px; height: 84px; font-size: 1.6rem; }
.perfil-quem h1 { font-size: 1.45rem; }
.perfil-quem p { font-size: .9rem; }
.perfil-seta { width: 22px; height: 22px; stroke: var(--ace-green-2); fill: none; stroke-width: 2.4; flex: none; margin-left: auto; }
.perfil-numeros b { font-size: 1.7rem; }
.perfil-numeros span { font-size: .84rem; }

/* blocos de ação */
.acao-primaria {
  min-height: 84px; padding: 0 16px; border-radius: 18px; gap: 14px; justify-content: flex-start; text-align: left;
  background: linear-gradient(115deg, #2E7D32 0%, #1c6b3f 45%, #0F3D2E 100%);
  box-shadow: 0 10px 26px rgba(15,61,46,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.acao-primaria.continuar { background: linear-gradient(115deg, #3a8f3f 0%, #2E7D32 45%, #1c6b3f 100%); }
.acao-primaria .disco-icone, .acao-primaria .disco-seta {
  display: grid; place-items: center; flex: none; border-radius: 50%; background: rgba(6,32,22,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.25);
}
.acao-primaria .disco-icone { width: 58px; height: 58px; }
.acao-primaria .disco-seta { width: 44px; height: 44px; }
.acao-primaria .disco-icone svg { width: 30px; height: 30px; }
.acao-primaria .disco-seta svg { width: 22px; height: 22px; stroke-width: 2.6; }
.acao-primaria .acao-texto b { font-size: 1.35rem; }
.acao-primaria .acao-texto span { font-size: .92rem; white-space: normal; }
.acao-forte { border: 1px solid #E6E4DB; box-shadow: 0 10px 30px rgba(15,61,46,.08); border-radius: 18px; min-height: 76px; padding: 12px 16px; color: var(--texto); }
.acao-forte .bolha { width: 52px; height: 52px; border-radius: 14px; }
.acao-forte .bolha svg { width: 26px; height: 26px; }
.acao-forte .acao-texto b { font-size: 1.15rem; }
.acao-forte .acao-texto span { font-size: .9rem; }
.acao-forte > svg { stroke: var(--texto-fraco); }

/* ladrilhos de ícone e a linha de meta */
.tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--realce-suave); flex: none; }
.tile svg { width: 26px; height: 26px; stroke: var(--ace-green-2); fill: none; stroke-width: 1.9; }
.tile.ouro { background: #FBF3DE; }
.tile.ouro svg { stroke: #B8912F; }
.torneio-linha b { font-size: 1.05rem; line-height: 1.25; }
.torneio-linha .fraco { font-size: .92rem; }
.meta-torneio { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid var(--borda); font-size: .92rem; color: var(--texto); }
.meta-torneio span { display: inline-flex; align-items: center; gap: 8px; }
.meta-torneio svg { width: 20px; height: 20px; stroke: var(--texto); fill: none; stroke-width: 1.8; }
.socio .aviso { border-radius: 14px; font-size: .95rem; padding: 12px 14px; margin-top: 12px; }

/* ---- barra: o botão do meio em relevo, sem exagero ---- */
.abas-app { padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 4px; }
.abas-app button.central {
  margin: 0 2px; min-height: 60px; padding: 6px 4px 5px; border-radius: 16px; justify-content: center; gap: 3px; color: #fff; font-weight: 700;
  background: linear-gradient(180deg, #2E7D32 0%, #1c6b3f 55%, #0F3D2E 100%);
  box-shadow: 0 6px 14px rgba(15,61,46,.32), 0 1px 0 rgba(255,255,255,.22) inset, 0 -2px 0 rgba(0,0,0,.18) inset;
  transform: translateY(-4px); transition: transform .12s, box-shadow .12s;
}
.abas-app button.central:active { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15,61,46,.3), 0 1px 0 rgba(255,255,255,.15) inset; }
.abas-app button.central .disco { width: auto; height: auto; margin: 0; border-radius: 0; background: none; box-shadow: none; }
.abas-app button.central .disco svg { width: 28px; height: 28px; }
.abas-app button.central.em-jogo .disco { box-shadow: none; }
.abas-app button.central.em-jogo .disco::after { width: 11px; height: 11px; background: #F2C14E; border: 2px solid #1c6b3f; transform: translate(14px, -16px); }
.abas-app button.central span:last-child { font-size: .74rem; color: #fff; }
.abas-app button.central::before { display: none; }

/* ---- os botões de passar buraco: com peso ---- */
.navegacao-buraco { grid-template-columns: 64px 1fr 64px; }
.navegacao-buraco button {
  min-height: 56px; border: 2px solid var(--ace-green); background: var(--fundo-carta); color: var(--ace-green);
  font-size: 1.7rem; font-weight: 700; border-radius: 14px; box-shadow: 0 4px 12px rgba(15,61,46,.12);
}
.navegacao-buraco button:last-child { background: var(--ace-green); color: #fff; }
.navegacao-buraco button:disabled { opacity: .3; box-shadow: none; }
.navegacao-buraco .passo { font-size: 1rem; color: var(--texto); }

/* =======================================================================
   REFERÊNCIA 10/09 — a tela inicial aprovada, medida pixel a pixel
   (print de 941 px = 390 pt; 2,41 px por ponto). Tudo abaixo em px CSS.

   margem lateral 13 · gap entre cards 8 · card: raio 8, borda 1 px
   rgba(15,61,46,.08), sombra 0 2px 10px rgba(15,61,46,.06) · ladrilho de
   ícone 33 px raio 5 · capa 94 px raio 16 · bloco de ação 59 px raio 8,
   disco 40, seta em disco 33 · Ranking/Resultados 45 px · Próximo torneio:
   cabeçalho 29 px, ladrilho 41 px, aviso raio 6 · barra: card de raio 10
   com margem 13, botão central 64×41 raio 8.
   ======================================================================= */
.socio { background: #F7F7F5; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.barra-app {
  min-height: 72px; padding: calc(14px + env(safe-area-inset-top, 0px)) 13px 12px;
  background: rgba(247,247,245,.92); border-bottom: 0; box-shadow: none;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.marca-app, .marca-app img { height: 30px; }
.chip-clube { font-size: 15px; color: #43524c; max-width: 52vw; }
.icone-botao { width: 40px; height: 40px; border-radius: 8px; background: transparent; border: 0; box-shadow: none; }
.icone-botao svg { width: 22px; height: 22px; stroke: #0F3D2E; stroke-width: 1.9; }

.socio main { width: 100%; max-width: 600px; padding: 8px 13px 24px; gap: 8px; }
.pagina-topo { padding: 6px 2px 4px; }
.pagina-topo h1 { font-size: 24px; letter-spacing: -.02em; color: #0b1a14; }
.pagina-topo p { margin-top: 4px; font-size: 14px; color: #6B6F6C; }

/* cards */
.socio .carta, .perfil-cartao, .acao-forte, .linha-amigos {
  border: 1px solid rgba(15,61,46,.08); border-radius: 8px; background: #fff;
  box-shadow: 0 2px 10px rgba(15,61,46,.06);
}
.socio .carta { margin-top: 0; }
.socio .carta-topo { min-height: 29px; padding: 10px 16px; border-bottom: 1px solid rgba(15,61,46,.08); background: #fff; }
.socio .carta-topo h2 { font-size: 16px; gap: 10px; color: #0b1a14; }
.socio .carta-topo h2 svg { width: 20px; height: 20px; stroke: #0F3D2E; stroke-width: 1.8; }
.socio .carta-topo .link { font-size: 14px; font-weight: 500; color: #0b1a14; }
.socio .carta-topo .link svg { width: 18px; height: 18px; }
.socio .carta .corpo { padding: 14px 16px; }

/* capa */
.capa { aspect-ratio: 364 / 94; border-radius: 16px; border: 0; box-shadow: 0 2px 10px rgba(15,61,46,.08); }
.capa::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3,25,17,.22), transparent 55%); }
.capa-texto { z-index: 1; left: 14px; bottom: 10px; font-size: 15px; line-height: 1.25; }
.capa-texto i { width: 24px; height: 3px; background: #7BB17A; margin-top: 6px; }

/* perfil */
.perfil-cartao { padding: 14px 16px 12px; }
.perfil-topo { gap: 12px; }
.avatar-grande { width: 62px; height: 62px; font-size: 22px; box-shadow: none; }
.perfil-quem h1 { font-size: 20px; letter-spacing: -.02em; color: #0b1a14; }
.perfil-quem p { margin: 2px 0 6px; font-size: 13px; color: #6B6F6C; }
.etiqueta { padding: 3px 10px; font-size: 13px; background: #E9F1EC; color: #1F6B3A; border-radius: 6px; }
.perfil-seta { width: 18px; height: 18px; stroke: #0F3D2E; }
.perfil-numeros { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(15,61,46,.08); }
.perfil-numeros b { font-size: 24px; color: #0b1a14; }
.perfil-numeros span { font-size: 13px; color: #6B6F6C; }

/* bloco de ação verde */
.acao-primaria {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 59px; padding: 0 12px; gap: 12px; border-radius: 8px; border: 0;
  background-image: linear-gradient(100deg, #2f7a3d 0%, #2a6f38 40%, rgba(30,95,52,.85) 100%), url('/img/capa-padrao.jpg');
  background-size: cover; background-position: right 40%; background-blend-mode: normal, luminosity;
  box-shadow: 0 2px 10px rgba(15,61,46,.18);
}
.acao-primaria.continuar { background-image: linear-gradient(100deg, #2f7a3d 0%, #2a6f38 40%, rgba(30,95,52,.85) 100%), url('/img/capa-padrao.jpg'); }
.acao-primaria .disco-icone { width: 40px; height: 40px; background: rgba(6,42,28,.55); box-shadow: none; }
.acao-primaria .disco-icone svg { width: 22px; height: 22px; }
.acao-primaria .disco-seta { width: 33px; height: 33px; background: rgba(6,42,28,.55); border: 1.5px solid rgba(123,177,122,.8); box-shadow: none; }
.acao-primaria .disco-seta svg { width: 16px; height: 16px; stroke-width: 3; }
.acao-primaria .acao-texto b { font-size: 20px; letter-spacing: -.01em; }
.acao-primaria .acao-texto span { font-size: 14px; color: rgba(255,255,255,.92); }
.acao-primaria::after { display: none; }

/* Ranking e Resultados */
.acao-forte { min-height: 45px; padding: 6px 12px; gap: 12px; color: #0b1a14; }
.acao-forte .bolha { width: 33px; height: 33px; border-radius: 5px; background: #E9F1EC; }
.acao-forte .bolha svg { width: 18px; height: 18px; stroke: #0F3D2E; stroke-width: 1.8; }
.acao-forte .acao-texto b { font-size: 17px; letter-spacing: -.01em; }
.acao-forte .acao-texto span { font-size: 13px; color: #6B6F6C; }
.acao-forte > svg { width: 18px; height: 18px; stroke: #6B6F6C; stroke-width: 2.2; }
.acoes-principais { gap: 8px; }

/* Próximo torneio */
.tile { width: 41px; height: 41px; border-radius: 5px; }
.tile svg { width: 22px; height: 22px; }
.tile.ouro { background: #FBF3DE; }
.torneio-linha { gap: 12px; padding: 4px 0 10px; border-bottom: 0; }
.torneio-linha b { font-size: 16px; line-height: 1.25; color: #0b1a14; }
.torneio-linha .fraco { font-size: 13px; }
.meta-torneio { margin: 4px 0 6px; padding-top: 10px; gap: 6px 14px; font-size: 13px; }
.meta-torneio span + span { padding-left: 14px; border-left: 1px solid rgba(15,61,46,.12); }
.meta-torneio svg { width: 16px; height: 16px; }
.socio .aviso { border-radius: 6px; font-size: 13px; padding: 10px 12px; margin-top: 8px; }
.socio .aviso > span:first-child {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #E1B94B; color: #fff; font-size: 12px; font-weight: 700; font-style: normal; flex: none;
}

/* Torneios, Jogar, Agenda, Perfil: os mesmos cards */
.hero-ranking { min-height: 59px; padding: 10px 12px; border-radius: 8px; border: 0; background: linear-gradient(100deg, #2f7a3d 0%, #1E5F34 100%); box-shadow: 0 2px 10px rgba(15,61,46,.18); }
.hero-ranking::after { display: none; }
.hero-posicao { font-size: 22px; min-width: 40px; height: 40px; border-radius: 50%; background: rgba(6,42,28,.55); }
.hero-posicao svg { width: 22px; height: 22px; }
.hero-texto b { font-size: 17px; }
.hero-texto span { font-size: 13px; }
.hero-ranking > svg { width: 18px; height: 18px; }
.linha-etapa { min-height: 56px; padding: 8px 0; }
.linha-etapa b { font-size: 16px; }
.linha-etapa .fraco { font-size: 13px; }
.evento-data { width: 41px; height: 41px; border-radius: 5px; background: #E9F1EC; border-left: 3px solid #0F3D2E; box-shadow: none; }
.evento-data b { font-size: 16px; }
.evento-data span { font-size: 10px; }
.linha-amigos { min-height: 45px; margin-top: 0; padding: 0 12px; font-size: 15px; }
.socio button.principal, .par-de-botoes > button, .acao-contorno { border-radius: 8px; }
.acao-contorno { min-height: 45px; font-size: 15px; }
.socio button.principal { background: #0F3D2E; box-shadow: none; }
.kpi { border-radius: 6px; }
.cal-cabecalho button, .cal-dia { border-radius: 8px; }
.evento-linha .fraco, .resultado-linha .fraco { font-size: 13px; }
.evento-linha b, .resultado-linha b { font-size: 16px; }

/* barra inferior: um card com margem 13, raio 10; o do meio 64×41 em verde */
.abas-app {
  left: 13px; right: 13px; bottom: max(8px, env(safe-area-inset-bottom, 0px)); width: auto; transform: none;
  min-height: 60px; padding: 8px 6px 8px; gap: 2px; align-items: center;
  border: 1px solid rgba(15,61,46,.08); border-radius: 10px; background: #fff;
  box-shadow: 0 2px 12px rgba(15,61,46,.10);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.abas-app button { min-height: 44px; padding: 4px 2px; border-radius: 8px; gap: 3px; color: #6B6F6C; font-size: 12px; font-weight: 500; background: none; }
.abas-app button svg { width: 24px; height: 24px; stroke-width: 1.8; }
.abas-app button.ativa { color: #0F3D2E; font-weight: 700; background: none; }
.abas-app button.ativa::before { display: none; }
.abas-app button.ativa svg { stroke-width: 2.4; }
.abas-app button.central {
  min-height: 41px; height: 41px; margin: 0 2px; padding: 0 2px; transform: none; border-radius: 8px; border: 0;
  background: linear-gradient(180deg, #2f7a3d 0%, #1E5F34 100%); color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(15,61,46,.25), inset 0 1px 0 rgba(255,255,255,.18); justify-content: center; gap: 2px;
}
.abas-app button.central:active { transform: scale(.97); }
.abas-app button.central .disco svg { width: 22px; height: 22px; }
.abas-app button.central span:last-child { font-size: 12px; color: #fff; }
.abas-app button.central.em-jogo .disco::after { width: 9px; height: 9px; transform: translate(12px, -12px); border-color: #1E5F34; }

/* =======================================================================
   TIPOGRAFIA DA MARCA (manual de identidade): Sora, com a hierarquia do
   guia — Bold para títulos com -1% de tracking, SemiBold para títulos
   secundários, Medium para terciários, Regular no corpo (16/24) e Light
   nas legendas (12/16). Peso e escala fechados, e não 700 em tudo.
   ======================================================================= */
.socio { font-family: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.socio h1, .pagina-topo h1, .perfil-quem h1 { font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.socio .carta-topo h2, .acao-forte .acao-texto b, .hero-texto b, .acao-primaria .acao-texto b, .torneio-linha b { font-weight: 600; letter-spacing: -.005em; }
.linha-etapa b, .evento-linha b, .resultado-linha b, .jogador-linha b, .linha-jogador .quem, .navegacao-buraco .passo b { font-weight: 500; }
.perfil-numeros b, .kpi b, .gps-num b, .volta-placar b, .parcial-numeros b, .hero-posicao { font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.socio p, .socio .fraco, .acao-texto span, .linha-etapa .fraco, .evento-linha .fraco, .resultado-linha .fraco, .meta-torneio { font-weight: 400; }
.perfil-numeros span, .kpi span, .kpi small, .gps-num span, .sc-legenda, .gf-legenda, .evento-data span, .capa-texto + .capa-marca, .abas-app button span, .etiqueta, .tag-evento { font-weight: 300; letter-spacing: 0; }
.abas-app button.ativa span, .abas-app button.central span { font-weight: 600; }
.etiqueta, .tag-evento, .socio .carta-topo .nota { font-weight: 500; }
.socio button, .socio .chip, .tecla b { font-family: inherit; }
.socio button.principal, .acao-contorno, .acao-primaria, .socio .ficha-acoes button { font-weight: 600; }
.tecla b { font-weight: 700; }

/* fundo do bloco de ação: o do mockup aprovado (grama e bola à direita) */
.acao-primaria, .acao-primaria.continuar {
  /* a foto fica à direita, sem texto; o degradê verde cobre a esquerda, onde o texto vive */
  background-image: linear-gradient(90deg, #2a6f38 0%, #2f7a3d 42%, rgba(47,122,61,.55) 68%, rgba(47,122,61,0) 100%), url('/img/acao-fundo.jpg');
  background-size: auto, cover; background-position: left, right center; background-blend-mode: normal;
}
.acao-primaria .disco-icone, .acao-primaria .disco-seta { background: rgba(6,42,28,.62); }
/* botão central: cabe inteiro na barra */
.abas-app { overflow: visible; }
.abas-app button.central { height: auto; min-height: 44px; padding: 3px 2px 4px; gap: 1px; line-height: 1.1; }
.abas-app button.central .disco { line-height: 0; }
.abas-app button.central .disco svg { width: 20px; height: 20px; }
.abas-app button.central span:last-child { font-size: 11.5px; white-space: nowrap; }
.abas-app button.central.em-jogo .disco::after { transform: translate(10px, -10px); width: 8px; height: 8px; }

/* buraco: título em duas linhas, e o fairway numa linha só para o botão de próximo não descer */
.navegacao-buraco .passo { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.15; }
.navegacao-buraco .passo b { font-size: 18px; }
.navegacao-buraco .passo span { font-size: 12px; }
.detalhe-linha { grid-template-columns: 64px 1fr; }
.detalhe-linha .chips { flex-wrap: nowrap; gap: 4px; }
.detalhe-linha .chip { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 13px; min-height: 40px; }

/* Entrar e Atualizar vivem sobre fundo verde: continuam claros. A regra
   geral de botão principal (verde) não pode valer aqui. */
.socio .painel-forma button.principal { background: var(--ace-off-white); color: var(--ace-green); box-shadow: none; }
.socio .barra-atualizar button.principal { background: #fff; color: var(--ace-green); box-shadow: none; }

/* Novo jogo: a bola no tee. Continuar: bola e taco. A foto à direita, o verde à esquerda. */
.acao-primaria { background-image: linear-gradient(90deg, #2a6f38 0%, #2f7a3d 38%, rgba(47,122,61,.6) 62%, rgba(47,122,61,.05) 100%), url('/img/acao-novo.jpg'); background-size: auto, cover; background-position: left, right 55%; }
.acao-primaria.continuar { background-image: linear-gradient(90deg, #2a6f38 0%, #2f7a3d 38%, rgba(47,122,61,.6) 62%, rgba(47,122,61,.05) 100%), url('/img/acao-continuar.jpg'); background-size: auto, cover; background-position: left, right 60%; }

/* o bloco de ação com 25% mais presença: 74 px de altura, discos e texto proporcionais */
.acao-primaria { min-height: 74px; padding: 0 14px; }
.acao-primaria .disco-icone { width: 48px; height: 48px; }
.acao-primaria .disco-icone svg { width: 26px; height: 26px; }
.acao-primaria .disco-seta { width: 38px; height: 38px; }
.acao-primaria .acao-texto b { font-size: 22px; }
.acao-primaria .acao-texto span { font-size: 15px; }

/* ---- checagem de alinhamento (10/09) ---- */
/* folha: o X alinhado com a linha do título, sem borda */
.folha-topo { align-items: center; }
.folha-topo > div { flex: 1 1 auto; min-width: 0; }
.socio .folha-fechar { width: 40px; height: 40px; border: 0 !important; border-radius: 10px; background: var(--fundo-alt); box-shadow: none; align-self: flex-start; margin-top: 2px; }
.folha-topo h2 { margin: 0 0 2px; line-height: 1.2; }
/* fairway e putts: chips do tamanho do texto, sem transbordar */
.detalhe-linha { grid-template-columns: 58px 1fr; }
.detalhe-linha .rot { font-size: 12.5px; }
.detalhe-linha .chips { gap: 5px; }
.detalhe-linha .chip { flex: 1 1 auto; min-width: 0; padding: 0 6px; font-size: 12.5px; letter-spacing: -.01em; white-space: nowrap; min-height: 40px; }
/* botão de começar na folha: texto centrado com o ícone, sem disco */
dialog.folha-novo-jogo .acao-primaria { justify-content: center; text-align: center; min-height: 64px; }
dialog.folha-novo-jogo .acao-primaria b { font-size: 20px; }
/* setas do buraco: a anterior desabilitada mais legível */
.navegacao-buraco button:disabled { opacity: .45; }
/* cabeçalho do card de topo alinhado ao centro */
.navegacao-buraco { align-items: center; }

.cal-dia.ativo, .cal-dia.ativo:hover, .cal-dia.ativo:focus { background: var(--ace-green) !important; color: #fff; }
.socio button { -webkit-tap-highlight-color: transparent; }

/* Campeonatos com amigos: o mesmo bloco do Novo jogo, com a foto do carrinho */
.acao-primaria.amigos { background-image: linear-gradient(90deg, #2a6f38 0%, #2f7a3d 38%, rgba(47,122,61,.6) 62%, rgba(47,122,61,.05) 100%), url('/img/acao-amigos.jpg'); background-size: auto, cover; background-position: left, right 45%; margin-top: 8px; }
.acao-primaria.amigos .disco-icone svg { fill: none; stroke: #fff; stroke-width: 2; }
.acao-primaria.amigos { min-height: 59px; padding: 0 12px; }
.acao-primaria.amigos .acao-texto b { font-size: 17px; }
.acao-primaria.amigos .acao-texto span { font-size: 13px; }
.acao-primaria.amigos .disco-icone { width: 40px; height: 40px; }
.acao-primaria.amigos .disco-icone svg { width: 22px; height: 22px; }
.acao-primaria.amigos .disco-seta { width: 33px; height: 33px; }

/* buraco: cabe na tela sem rolar, com o Próximo maior */
.teclas { gap: 7px; margin-bottom: 10px; }
.tecla { min-height: 60px; border-radius: 10px; }
.tecla b { font-size: 1.55rem; font-weight: 700; }
.par-de-botoes > button { min-height: 36px; }
.par-de-botoes > .mini-acao { flex: 0 1 auto; }
.detalhes-buraco { gap: 6px; margin-top: 10px; padding-top: 10px; }
.detalhe-linha .chip { min-height: 32px; }
.detalhe-linha .contador button { width: 32px; height: 32px; }
.cartao-buraco .principal.grande { min-height: 56px; font-size: 17px; margin-top: 10px; }
.navegacao-buraco { margin-bottom: 10px; }
.navegacao-buraco button { min-height: 50px; }
/* quem está sendo marcado: linha ativa em verde cheio */
.linhas-jogadores .folha-rotulo { margin-bottom: 2px; }
.linha-jogador { min-height: 44px; }
.linha-jogador.ativa { background: var(--ace-green); border-color: var(--ace-green); color: #fff; }
.linha-jogador.ativa .resultado { color: rgba(255,255,255,.85); }
.linha-jogador.ativa .sc-score { color: #fff; }
.linha-jogador.ativa .sc-score.vazio { color: rgba(255,255,255,.7); opacity: 1; }
.linha-jogador.ativa .sc-score.par { color: #fff; }

/* linhas por jogador (as colunas do cartão de papel) — regras-base */
.linhas-jogadores { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.linha-jogador {
  display: grid; grid-template-columns: 1fr auto 40px; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px;
  border: 1.5px solid var(--borda); border-radius: 8px; background: var(--fundo-carta); color: var(--texto); font: inherit; text-align: left; cursor: pointer; width: 100%;
}
.linha-jogador .quem { font-weight: 600; font-size: 1rem; }
.linha-jogador .resultado { font-size: .8rem; color: var(--texto-fraco); }
.linha-jogador .sc-score { width: 34px; height: 34px; font-size: .95rem; justify-self: end; }

/* abas dos jogadores do grupo */
.abas-jogadores { display: grid; gap: 6px; margin-bottom: 10px; }
.aba-jogador {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; padding: 5px 4px; min-width: 0;
  border: 1.5px solid var(--borda); border-radius: 8px; background: var(--fundo-carta); color: var(--texto); font: inherit; cursor: pointer;
}
.aba-jogador b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.aba-jogador span { font-size: 11.5px; color: var(--texto-fraco); white-space: nowrap; }
.aba-jogador.ativa { background: var(--ace-green); border-color: var(--ace-green); color: #fff; }
.aba-jogador.ativa span { color: rgba(255,255,255,.85); }
/* areia e penalidade lado a lado */
.detalhe-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detalhe-dupla .detalhe-linha { grid-template-columns: 58px 1fr; }
.detalhe-dupla .contador { gap: 8px; }

/* o ranking dentro do card do campeonato */
.linha-ranking {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 0; text-align: left;
  border: 0; border-bottom: 1px solid var(--borda); background: none; color: var(--texto); font: inherit; cursor: pointer;
}
.linha-ranking .tile { width: 41px; height: 41px; background: var(--ace-green); }
.linha-ranking .tile svg { stroke: #fff; }
.linha-ranking .acao-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.linha-ranking .acao-texto b { font-size: 16px; font-weight: 600; }
.linha-ranking .acao-texto span { font-size: 13px; color: var(--texto-fraco); }
.linha-ranking > svg { width: 18px; height: 18px; stroke: var(--texto-fraco); fill: none; stroke-width: 2.2; }
.acao-primaria.amigos { margin-top: 0; }
.acao-primaria.amigos { min-height: 88px; padding: 0 14px; }
.acao-primaria.amigos .acao-texto b { font-size: 20px; }
.acao-primaria.amigos .acao-texto span { font-size: 14px; }
.acao-primaria.amigos .disco-icone { width: 48px; height: 48px; }
.acao-primaria.amigos .disco-icone svg { width: 26px; height: 26px; }
.acao-primaria.amigos .disco-seta { width: 38px; height: 38px; }

.acao-primaria .acao-texto b { font-size: 19px; }
.acao-primaria .acao-texto span { font-size: 13px; letter-spacing: .02em; white-space: nowrap; }

/* ---- ladrilhos do Início (referência GolfN): grandes, com foto, quatro ---- */
.ladrilhos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ladrilho {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  min-height: 132px; padding: 12px; border: 0; border-radius: 12px; color: #fff; font: inherit; text-align: left; cursor: pointer;
  background-size: cover; background-position: center; box-shadow: 0 2px 10px rgba(15,61,46,.12);
}
.ladrilho::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,25,17,.10) 0%, rgba(3,25,17,.72) 100%); }
.ladrilho-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.ladrilho-icone svg { width: 20px; height: 20px; stroke: #0F3D2E; fill: none; stroke-width: 2; }
.ladrilho-texto { display: flex; flex-direction: column; gap: 2px; }
.ladrilho-texto b { font-size: 17px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.ladrilho-texto span { font-size: 12.5px; color: rgba(255,255,255,.9); text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.ladrilho.amigos { background-image: url('/img/acao-amigos.jpg'); }
.ladrilho.aula { background-image: url('/img/acao-novo.jpg'); background-position: right center; }
.ladrilho.voltas { background-image: url('/img/acao-continuar.jpg'); }
.ladrilho.torneios { background-image: linear-gradient(135deg, #1c6b3f, #0F3D2E); }

.ladrilho.aula { background-image: url('/img/tile-aula.jpg'); background-position: center; }
.ladrilho.voltas { background-image: url('/img/tile-voltas.jpg'); }
.ladrilho.torneios { background-image: url('/img/tile-torneios.jpg'); }
/* o Novo jogo e a acao principal do Inicio: mais alto que tudo */
.acoes-principais > .acao-primaria { min-height: 96px; }
.acoes-principais > .acao-primaria .acao-texto b { font-size: 22px; }
.acoes-principais > .acao-primaria .acao-texto span { font-size: 14px; }
.acoes-principais > .acao-primaria .disco-icone { width: 54px; height: 54px; }
.acoes-principais > .acao-primaria .disco-icone svg { width: 28px; height: 28px; }