/* Poker Home Game: mobile first, tema claro/escuro pelo sistema. Sem CSS inline (CSP). */
:root {
  --fundo: #f3f5f4;
  --superficie: #ffffff;
  --superficie-2: #eef2f0;
  --texto: #14201b;
  --suave: #5b6b64;
  --borda: #d9e1dd;
  --acento: #0f6b46;
  --acento-texto: #ffffff;
  --acento-suave: #dff1e8;
  --bom: #0f7a3d;
  --ruim: #b42318;
  --aviso: #a15c07;
  --aviso-fundo: #fff4e0;
  --ruim-fundo: #fdecea;
  --sombra: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 16px rgb(0 0 0 / 5%);
  --raio: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0b1210;
    --superficie: #131d19;
    --superficie-2: #1b2722;
    --texto: #e6eeea;
    --suave: #94a39c;
    --borda: #26342e;
    --acento: #2fae75;
    --acento-texto: #04140c;
    --acento-suave: #163327;
    --bom: #4cc787;
    --ruim: #f2877c;
    --aviso: #f0b45a;
    --aviso-fundo: #2c2312;
    --ruim-fundo: #321a18;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 1.05rem; }
.suave { color: var(--suave); }
.pequeno { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; }
.bom { color: var(--bom); }
.ruim { color: var(--ruim); }

/* Casca */
.topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}
.topo img { border-radius: 8px; }
.topo h1 { font-size: 1.15rem; flex: 1; }
main { max-width: 640px; margin: 0 auto; padding: 14px 16px calc(env(safe-area-inset-bottom) + 96px); }
.abas {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: center;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.abas button {
  flex: 1; max-width: 213px;
  background: none; border: 0; color: var(--suave);
  padding: 10px 0 12px; font: inherit; font-size: .8rem; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.abas button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.abas button[aria-current="page"] { color: var(--acento); }

/* Blocos */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 14px;
  margin-bottom: 14px;
}
.cartao > h2 { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.linha { display: flex; align-items: center; gap: 10px; }
.linha.entre { justify-content: space-between; }
.empilha > * + * { margin-top: 10px; }
.destaque { font-size: 1.9rem; font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.kpi { background: var(--superficie-2); border-radius: 10px; padding: 8px 10px; }
.kpi b { display: block; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi span { font-size: .75rem; color: var(--suave); }

.selo {
  display: inline-block; padding: 2px 8px; border-radius: 99px; white-space: nowrap; flex-shrink: 0;
  font-size: .75rem; font-weight: 600;
  background: var(--superficie-2); color: var(--suave);
}
.selo.aberta { background: var(--acento-suave); color: var(--acento); }
.selo.pago { background: var(--acento-suave); color: var(--bom); }
.selo.aviso { background: var(--aviso-fundo); color: var(--aviso); }

/* Listas */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { padding: 10px 0; border-top: 1px solid var(--borda); }
.lista > li:first-child { border-top: 0; }
.jogador-linha { display: flex; align-items: center; gap: 10px; }
.jogador-linha .info { flex: 1; min-width: 0; }
.jogador-linha .nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-nome { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }

/* Botões e campos */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  border-radius: 12px; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.botao:disabled { opacity: .5; cursor: default; }
.botao.primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.botao.perigo { color: var(--ruim); }
.botao.cheio { width: 100%; }
.botao.compacto { min-height: 38px; padding: 0 12px; font-size: .9rem; }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.botoes > .botao { flex: 1 1 auto; }

label { display: block; font-size: .85rem; font-weight: 600; color: var(--suave); }
input, select {
  display: block; width: 100%; margin-top: 4px;
  min-height: 44px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 16px; /* 16px evita zoom no iOS */
}
input:focus, select:focus, .botao:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.caixa-marcar { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--texto); font-size: .95rem; }
.caixa-marcar input { width: 22px; min-height: 22px; height: 22px; margin: 0; accent-color: var(--acento); }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segmentado { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--superficie-2); padding: 4px; border-radius: 12px; margin-top: 4px; }
.segmentado button { min-height: 38px; border: 0; border-radius: 9px; background: none; font: inherit; font-weight: 600; color: var(--suave); }
.segmentado button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px; padding: 0 14px; border-radius: 99px;
  border: 1px dashed var(--acento); background: none; color: var(--acento);
  font: inherit; font-weight: 600;
}

.aviso-caixa { border-radius: 10px; padding: 10px 12px; font-size: .9rem; background: var(--aviso-fundo); color: var(--aviso); }
.aviso-caixa.ok { background: var(--acento-suave); color: var(--bom); }
.aviso-caixa.erro { background: var(--ruim-fundo); color: var(--ruim); }
.aviso-caixa ul { margin: 4px 0 0; padding-left: 18px; }

/* Tabela */
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th { text-align: left; font-size: .75rem; color: var(--suave); font-weight: 600; padding: 4px 0 6px; }
.tabela td { padding: 8px 0; border-top: 1px solid var(--borda); }
.tabela .dir { text-align: right; white-space: nowrap; }
.tabela th + th, .tabela td + td { padding-left: 12px; }

/* Pagamentos */
.pagador + .pagador { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }
.transf { background: var(--superficie-2); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.transf.feito { opacity: .65; }
.transf p, .cartao p:last-child { margin-bottom: 0; }
.botao { white-space: nowrap; }
.codigo-pix {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; resize: none;
  border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto);
  font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all;
}
.qr { display: block; margin: 10px auto 0; width: 220px; max-width: 100%; height: auto; background: #fff; border-radius: 8px; image-rendering: pixelated; }

/* Diálogo e aviso */
dialog {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  border: 1px solid var(--borda); border-radius: 18px; padding: 18px;
  background: var(--superficie); color: var(--texto);
}
dialog::backdrop { background: rgb(0 0 0 / 45%); }
dialog h2 { margin-bottom: 12px; }
.toast {
  position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content;
  bottom: calc(env(safe-area-inset-bottom) + 78px); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: min(480px, calc(100vw - 24px));
  background: #14201b; color: #fff; border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 25%); font-size: .95rem;
}
.toast.erro { background: #8f1d14; }
.toast button { background: none; border: 0; color: #7ee2b0; font: inherit; font-weight: 700; padding: 4px; }

/* Entrada (token) */
.tela-token { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.token-caixa { width: min(360px, 100%); text-align: center; }
.token-caixa h1 { margin: 12px 0 6px; }
.token-caixa form > * + * { margin-top: 10px; }
.erro { color: var(--ruim); min-height: 1.2em; }

/* Página pública */
.publico main { padding-bottom: calc(env(safe-area-inset-bottom) + 32px); }
.fora-da-tela { position: fixed; left: -9999px; top: 0; opacity: 0; }
.mt { margin-top: 12px; }
.mt-p { margin-top: 8px; }
.campo-resultado { width: 42%; max-width: 180px; }
.campo-resultado input, .campo-resultado select { margin-top: 0; }
.transf.avisado { box-shadow: inset 3px 0 0 var(--aviso); }
.botao-link {
  background: none; border: 0; padding: 8px 4px; min-height: 36px;
  font: inherit; font-weight: 600; color: var(--acento); cursor: pointer; white-space: nowrap;
}

/* Escolha de valor (rebuy) */
.grade-valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.valor-opcao {
  min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 14px; border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto);
  font: inherit; cursor: pointer;
}
.valor-opcao b { font-size: 1.15rem; }
.valor-opcao span { font-size: .7rem; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.valor-opcao.padrao { border-color: var(--acento); background: var(--acento-suave); }
.valor-opcao:active { transform: scale(.96); }

/* Página do grupo: cabeçalho */
.cabecalho-publico { margin: calc(env(safe-area-inset-top) + 4px) 0 12px; }
.cabecalho-publico h1 { font-size: 1.5rem; letter-spacing: -.01em; }
.titulo-bloco { min-width: 0; }
.atualizado { margin: 6px 0 0; min-height: 1.2em; }
.atualizado.ao-vivo { color: var(--bom); font-weight: 600; }
.atualizado.ao-vivo::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: var(--bom); vertical-align: 1px;
  animation: pulsar 2s ease-in-out infinite;
}
@keyframes pulsar { 50% { opacity: .25; } }
.botao-icone {
  flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); cursor: pointer;
}
.botao-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.botao-icone.girando svg { animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Avatares (cor por nome; classes porque a CSP bloqueia style inline) */
.avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: #fff;
}
.avatar.grande { width: 56px; height: 56px; font-size: 1.05rem; }
.av-0 { background: #0f7a5a; } .av-1 { background: #2f6fd6; } .av-2 { background: #b4471f; } .av-3 { background: #7a4fc7; }
.av-4 { background: #b3266b; } .av-5 { background: #8a6d00; } .av-6 { background: #1d7f99; } .av-7 { background: #5b6b64; }
.pilha-avatares { display: flex; padding-left: 8px; }
.pilha-avatares .avatar { width: 30px; height: 30px; font-size: .68rem; margin-left: -8px; box-shadow: 0 0 0 2px var(--superficie); }
.par-avatares { display: flex; flex-shrink: 0; }
.par-avatares .avatar { width: 30px; height: 30px; font-size: .68rem; box-shadow: 0 0 0 2px var(--superficie-2); }
.par-avatares .avatar + .avatar { margin-left: -8px; }

/* Quem é você? */
.cartao-eu { border: 2px solid var(--acento); }
.rotulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin: 14px 0 8px; }
.grade-avatares { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.avatar-botao {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 8px 2px; border: 0; border-radius: 12px; background: none; color: var(--texto);
  font: inherit; cursor: pointer;
}
.avatar-botao:active { background: var(--superficie-2); transform: scale(.96); }
.avatar-nome { font-size: .85rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cartão pessoal */
.eu-topo { display: flex; align-items: center; gap: 10px; }
.eu-topo h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--acento-suave);
}
.total-bloco { margin-top: 16px; }
.total { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.item-pix { background: var(--superficie-2); border-radius: 14px; padding: 12px; margin-top: 8px; }
.item-pix.avisado { box-shadow: inset 3px 0 0 var(--aviso); }
.item-pix.feito { opacity: .55; }
.item-pix.meu { box-shadow: inset 3px 0 0 var(--acento); }
.pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pessoa-info { flex: 1; min-width: 0; }
.pessoa-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direita { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.valor { font-size: 1.05rem; white-space: nowrap; }
.acoes { margin-top: 10px; display: grid; gap: 8px; }
.acoes .aviso-caixa { margin: 0; }
.acoes > .botao.cheio { min-height: 50px; font-size: 1.05rem; }
.botao.copiado { background: var(--bom); border-color: var(--bom); }
.estado-aviso {
  margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .85rem; color: var(--aviso);
}
.tudo-certo { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.icone-ok {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento-suave); color: var(--bom); font-weight: 800; font-size: 1.1rem;
}
.cartao > h2 + .tudo-certo { margin-top: 0; }

/* Resumo da noite */
.hero .pote { font-size: 2.6rem; font-weight: 800; line-height: 1.1; margin: 2px 0 12px; letter-spacing: -.02em; }
.hero p { margin: 10px 0 0; }

/* Ranking, mesa e barras */
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking > li { padding: 10px 8px; margin: 0 -8px; border-top: 1px solid var(--borda); border-radius: 10px; }
.ranking > li:first-child { border-top: 0; }
.ranking > li.eu { background: var(--acento-suave); border-top-color: transparent; }
.ranking > li.eu + li { border-top-color: transparent; }
.posicao {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; color: var(--suave); background: var(--superficie-2);
}
.posicao.p1 { background: #e3b341; color: #3a2a00; }
.posicao.p2 { background: #c4ccd4; color: #27313b; }
.posicao.p3 { background: #d08a4f; color: #3a1d06; }
.saldo { flex-shrink: 0; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--superficie-2); white-space: nowrap; }
.saldo.bom { background: var(--acento-suave); }
.saldo.ruim { background: var(--ruim-fundo); }
.barra {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin-top: 8px;
  border: 0; border-radius: 99px; background: var(--superficie-2); overflow: hidden; color: var(--acento);
}
.barra::-webkit-progress-bar { background: var(--superficie-2); border-radius: 99px; }
.barra::-webkit-progress-value { background: var(--acento); border-radius: 99px; }
.barra::-moz-progress-bar { background: var(--acento); border-radius: 99px; }
.ranking .barra { margin-left: 46px; width: calc(100% - 46px); }
.barra-pagos { margin: -2px 0 10px; }

@media (prefers-reduced-motion: reduce) {
  .atualizado.ao-vivo::before, .botao-icone.girando svg { animation: none; }
}