/* Mobile primeiro (360x640). Sem dependência de hover. Modo escuro automático (segue o celular). */
:root {
  color-scheme: light dark;
  --marca: #0e7a4f;
  --marca-forte: #0a5c3b;
  --marca-suave: #e3f4ec;
  --fundo: #f3f5f4;
  --cartao: #ffffff;
  --texto: #15201b;
  --suave: #5b6a63;
  --borda: #dbe3df;
  --sombra: 0 1px 2px rgba(16, 32, 24, .06), 0 4px 14px rgba(16, 32, 24, .06);
  --perigo: #c0262d;
  --perigo-suave: #fdecec;
  --aviso: #fff6d6;
  --aviso-borda: #f0c84a;
  --jogando: #f59e0b;
  --link: #0b63b5;
  --raio: 16px;
  --destaque: #ffd23f;
  --topo: linear-gradient(135deg, #0a5c3b, #0e7a4f 60%, #12a066);
}
/* Escuro: segue o celular ("automático"), a menos que o botão do topo force claro ou escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --marca: #34c487;
    --marca-forte: #1e9a66;
    --marca-suave: #123326;
    --fundo: #0e1512;
    --cartao: #17211c;
    --texto: #e6eee9;
    --suave: #9aaca3;
    --borda: #2a3832;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    --perigo: #ff7a7f;
    --perigo-suave: #3a1719;
    --aviso: #2e2810;
    --aviso-borda: #8a6d16;
    --link: #7cb9ff;
  }
}
:root[data-tema="escuro"] {
  --marca: #34c487;
  --marca-forte: #1e9a66;
  --marca-suave: #123326;
  --fundo: #0e1512;
  --cartao: #17211c;
  --texto: #e6eee9;
  --suave: #9aaca3;
  --borda: #2a3832;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  --perigo: #ff7a7f;
  --perigo-suave: #3a1719;
  --aviso: #2e2810;
  --aviso-borda: #8a6d16;
  --link: #7cb9ff;
}
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.45; color: var(--texto); background: radial-gradient(1000px 360px at 50% -160px, var(--marca-suave), transparent 70%) no-repeat, var(--fundo); -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
:focus-visible { outline: 3px solid #f0a000; outline-offset: 2px; }
h1 { font-size: 1.55rem; margin: .6rem 0; letter-spacing: -.02em; font-weight: 800; }
h2 { font-size: 1.15rem; margin: 1.3rem 0 .5rem; letter-spacing: -.01em; }
h3 { font-size: 1.02rem; margin: .8rem 0 .4rem; }
/* Título de bloco (cartão, painel, tópico): mesmo tamanho e peso em todas as telas. */
.cartao > h3, .cartao > h2, .painel-titulo h3, .topico-titulo { font-size: 1.08rem; font-weight: 800; }
img { max-width: 100%; }

/* Topo, faixa de teste e menu */
.aviso-versao { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: .6rem; background: var(--texto); color: var(--fundo); padding: .5rem .6rem .5rem .9rem; border-radius: 12px; box-shadow: var(--sombra); font-size: .9rem; font-weight: 600; width: max-content; max-width: calc(100% - 2rem); }
.regulamento h2 { font-size: 1.1rem; margin: 1rem 0 .3rem; }
.regulamento h2:first-child { margin-top: .2rem; }
.regulamento ul { padding-left: 1.2rem; margin: .3rem 0; }
.regulamento li { margin: .3rem 0; }
/* Menu dos organizadores: botão flutuante à direita (logo acima do "Organização" da barra de baixo) que abre
   a gaveta pela direita, com as telas em grupos */
.titulo-tela { margin: .5rem 0; font-size: 1.2rem; }
.gaveta-fundo { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .38); opacity: 0; pointer-events: none; transition: opacity .2s; }
.gaveta { position: fixed; top: 0; bottom: 0; right: 0; z-index: 60; width: min(290px, 86vw); overflow-y: auto; padding: .9rem .8rem calc(1rem + env(safe-area-inset-bottom)); background: var(--cartao); box-shadow: -4px 0 24px rgba(0, 0, 0, .18); transform: translateX(105%); transition: transform .22s ease; }
body.gaveta-aberta .gaveta { transform: none; }
body.gaveta-aberta .gaveta-fundo { opacity: 1; pointer-events: auto; }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.gaveta-topo strong { font-size: 1.15rem; }
.gaveta-topo .btn { margin: 0; }
.gaveta h3 { margin: .9rem .4rem .3rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.gaveta-outras summary { margin: 1rem .4rem .3rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); cursor: pointer; }
.gaveta a { display: flex; align-items: center; gap: .7rem; min-height: 46px; padding: .5rem .7rem; border-radius: 12px; color: var(--texto); text-decoration: none; font-weight: 600; }
.gaveta a.ativo { background: var(--marca-suave); color: var(--marca); }
.gaveta a span { width: 1.4rem; text-align: center; }
.gaveta-site { margin-top: 1rem; border-top: 1px solid var(--borda); padding-top: .6rem; }
.gaveta-site a { color: var(--suave); font-weight: 500; }
.gaveta-site .link { margin: .4rem .7rem; color: var(--perigo); }
.gaveta-topo .quem { color: var(--suave); }
/* Pendências (tela da reunião): áreas que abrem e fecham, assuntos em linhas limpas */
.pend-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .2rem 0 .5rem; }
.pend-cabecalho .btn { margin: 0; white-space: nowrap; flex: none; }
.pend-edicao-mais[open] { display: grid; gap: .45rem; }
.pend-ajuda ul { margin: 0 0 .7rem; padding-left: 1.1rem; display: grid; gap: .35rem; }
/* Pendências: matriz frente × fase */
.pend-matriz-caixa { overflow-x: auto; margin: .2rem 0 .7rem; }
.pend-matriz { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: .8rem; table-layout: fixed; }
.pend-matriz thead th { font-size: .72rem; color: var(--suave); font-weight: 700; padding: .2rem 0; border-radius: 8px; }
.pend-matriz thead th:first-child { width: 31%; }
.pend-matriz small { display: block; font-weight: 600; font-size: .66rem; color: var(--suave); }
.pend-matriz tbody th { text-align: left; font-weight: 700; padding: .25rem 0; }
.pend-matriz-frente { padding: 0; border: 0; background: none; color: var(--texto); font: inherit; font-weight: 800; text-align: left; cursor: pointer; line-height: 1.15; }
.pend-matriz tbody tr { cursor: pointer; }
.pend-matriz td { text-align: center; border-radius: 8px; padding: .4rem 0; font-weight: 800; }
.pend-matriz td.aberta { background: var(--cartao); border: 1px solid var(--borda); }
.pend-matriz td.ok { background: var(--marca-suave); color: var(--marca); }
.pend-matriz td.alerta { background: color-mix(in srgb, var(--perigo) 14%, var(--cartao)); color: var(--perigo); }
.pend-matriz td.vazia { color: var(--suave); font-weight: 400; }
.pend-matriz .hoje { outline: 2px solid var(--marca); outline-offset: -1px; }
.pend-subtitulo { font-size: 1.08rem; font-weight: 800; margin: 1rem 0 .4rem; }
.pend-fase-titulo { margin: .7rem 0 .1rem; font-size: .85rem; font-weight: 700; color: var(--suave); }
.pend-fase-titulo.hoje { color: var(--marca); }
.pend-frente-acoes { margin: 0 0 .3rem; }
.pend-frente-tag { font-weight: 700; }
.pend-novo-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem; }
.pend-novo-linha select, .pend-novo > select { width: 100%; min-width: 0; }
.pend-nova-frente { margin: .2rem 0 .8rem; }
.pend-area { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); margin: 0 0 .5rem; overflow: hidden; }
.pend-area > summary { color: var(--texto); display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; cursor: pointer; list-style: none; }
.pend-area-nome { font-weight: 800; flex: 1; }
.pend-area-conta { font-size: .8rem; color: var(--suave); font-weight: 700; }
.pend-area-barra { width: 3.2rem; height: 6px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.pend-area-barra span { display: block; height: 100%; background: var(--marca); }
.pend-area > :not(summary) { margin-left: .9rem; margin-right: .9rem; }
.pend-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borda); }
.pend-item { border-bottom: 1px solid var(--borda); }
.pend-linha { display: flex; gap: .65rem; align-items: flex-start; width: 100%; padding: .55rem 0; }
.pend-abrir { flex: 1; min-width: 0; display: block; padding: 0; background: none; border: 0; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.pend-check { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 7px; border: 2px solid var(--marca); background: var(--cartao); color: #fff; font-weight: 800; cursor: pointer; display: grid; place-items: center; }
.pend-check.feito { background: var(--marca); }
.pend-t-decisao .pend-icone { background: #fde4b4; }
.pend-icone.pronto { background: var(--marca); color: #fff; }
.pend-icone { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .8rem; font-weight: 800; background: var(--borda); color: var(--suave); }
.pend-corpo { display: grid; gap: .15rem; min-width: 0; }
.pend-titulo { font-weight: 650; }
.pend-feito .pend-titulo { color: var(--suave); text-decoration: line-through; }
a.pend-abrir { text-decoration: none; }
.pend-decisao { font-size: .92rem; color: var(--marca); font-weight: 600; }
.pend-meta { display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: .8rem; color: var(--suave); }
.pend-a-confirmar { color: #8a5a00; font-weight: 700; }
.pend-quem { font-style: italic; }
.pend-copiar { margin: 0 0 .3rem 2.25rem; padding: .1rem .4rem; border: 1px solid var(--borda); border-radius: 8px; background: none; cursor: pointer; font-size: .9rem; opacity: .75; }
.pend-edicao { display: grid; gap: .45rem; margin: .5rem 0; padding: .7rem; border: 2px solid var(--marca); border-radius: 12px; background: var(--cartao); }
.pend-edicao input, .pend-edicao textarea, .pend-edicao select, .pend-novo input { width: 100%; }
.pend-edicao-linha { display: grid; grid-template-columns: 1fr auto; gap: .4rem; }
.pend-novo { display: grid; gap: .3rem; margin: .6rem 0 .8rem; }
.pend-novo .btn { margin: 0; white-space: nowrap; min-width: 44px; flex: none; }
.painel-faltas { list-style: none; margin: 0 0 .4rem; padding: 0; border-top: 1px solid var(--borda); }
.painel-faltas a { display: flex; gap: .6rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--borda); color: var(--texto); text-decoration: none; }
.painel-ir { margin-left: auto; color: var(--marca); font-weight: 700; font-size: .85rem; white-space: nowrap; text-decoration: none; }
.reg-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.reg-cabecalho p { margin: .3rem 0; font-weight: 600; }
.reg-passo h2 { display: flex; align-items: center; font-size: 1.05rem; margin: .2rem 0 .3rem; }
.reg-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 .8rem; }
.reg-previa { margin: .4rem 0; }
.reg-decisoes { list-style: none; padding: 0; margin: .3rem 0; display: grid; gap: .45rem; }
.reg-decisoes li { display: grid; gap: .05rem; border-left: 3px solid var(--marca-suave); padding-left: .6rem; }
.reg-pergunta { font-size: .85rem; color: var(--suave); }
.reg-decisao { font-weight: 600; }
.editor-regulamento { width: 100%; min-height: 12rem; padding: .6rem; font-size: 1rem; font-family: inherit; line-height: 1.4; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); color: var(--texto); }
/* Lista da porta: só ela aparece na impressão */
.lista-porta { display: none; }
@media print {
  body.imprimindo-porta > *:not(.lista-porta) { display: none !important; }
  body.imprimindo-porta .lista-porta { display: block; }
  .lista-porta table { width: 100%; border-collapse: collapse; font-size: 11pt; }
  .lista-porta th, .lista-porta td { border: 1px solid #999; padding: 4px 6px; text-align: left; }
  .lista-porta h1 { font-size: 14pt; }
}
/* Sou eu / meus jogos */
.sou-eu-busca { display: flex; gap: .4rem; }
.sou-eu-busca input { flex: 1; min-width: 0; }
.sou-eu-busca .btn { margin: 0; }
.sou-eu-topo { display: flex; align-items: center; gap: .6rem; }
.sou-eu-topo h3 { margin: 0; }
.sou-eu-ok { color: var(--marca); font-weight: 700; }
.sou-eu-pendente { background: var(--aviso); color: var(--texto); border-radius: 10px; padding: .4rem .7rem; margin: .4rem 0; }
.sou-eu-pendente p { margin: .2rem 0; }
.sou-eu-vez { font-weight: 800; font-size: 1.15rem; color: #fff; background: var(--marca); border-radius: 12px; padding: .6rem .8rem; animation: pulsar 1.6s ease-in-out infinite; }
.sou-eu-quase { font-weight: 700; background: var(--aviso); border-radius: 10px; padding: .45rem .7rem; }
@keyframes pulsar { 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .sou-eu-vez { animation: none; } }
.jogo.meu-jogo { outline: 3px solid var(--destaque, #ffd23f); outline-offset: -1px; }
tr.minha-linha td { background: color-mix(in srgb, var(--destaque, #ffd23f) 30%, transparent); font-weight: 700; }
.chave-linha { cursor: pointer; }
.chave-linha.destacado { background: color-mix(in srgb, var(--destaque, #ffd23f) 45%, transparent); font-weight: 800; }
.planilha-inscritos .col-chegou { width: 1px; }
.realizacao { text-align: center; margin: 1.2rem 0 .4rem; }
.realizacao div { display: flex; justify-content: center; align-items: center; gap: 1.2rem; margin-top: .3rem; }
.realizacao img { height: 72px; width: auto; max-width: 160px; object-fit: contain; }
.logo-vazia { display: inline-grid; place-items: center; width: 56px; height: 56px; border: 1px dashed var(--borda); border-radius: 10px; font-size: .7rem; color: var(--suave); text-align: center; }
.faixa-teste { background: #ffcc00; color: #000; text-align: center; font-weight: 800; padding: .35rem; letter-spacing: .03em; position: sticky; top: 0; z-index: 20; }
.topo { background: var(--topo); color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .12); padding: .7rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.botao-tema { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; min-height: 40px; padding: .3rem .8rem; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.marca-topo { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .6rem; font-weight: 750; font-size: 1.05rem; }
.marca-topo img { border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
/* Menu: barra de ícones fixa embaixo (celular) */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; gap: .1rem; background: color-mix(in srgb, var(--cartao) 88%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); border-top: 1px solid var(--borda); padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(0, 0, 0, .06); }
.nav button { font: inherit; background: none; border: 0; cursor: pointer; }
.nav a, .nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem .1rem; border-radius: 12px; text-decoration: none; color: var(--suave); font-size: .68rem; font-weight: 650; min-height: 52px; justify-content: center; }
.nav a.ativo, .nav button[aria-expanded="true"] { color: var(--marca); background: var(--marca-suave); }
.nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.so-lateral { display: none !important; }
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.tema-nome { display: none; }
.botao-tema { display: inline-flex; align-items: center; gap: .3rem; }
.botao-tema[hidden] { display: none; }
a.botao-tema { text-decoration: none; }
.topo-botoes { display: flex; align-items: center; gap: .35rem; flex: none; }
.botao-zoom { padding: .3rem .55rem; font-weight: 800; min-width: 40px; justify-content: center; }
.botao-zoom:disabled { opacity: .45; cursor: default; }
.marca-topo { min-width: 0; flex: 1; }
.marca-topo span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
.marca-topo img { flex: none; }
@media (max-width: 600px) {
  .topo { padding: .55rem .7rem; }
  .marca-topo { font-size: .95rem; gap: .45rem; }
  .topo-botoes { gap: .25rem; }
  .botao-zoom, .botao-tema { min-height: 36px; min-width: 36px; padding: .2rem .4rem; }
}
.tema-icone { font-size: 1.05rem; line-height: 1; }
.tema-curto { font-size: .8rem; }
[hidden] { display: none !important; }
.barra-voltar { max-width: 820px; margin: 0 auto; padding: .5rem .9rem 0; }
.botao-voltar { display: inline-block; background: none; border: none; color: var(--link); font: inherit; font-weight: 600; padding: .4rem 0; min-height: 44px; cursor: pointer; text-decoration: none; }
body.modo-tv .barra-voltar { display: none; }
/* Páginas dos ramos da Videira: sem topo, menu nem faixa do torneio; só Voltar e o conteúdo. */
body.modo-pagina .topo, body.modo-pagina .nav, body.modo-pagina .faixa-teste { display: none !important; }
body.modo-pagina { padding: 0 !important; }
body.modo-pagina .barra-voltar { padding-top: 1rem; }
main { max-width: 820px; margin: 0 auto; padding: .7rem .9rem 3rem; }

/* Botões e controles */
.btn { display: inline-block; min-height: 44px; padding: .55rem 1rem; margin: .2rem .3rem .2rem 0; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); color: var(--texto); font-size: 1rem; font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer; box-shadow: var(--sombra); }
.btn:disabled { opacity: .45; }
.btn-primario { background: linear-gradient(180deg, var(--marca), var(--marca-forte)); border-color: var(--marca-forte); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--marca) 30%, transparent); }
.btn, .chip { transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:active, .chip:active { transform: scale(.97); }
.btn-perigo { border-color: var(--perigo); color: var(--perigo); }
.btn-teste { border-style: dashed; border-color: #d4a400; }
.btn-grande { display: block; width: 100%; min-height: 54px; font-size: 1.08rem; margin: .5rem 0; text-align: center; }
.btn-mini { min-height: 40px; min-width: 44px; padding: .3rem; }
.link { background: none; border: none; color: var(--link); text-decoration: underline; font-size: inherit; padding: .4rem; min-height: 44px; cursor: pointer; }
.barra-atualizar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.atualizado { color: var(--suave); font-size: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .7rem; }
.chip { min-height: 40px; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); font-size: .95rem; font-weight: 550; text-decoration: none; cursor: pointer; font-family: inherit; }
.chip-ativo { background: var(--marca); color: #fff; border-color: var(--marca); }

/* Mensagens */
.erro { background: var(--perigo-suave); color: var(--perigo); border: 2px solid var(--perigo); border-radius: 12px; padding: .8rem; font-weight: 700; margin: .6rem 0; }
.aviso { background: var(--aviso); border: 1px solid var(--aviso-borda); border-radius: 12px; padding: .65rem .85rem; }
.vazio { color: var(--suave); }
.pequeno, small { color: var(--suave); font-size: .88rem; }

/* Página inicial (chamada) */
.hero { text-align: center; padding: 1.6rem 1rem 1.3rem; margin: .2rem 0 1rem; border-radius: 20px; color: #fff; background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .18) 0, transparent 45%), var(--topo); box-shadow: var(--sombra); }
.hero h1 { font-size: 1.9rem; line-height: 1.15; margin: .3rem 0 .5rem; }
.hero .logo-grande { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.hero-chamada { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 800; opacity: .9; margin: .6rem 0 0; }
.hero-data { font-size: 1.1rem; font-weight: 700; margin: .2rem 0; }
.hero-local { opacity: .9; margin: .2rem 0; }
.cta { margin-top: 1rem; }
.cta .pequeno { color: rgba(255, 255, 255, .85); }
.btn-cta { background: var(--destaque); border-color: var(--destaque); color: #1b1b1b; font-size: 1.25rem; min-height: 60px; border-radius: 16px; }
.cta-aviso { display: inline-block; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: .5rem 1rem; font-weight: 700; margin: 0; }
.destaques { display: grid; gap: .6rem; margin: .6rem 0; }
.destaques ul { padding-left: 1.1rem; margin: .3rem 0; }
.destaques li { margin: .25rem 0; }
.como-pagar { margin: .8rem 0; }
.pix-pronto { margin: .8rem 0; border: 2px solid var(--marca); }
.pix-codigo { width: 100%; font-size: .8rem; padding: .5rem; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); color: var(--texto); word-break: break-all; resize: none; }
.como-pagar p { margin: .3rem 0; }
.centro { text-align: center; margin: 1.2rem 0; }

/* Cartões */
.mesa, .jogo, .grupo-sorteado, .passo, .cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.logo-grande { border-radius: 50%; }
.instrucoes { white-space: pre-line; text-align: left; }
.mesas { display: grid; gap: .6rem; }
.mesa { padding: .6rem; margin: .4rem 0; }
.mesa-num { font-weight: 800; color: var(--marca); letter-spacing: .02em; }
.mesa-livre p { margin: .2rem 0; color: var(--suave); }

/* Jogos */
.jogo { border-left: 5px solid var(--borda); padding: .6rem .7rem; margin: .45rem 0; }
.mesa .jogo { margin: .35rem 0 0; box-shadow: none; }
.jogo-em_andamento { border-left-color: var(--jogando); }
.jogo-finalizado { border-left-color: var(--marca); }
.jogo-topo { display: flex; justify-content: space-between; gap: .4rem; flex-wrap: wrap; font-size: .85rem; color: var(--suave); }
.jogo-placar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin-top: .3rem; font-size: 1.05rem; }
.jogo-placar .lado-b { text-align: right; }
.jogo-placar .sets { font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.vencedor { font-weight: 800; }
.a-definir { color: var(--suave); font-style: italic; font-size: .92rem; }
.parciais { text-align: center; color: var(--suave); font-size: .9rem; }
.campo-teste { border: 2px dashed #d4a400; border-radius: 12px; padding: .3rem .6rem; }
.foto-previa { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; display: block; margin: .3rem 0; }

/* Etiquetas */
.tag { display: inline-block; padding: .08rem .5rem; border-radius: 999px; background: var(--borda); color: var(--texto); font-size: .78rem; font-weight: 700; }
.tag-jogando { background: #fde4b4; color: #6b4300; }
.tag-atrasado { background: #fbd5d5; color: #8a1c1c; }
.mais-chamar { display: inline-block; }
.mais-chamar summary { list-style: none; cursor: pointer; padding: .2rem .7rem; border: 1px solid var(--borda); border-radius: 999px; }
.mais-chamar[open] { display: flex; flex-wrap: wrap; gap: .4rem; width: 100%; }
.tag-wo { background: var(--perigo-suave); color: var(--perigo); }
.tag-previsao, .tag-pago { background: var(--marca-suave); color: var(--marca); }
.tag-pendente { background: var(--aviso); color: var(--texto); }
.tag-alerta { background: var(--perigo-suave); color: var(--perigo); margin: .1rem .2rem .1rem 0; }

/* Tabelas de grupo */
.tabela { width: 100%; border-collapse: collapse; background: var(--cartao); font-size: .95rem; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.tabela th, .tabela td { padding: .45rem .3rem; border-bottom: 1px solid var(--borda); text-align: center; }
.tabela th { color: var(--suave); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.tabela .esq { text-align: left; }
.tabela tr.classificado td { background: var(--marca-suave); font-weight: 700; }
.marca { color: var(--marca); }
details { margin: .5rem 0; }
summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .5rem 0; min-height: 44px; font-weight: 700; color: var(--texto); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '▸'; margin-left: auto; color: var(--marca); font-size: 1.1em; }
details[open] > summary::after { content: '▾'; }
.grupo, .categoria { margin-bottom: 1.1rem; }
.lista-inscritos { columns: 2; padding-left: 1.2rem; }

/* Diagrama do mata-mata */
.chave { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; }
.chave-colunas { display: flex; gap: .8rem; min-width: min-content; }
.chave-coluna { display: flex; flex-direction: column; min-width: 172px; }
.chave-coluna h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); text-align: center; margin: .2rem 0 .5rem; }
.chave-jogos { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: .6rem; }
.chave-jogo { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra); overflow: hidden; }
.chave-bye { border: 1px dashed var(--borda); border-radius: 10px; color: var(--suave); font-size: .8rem; display: grid; place-items: center; min-height: 3.2rem; }
.chave-em_andamento { border-color: var(--jogando); }
.chave-linha { display: flex; justify-content: space-between; gap: .4rem; padding: .35rem .55rem; font-size: .92rem; }
.chave-linha + .chave-linha { border-top: 1px solid var(--borda); }
.chave-linha.vencedor { background: var(--marca-suave); }
.chave-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chave-sets { font-weight: 800; font-variant-numeric: tabular-nums; }
.chave-rodape { font-size: .75rem; color: var(--suave); padding: .1rem .55rem .3rem; }
.chave-terceiro { max-width: 200px; margin-top: .8rem; }
.chave-terceiro h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }

/* Formulários */
.campo { display: block; margin: .75rem 0; }
.campo > span { display: block; font-weight: 700; margin-bottom: .25rem; }
:where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"], [type="range"]), select, textarea) { min-height: 46px; padding: .55rem .7rem; font: inherit; font-size: 1rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); color: var(--texto); }
:where(textarea) { line-height: 1.4; }
.campo input, .campo select, .campo textarea, .filtros input, .filtros select, .campos-exemplo input, .campos-exemplo select { width: 100%; }
.campo-check { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.campo-check input { flex: none; width: 24px; height: 24px; min-height: 0; accent-color: var(--marca); }
fieldset { border: 1px solid var(--borda); border-radius: 12px; margin: .6rem 0; padding: .4rem .8rem; background: var(--cartao); }
legend { font-weight: 700; padding: 0 .3rem; }
.confirmacao { text-align: center; }
.pix { word-break: break-all; }

/* Organizador */
.menu-org { margin-bottom: .6rem; }
.linha-org { display: flex; align-items: center; gap: .25rem; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; margin-top: .4rem; }
.alerta-bloco { border: 2px solid var(--aviso-borda); background: var(--aviso); border-radius: var(--raio); padding: .7rem; margin: .6rem 0; }
.ordem-empate li { display: flex; align-items: center; gap: .4rem; margin: .3rem 0; }
.ordem-empate li span { flex: 1; font-weight: 700; }
.painel-fundo { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); z-index: 50; overflow-y: auto; padding: .6rem; }
.painel { background: var(--cartao); border-radius: 18px; padding: .9rem; max-width: 520px; margin: 0 auto; }
.recorte h3 { margin: 0 0 .3rem; }
.recorte-tela { display: block; margin: .6rem auto; max-width: 100%; touch-action: none; cursor: move; background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.recorte-resultado { display: flex; align-items: center; gap: .7rem; margin: 0 0 .6rem; }
.recorte-previa { border: 1px solid var(--borda); border-radius: 10px; background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.recorte-previa.redonda { border-radius: 50%; }
.recorte-botoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.recorte-botoes .btn { margin: 0; }
.tabela-placar { width: 100%; border-collapse: collapse; margin: .4rem 0; table-layout: fixed; }
.tabela-placar th { font-size: .95rem; padding: .3rem; word-break: break-word; }
.tabela-placar thead th:first-child { width: 4rem; }
.tabela-placar td { padding: .3rem; }
.ponto { width: 100%; min-height: 58px; font-size: 1.6rem; text-align: center; border: 2px solid var(--borda); border-radius: 12px; background: var(--fundo); color: var(--texto); }
.confirma-placar { font-size: 1.5rem; font-weight: 800; text-align: center; }
.confirma-sets { font-size: 1.2rem; text-align: center; }
.sorteio-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; font-size: 1.05rem; }
.sorteio-grupos h3 { font-size: 1.15rem; margin: .3rem 0; }
.categoria-sorteio { padding: .5rem 1rem .8rem; }
.categoria-sorteio h2 { margin: .4rem 0; }
.sorteio-resumo { font-weight: 700; font-size: 1.05rem; }
.acoes-sorteio { display: grid; gap: .1rem; }
.grupo-sorteado { padding: .2rem .6rem; margin: 0; }
.grupo-sorteado ol { padding-left: 1.3rem; margin: .2rem 0 .4rem; }
.status-cancelado { opacity: .6; }
.filtros { display: grid; gap: .4rem; margin: .6rem 0; }
.passo { padding: .2rem .9rem .6rem; margin: .7rem 0; }
.passo-num { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--marca); color: #fff; font-size: .95rem; margin-right: .5rem; }
.passo > h3 { margin: .5rem 0; }
.linha { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; }
.linha span { flex: 1; font-weight: 700; }
.linha input { width: 5rem; text-align: center; }
.linha-logo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.linha-logo img, img.logo { object-fit: contain; }
.linha-logo img { border-radius: 16px; border: 1px solid var(--borda); background: var(--fundo); }
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Tabelas estilo planilha (Inscritos, Permissões) */
.planilha { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--cartao); font-size: .86rem; font-variant-numeric: tabular-nums; }
.planilha th, .planilha td { border: 1px solid var(--borda); padding: .3rem .45rem; text-align: center; vertical-align: middle; white-space: nowrap; }
.planilha th { position: sticky; top: 0; background: var(--marca-suave); color: var(--texto); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.planilha .esq { text-align: left; }
.planilha .num { text-align: right; }
.planilha tr.clicavel { cursor: pointer; }
.planilha tr.clicavel:hover { background: var(--marca-suave); }
.planilha .btn-mini { min-height: 34px; min-width: 40px; padding: .15rem .5rem; font-size: .85rem; }
.planilha input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--marca); }
/* Inscritos: planilha enxuta, uma linha por pessoa. No celular saem Valor e Confirmado (estão nos detalhes). */
.planilha-inscritos { min-width: 0; }
.planilha-inscritos td { padding: .2rem .35rem; height: 2.2rem; }
.planilha-inscritos .col-foto { width: 1px; padding: .1rem .25rem; }
.planilha-inscritos .col-apelido strong { font-weight: 700; }
.planilha-inscritos .mono { font-size: .8rem; }
.planilha-inscritos tr.de-teste td { background: color-mix(in srgb, #ffcc00 7%, transparent); }
.marca-teste { display: inline-block; margin-left: .3rem; padding: 0 .28rem; border-radius: 4px; background: #ffcc00; color: #000; font-size: .66rem; font-weight: 800; line-height: 1.35; vertical-align: 1px; }
.marca-alerta { margin-left: .25rem; color: var(--perigo); }
.planilha-inscritos .tag { padding: 0 .4rem; font-size: .72rem; white-space: nowrap; }
.planilha-inscritos .botoes-pagar .btn-mini { min-height: 30px; min-width: 34px; padding: 0 .4rem; font-size: .78rem; border-radius: 8px; }
.planilha .so-celular { display: none; }
.qtd-teste { font-size: .75rem; font-weight: 600; color: var(--suave); }
.resumo-inscritos { margin: .2rem 0 .5rem; line-height: 1.6; }
.busca-inscritos { display: flex; gap: .3rem; }
.busca-inscritos input { flex: 1; min-width: 0; }
.busca-inscritos .btn { margin: 0; min-width: 42px; }
.filtros.filtros-compactos { grid-template-columns: 1fr 1fr auto; align-items: center; }
.filtros-compactos select, .filtros-compactos input[type="search"] { min-height: 40px; padding: .35rem .5rem; font-size: .9rem; }
.filtros-compactos input[type="search"] { grid-column: 1 / -1; }
.filtros-compactos .campo-check { min-height: 40px; font-size: .9rem; }
@media (max-width: 600px) {
  .planilha .so-largo { display: none; }
  .planilha .so-celular { display: inline; }
  .planilha-inscritos { font-size: .82rem; }
  .planilha-inscritos th { font-size: .66rem; letter-spacing: 0; padding: .25rem .3rem; }
  .planilha-inscritos .col-apelido { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}


/* Nome do organizador fica parado ao arrastar a tabela para o lado. */
.linha-detalhe td { text-align: left; background: var(--fundo); white-space: normal; }
.detalhe p { margin: .3rem 0; }
.botoes-pagar { display: inline-flex; gap: .25rem; }
.botoes-pagar .btn { margin: 0; min-width: 48px; }
.lado .mini, .chave-nome .mini, .tabela .mini { margin: 0 .3rem; }
.mini { border-radius: 50%; object-fit: cover; vertical-align: middle; flex: none; max-width: none; }
.log { list-style: none; padding: 0; }
.log li { background: var(--cartao); border-bottom: 1px solid var(--borda); padding: .45rem; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); column-gap: .7rem; align-items: end; }
.formulario .campo { margin: .55rem 0; }
.formulario .campo > span { font-size: .92rem; margin-bottom: .15rem; }
.formulario .campo small { display: block; color: var(--suave); font-size: .82rem; margin-top: .15rem; line-height: 1.3; }
.formulario .campo input[type="color"] { padding: .15rem; }
.tabela-categorias { min-width: 0; font-size: .9rem; }
.tabela-categorias td { padding: .2rem; }
.tabela-categorias th { white-space: normal; line-height: 1.15; padding: .25rem .3rem; }
.tabela-categorias input:not([type="checkbox"]) { width: 100%; min-width: 2.6rem; min-height: 40px; padding: .3rem .4rem; text-align: center; }
.tabela-categorias td:nth-child(2) input { text-align: left; min-width: 5.5rem; }
.barra-salvar { position: sticky; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 5; padding: .5rem 0; background: linear-gradient(transparent, var(--fundo) 35%); }
.barra-salvar .btn { width: 100%; margin: 0; min-height: 48px; font-size: 1.05rem; }
@media (min-width: 1000px) {
  body.area-org main, body.area-org .barra-voltar { max-width: 1180px; }
  .topicos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; align-items: start; }
  .topicos > .topico { margin: .5rem 0; }
  .barra-salvar { bottom: 0; }
}
.topico { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 0 .9rem; margin: .6rem 0; }
.topico[open] { padding-bottom: .6rem; }
/* Tópico: título e resumo à esquerda, seta à direita. */
.topico > summary { display: grid; grid-template-columns: 1fr auto; column-gap: .5rem; align-items: center; padding: .7rem 0; min-height: 56px; }
.topico > summary > span { grid-column: 1; }
.topico > summary::after { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.topico-titulo { font-size: 1.08rem; font-weight: 800; }
.topico-resumo { font-size: .85rem; font-weight: 500; color: var(--suave); }
.campo input[type="color"] { width: 5rem; height: 46px; padding: .2rem; }
.organizador .campo-check { display: inline-flex; margin-right: .9rem; }

/* Videira: caminho no topo da área dos organizadores e a árvore */
.trilha { margin: 0; }
.trilha summary { color: var(--suave); font-size: .8rem; font-weight: 600; min-height: 0; padding: .2rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
/* Portal da Videira */
.hero-de-quem { margin: -.2rem 0 .4rem; font-size: .85rem; opacity: .9; }
.hero-de-quem a { color: #fff; }
.portal-topo { display: flex; align-items: center; gap: .8rem; margin: .4rem 0 .8rem; }
.portal-topo h1 { margin: 0; font-size: 1.6rem; }
.portal-logo { width: 56px; height: 56px; border-radius: 16px; object-fit: contain; background: #fff; box-shadow: var(--sombra); }
.portal-logo-vazio { display: grid; place-items: center; font-size: 1.8rem; background: var(--marca-suave); }
.portal-trilha { font-size: .85rem; color: var(--suave); margin: -.4rem 0 .6rem; }
.portal-trilha a { color: var(--suave); }
.portal-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .55rem; }
.portal-cartao { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); box-shadow: var(--sombra); color: var(--texto); text-decoration: none; }
.portal-cartao strong { display: block; }
.portal-texto { flex: 1; display: grid; gap: .1rem; font-size: .88rem; color: var(--suave); }
.portal-texto strong { color: var(--texto); font-size: 1rem; }
.portal-selo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--marca-suave); color: var(--marca); font-weight: 800; font-size: 1.2rem; }
.portal-seta { color: var(--suave); font-size: 1.4rem; }
.portal-construcao { opacity: .7; }
.portal-construcao .portal-selo { background: var(--borda); color: var(--suave); }
.portal-evento { background: var(--topo); color: #fff; border: 0; }
.portal-evento .portal-texto, .portal-evento .portal-texto strong, .portal-evento .portal-seta { color: #fff; }
.portal-evento .portal-selo { background: rgba(255, 255, 255, .2); }
.portal-tag { justify-self: start; margin-top: .2rem; padding: .05rem .55rem; border-radius: 999px; background: var(--destaque); color: #1b1b1b; font-weight: 800; font-size: .75rem; }
.em-construcao { text-align: center; background: var(--cartao); border: 1px dashed var(--borda); border-radius: 12px; padding: 1.5rem 1rem; margin: .8rem 0; }
.em-construcao-icone { font-size: 2.4rem; }
.arvore { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: .3rem .8rem; }
.arvore ul { list-style: none; margin: 0; padding-left: 1rem; border-left: 2px solid var(--borda); }
.arvore > ul { border-left: none; padding-left: 0; }
.arvore li { padding: .2rem 0; }
.arvore a { display: inline-block; padding: .25rem 0; font-weight: 600; }
.ramo-atual { font-weight: 800; color: var(--marca); }
.mono { font-family: ui-monospace, Consolas, monospace; }

/* TV (#/tv): letra grande, sem menu */
body.modo-tv .topo, body.modo-tv .nav { display: none; }
/* TV: sempre escura e com mais contraste (sala escura, reflexo na tela). */
body.modo-tv { --marca: #34c487; --fundo: #05080a; --cartao: #141c18; --texto: #ffffff; --suave: #c9d6cf; --borda: #3a4a42; --marca-suave: #17402d; color-scheme: dark; background: var(--fundo); color: var(--texto); font-weight: 600; }
body.modo-tv { padding: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body.modo-tv main { max-width: none; padding: 1.2vw 2.5vw 2.5vw; flex: 1; min-height: 0; width: 100%; }
.tv { font-size: 1.6vw; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.tv-metades { flex: 1; min-height: 0; display: grid; grid-template-columns: 2fr 3fr; gap: 1.5vw; margin-top: .6vw; }
.tv-metades.tv-uma { grid-template-columns: 1fr; }
.tv-lado { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tv-fixo { border-right: 1px solid var(--borda); padding-right: 1.5vw; }
.tv-fixo .tv-mesas { grid-template-columns: 1fr; }
.tv-area { flex: 1; min-height: 0; overflow: hidden; }
.tv-corpo { transform-origin: top left; }
.tv-grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vw; }
.tv-grupos-3 { grid-template-columns: 1fr 1fr 1fr; }
.tv-grupo { background: var(--cartao); border: 1px solid var(--borda); border-radius: 1vw; padding: .5vw 1vw; }
.tv-grupo h2 { margin: .3vw 0 .5vw; white-space: nowrap; }
.tv-grupo table { width: 100%; border-collapse: collapse; font-size: 1.5vw; }
.tv-grupo td { padding: .25vw .4vw; border-bottom: 1px solid var(--borda); text-align: center; }
.tv-grupo td.esq { text-align: left; white-space: nowrap; }
.tv-grupo th { font-size: .75em; color: var(--suave); font-weight: 600; padding: 0 .4vw; }
.tv-grupo tr.classificado td { background: var(--marca-suave); font-weight: 700; }
.tv-topo { display: flex; align-items: center; gap: 1.2vw; }
.tv-titulos { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tv-topo h1 { font-size: 2.4vw; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv .tv-pagina { font-size: 1.6vw; margin: .5vw 0; color: var(--suave); }
.tv-realizacao { height: 3.6vw; width: auto; max-width: 9vw; object-fit: contain; }
.tv-progresso { height: .5vw; background: var(--borda); border-radius: 999px; overflow: hidden; }
.tv-progresso span { display: block; height: 100%; width: 0; background: var(--marca); animation: tv-encher linear forwards; }
@keyframes tv-encher { to { width: 100%; } }
.tv-mesa-livre { opacity: .7; display: flex; align-items: baseline; gap: 1.2vw; }
.tv-mesa-livre h2, .tv-mesa-livre .tv-livre { margin: 0; }
.tv-hora { font-size: 2.4vw; font-weight: 800; color: var(--marca); }
.tv h2 { font-size: 1.8vw; margin: 1vw 0 .6vw; }
.tv-mesas { display: grid; grid-template-columns: repeat(auto-fit, minmax(16vw, 1fr)); gap: 1vw; }
.tv-mesa h2 { margin-top: .2vw; font-size: 2.2vw; color: var(--marca); }
.tv-mesa { background: var(--cartao); border: 1px solid var(--borda); border-radius: 1vw; padding: .6vw 1vw; box-shadow: var(--sombra); }
.tv-livre { color: var(--suave); font-size: 1.8vw; margin: .4vw 0; }
.tv-jogo { background: var(--cartao); border: 1px solid var(--borda); border-left: .4vw solid var(--borda); border-radius: .8vw; padding: .5vw .9vw; margin: .5vw 0; }
.tv-em_andamento { border-left-color: var(--jogando); }
.tv-finalizado { border-left-color: var(--marca); }
.tv-fase { display: flex; justify-content: space-between; color: var(--suave); font-size: 1.5vw; }
.tv-info { font-weight: 700; color: var(--marca); }
.tv-placar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1vw; align-items: center; font-size: 2.4vw; font-weight: 700; }
.tv-placar strong { font-size: 2.6vw; font-variant-numeric: tabular-nums; }
.tv-b { text-align: right; }
.tv-chaves { display: flex; gap: 4vw; align-items: flex-start; }
.tv-chaves .chave { overflow: visible; }
.tv-chaves .chave-coluna { min-width: 15vw; }
.tv-chaves .chave { display: flex; align-items: center; gap: 2vw; width: 100%; padding: 0; }
.tv-chaves .chave-colunas { flex: 1; justify-content: space-between; gap: 1.2vw; }
.tv-chaves .chave-coluna { flex: 1; min-width: 0; }
.tv-chaves .chave-coluna h3, .tv-chaves .chave-terceiro h3 { font-size: 1.1vw; }
.tv-chaves .chave-jogos { gap: .4vw; }
.tv-chaves .chave-linha { font-size: 1.5vw; padding: .2vw .6vw; }
.tv-chaves .chave-rodape { font-size: 1vw; }
.tv-chaves .chave-bye { min-height: 0; font-size: 1vw; }
.tv-chaves .chave-terceiro { max-width: 16vw; margin: 0; flex: none; }

/* Tela larga: menu na lateral esquerda */
@media (min-width: 900px) {
  body { padding-bottom: 0; padding-left: 232px; }
  .nav { top: 0; right: auto; width: 232px; flex-direction: column; justify-content: flex-start; border-top: none; border-right: 1px solid var(--borda); padding: 1rem .7rem; gap: .2rem; box-shadow: none; }
  .nav a, .nav button { flex: none; flex-direction: row; justify-content: flex-start; gap: .75rem; font-size: .98rem; padding: .65rem .8rem; min-height: 0; }
  .so-lateral { display: flex !important; }
  .tema-nome { display: inline; }
  .tema-curto { display: none; }
}
@media (min-width: 640px) {
  .mesas { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .filtros { grid-template-columns: 1fr 1fr; }
  .destaques { grid-template-columns: 1fr 1fr; }
}
@media print {
  body { padding: 0 !important; }
  .nav, .topo, .barra-atualizar, .chips, .faixa-teste, .btn, .acoes, summary { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .jogo, .grupo, .chave-jogo { break-inside: avoid; box-shadow: none; }
  .chave { overflow: visible; }
  main { max-width: none; padding: 0; }
}
/* Organizadores: uma linha por pessoa (nome, alerta de Gmail, ícones das permissões); tocar abre a edição */
.org-novo { display: flex; gap: .4rem; margin: .4rem 0; }
.org-novo input { flex: 1; min-width: 0; }
.org-novo .btn { margin: 0; white-space: nowrap; }
.org-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-sem-gmail { font-size: .75rem; font-weight: 700; color: var(--perigo); white-space: nowrap; }
.org-icones { white-space: nowrap; letter-spacing: .1em; }
.org-edicao { display: grid; gap: .2rem; padding-bottom: .3rem; }
.org-perm { display: flex; align-items: center; gap: .6rem; padding: .35rem .2rem; border-radius: 8px; cursor: pointer; }
.org-perm input { width: 20px; height: 20px; accent-color: var(--marca); flex: none; }
.org-perm span { display: flex; flex-direction: column; }
.org-perm small { color: var(--suave); font-size: .78rem; }
.org-perm.ligada { background: var(--marca-suave); }
.org-lista { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; margin: .5rem 0; }
.org-linha + .org-linha { border-top: 1px solid var(--borda); }
.org-linha > summary { color: var(--texto); display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; cursor: pointer; list-style: none; }
.org-linha[open] > summary { background: var(--marca-suave); }
.org-linha > :not(summary) { margin-left: .7rem; margin-right: .7rem; }
.org-linha .campo { margin-top: .6rem; }
.org-rodape { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-bottom: .4rem; }
.org-rodape .pequeno { flex: 1; color: var(--suave); }
/* Prévia: exemplo apagado de como a tela vai ficar quando houver dados */
.previa { border: 2px dashed var(--borda); border-radius: var(--raio); padding: .5rem .7rem .7rem; margin: .5rem 0; }
.previa-rotulo { margin: .1rem 0 .5rem; font-size: .9rem; color: var(--suave); }
.previa-rotulo strong { color: var(--marca); }
.previa-corpo { opacity: .55; pointer-events: none; filter: grayscale(.4); }
.aviso-rapido { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); max-width: calc(100% - 32px); background: var(--texto); color: var(--fundo); padding: .6rem 1rem; border-radius: 999px; box-shadow: var(--sombra); z-index: 50; font-size: .95rem; }
button.portal-cartao, button.chip { font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.pend-vazia { padding: .7rem .9rem; }
.pend-novo input { flex: 1; min-width: 0; }
/* TV: A−/A+ de cada parte (aparecem ao mexer o mouse), pódio e confete */
.tv-lado, .tv-topo { position: relative; }
.tv-zoom { position: absolute; top: .3vw; right: .3vw; z-index: 5; display: none; gap: .3vw; }
body.tv-mexeu .tv-zoom { display: flex; }
.tv-zoom button { font: inherit; font-size: 1vw; padding: .2vw .6vw; border-radius: 999px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); cursor: pointer; }
.tv-podio { list-style: none; padding: 0; margin: 1vw auto; display: grid; gap: 1vw; max-width: 46vw; }
.tv-lugar { display: flex; align-items: center; gap: 1.2vw; padding: .8vw 1.4vw; border-radius: 1vw; background: var(--cartao); border: 1px solid var(--borda); font-size: 2.4vw; }
.tv-lugar-1 { font-size: 3.4vw; background: var(--marca-suave); border-color: var(--marca); }
.tv-medalha { min-width: 4vw; text-align: center; }
.confete { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confete span { position: absolute; top: -3vh; width: .8vw; height: 1.4vw; min-width: 8px; min-height: 14px; border-radius: 2px; animation: cair linear infinite; opacity: .9; }
@keyframes cair { to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .confete { display: none; } }
.podios h2 { margin-top: .2rem; }
.lista-podio { list-style: none; padding: 0; margin: .2rem 0 .6rem; display: grid; gap: .25rem; font-size: 1.05rem; }
.tv-topo > .tv-zoom { position: static; }
.tv-zoom.tv-largura { top: auto; bottom: .3vw; }
.tv-zoom.tv-paginas { top: auto; bottom: .3vw; }
/* Área da organização: um topo só (o do site e a faixa MODO TESTE ficam escondidos; o TESTE vira etiqueta) */
body.area-org .topo, body.area-org .faixa-teste { display: none !important; }
.linha-org .titulo-tela { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-org .btn { margin: 0; min-height: 36px; min-width: 36px; padding: .2rem .4rem; font-size: .85rem; white-space: nowrap; }
.tag-teste { background: #ffd23f; color: #3b2f00; }
.gaveta .trilha { margin: 0 .4rem .4rem; }
/* Cartão do atleta e escalação */
.imagem-cartao { width: 100%; max-width: 420px; display: block; margin: .5rem auto; border-radius: 16px; box-shadow: var(--sombra); }
.botoes-imagem { max-width: 420px; margin: 0 auto; }
.conexao-linha { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .65rem .8rem; border: 0; border-top: 1px solid var(--borda); background: var(--cartao); color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.conexao-linha:first-child { border-top: 0; }
.conexao-linha strong { flex: 1; }
.conexao-linha:disabled { cursor: default; opacity: .6; }
.conexao-cor { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.tv-locutor { background: none; border: 0; font-size: 1.8vw; cursor: pointer; opacity: .6; }
.tv-painel { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vw; }
.tv-quadro { display: flex; flex-direction: column; gap: .3vw; padding: 1.4vw 1.6vw; border-radius: 1.2vw; background: var(--cartao); border: 1px solid var(--borda); }
.tv-quadro-rotulo { font-size: 1.5vw; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.tv-quadro strong { font-size: 3.6vw; line-height: 1.1; }
.tv-quadro-detalhe { font-size: 1.4vw; color: var(--suave); }
.chance { font-size: .8rem; color: var(--suave); margin-top: .2rem; }
.tv-chance { text-align: center; font-size: 1.1vw; color: var(--suave); }
/* Placar das Conexões */
.placar-conexoes { list-style: none; padding: 0; margin: .3rem 0; display: grid; gap: .3rem; }
.placar-conexoes li { display: flex; align-items: center; gap: .5rem; padding: .35rem .2rem; border-bottom: 1px solid var(--borda); }
.placar-conexoes strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placar-pos { width: 2rem; font-weight: 800; color: var(--suave); }
.placar-atletas { font-size: .8rem; color: var(--suave); white-space: nowrap; }
.placar-media { font-weight: 900; font-size: 1.15rem; min-width: 3rem; text-align: right; }
.tv-placar-conexoes { font-size: 2.2vw; gap: .6vw; }
.tv-placar-conexoes .placar-atletas { font-size: 1.4vw; }
.tv-placar-conexoes .placar-media { font-size: 2.8vw; }
.tv-placar-conexoes .conexao-cor { width: 1.6vw; height: 1.6vw; }
/* Entrada da Comunidade */
.portal-frase { margin: .2rem 0 0; color: var(--suave); }
.portal-bloco { padding: .8rem 1rem; margin: .7rem 0; }
.portal-bloco h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.portal-cultos { margin: 0 0 .3rem; padding-left: 1.1rem; }
.portal-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.portal-chips .chip { text-decoration: none; }
.evento-data { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 3.2rem; padding: .3rem; border-radius: 10px; background: var(--marca); color: #fff; line-height: 1; }
.evento-data strong { font-size: 1.4rem; }
.evento-data span { font-size: .75rem; text-transform: uppercase; }
.portal-rodape { margin: 1.2rem 0 .5rem; text-align: center; color: var(--suave); font-size: .9rem; }
.portal-rodape p { margin: .3rem 0; }
/* Sorteio: formatos em cartões */
.formato-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; margin: .4rem 0; }
.formato-opcao { display: flex; flex-direction: column; gap: .2rem; text-align: left; padding: .6rem .75rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); color: var(--texto); font: inherit; font-size: .9rem; cursor: pointer; }
.formato-opcao strong { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.formato-opcao span { color: var(--suave); }
.formato-opcao.escolhido { border: 2px solid var(--marca); background: var(--marca-suave); }
.ponto-passo { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.ponto-passo .btn-mini { min-width: 36px; }
.ponto-passo .ponto { flex: 1; min-width: 0; }
.conexao-logo { width: 1.6em; height: 1.6em; border-radius: 50%; object-fit: contain; background: #fff; flex: none; }
.chip-logo { width: 1.4em; height: 1.4em; border-radius: 50%; object-fit: contain; vertical-align: middle; margin-right: .35rem; background: #fff; }
.nao-salvo { display: block; text-align: center; color: var(--perigo); font-weight: 600; font-size: .9rem; margin: 0 0 .3rem; }
.nao-salvo[hidden] { display: none; }
.pix-codigo { display: block; word-break: break-all; font-size: .8rem; background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: .4rem; margin: .3rem 0; }
.logos-conexoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .4rem .8rem; }
.formato-opcao .formato-longo { color: var(--perigo); font-weight: 600; }
.linha-conexao { display: flex; gap: .6rem; align-items: flex-start; }
.cor-conexao { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .8rem; color: var(--suave); padding-top: 1.4rem; }
.cor-conexao input { width: 44px; height: 44px; padding: 0; border: 1px solid var(--borda); border-radius: 10px; background: none; }
.grade-figurinhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; align-items: start; }
.quadro-exemplo h3 { margin: 0 0 .4rem; }
.quadro-exemplo details { margin-top: .5rem; }
.adicionar-exemplo { width: 100%; min-height: 120px; border-style: dashed; }
.campos-exemplo { display: grid; gap: .4rem; margin: .5rem 0; }
.acoes-exemplo { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
/* Painel da organização */
.painel-hero { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: var(--raio); color: #fff; background: radial-gradient(circle at 15% 10%, rgba(255,255,255,.18), transparent 45%), var(--topo); box-shadow: var(--sombra); margin-bottom: .7rem; }
.painel-hero > div:first-child { flex: 1; min-width: 0; }
.painel-hero h2 { margin: .1rem 0; font-size: 1.3rem; line-height: 1.15; }
.painel-hero p { margin: 0; opacity: .9; }
.painel-ola { font-weight: 700; }
.painel-contagem { text-align: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); border-radius: 16px; padding: .5rem .9rem; min-width: 5.2rem; }
.painel-contagem strong { display: block; font-size: 2.1rem; line-height: 1; }
.painel-contagem span { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.painel-alertas { display: grid; gap: .35rem; margin-bottom: .7rem; }
.painel-alertas a { display: block; padding: .55rem .8rem; border-radius: 12px; background: color-mix(in srgb, var(--perigo) 12%, var(--cartao)); border: 1px solid color-mix(in srgb, var(--perigo) 40%, transparent); color: var(--texto); text-decoration: none; font-weight: 600; }
.painel-bloco { margin: .6rem 0; padding: .8rem .9rem; }
.painel-bloco > summary { cursor: pointer; font-weight: 700; }
.painel-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.painel-titulo h3 { margin: 0 0 .5rem; }
.painel-item { display: grid; grid-template-columns: minmax(5rem, 9rem) 1fr auto; align-items: center; gap: .6rem; margin: .35rem 0; }
.painel-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-barra { display: block; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--texto) 10%, transparent); overflow: hidden; }
.painel-barra > span { display: block; height: 100%; border-radius: 999px; }
.painel-fase { margin: 0 0 .4rem; }
.painel-fase.alerta b { color: var(--perigo); }
.painel-falta > summary { color: var(--perigo); }
.painel-pend-linhas { list-style: none; margin: 0 0 .4rem; padding: 0; }
.painel-dinheiro { margin: .6rem 0 .2rem; }
.painel-mais { padding: .5rem 0; }
.painel-pend-linhas li { padding: .25rem 0; font-size: .92rem; }
.painel-pend-linhas .alerta { color: var(--perigo); font-weight: 700; }
.painel-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .8rem 0; }
.painel-atalhos .btn { margin: 0; padding: .55rem .4rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-atalhos .btn:last-child:nth-child(odd) { grid-column: span 2; }
/* Início dos jogadores */
.hero-grupo { margin: .7rem 0 0; }
.btn-grupo { background: #25d366; border-color: #25d366; color: #fff; font-weight: 700; }
.numeros-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin: 0 0 .8rem; }
.numeros-inicio div { text-align: center; padding: .7rem .4rem; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--borda); box-shadow: var(--sombra); }
.numeros-inicio strong { display: block; font-size: 1.8rem; line-height: 1.05; color: var(--marca); }
.numeros-inicio span { font-size: .85rem; color: var(--suave); }
.vitrine-figurinhas { display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
.vitrine-figurinhas > div { flex: 0 0 min(62%, 240px); scroll-snap-align: start; }
.vitrine-figurinhas img { width: 100%; border-radius: 12px; }
.categoria-inicio { display: grid; gap: .25rem; margin: .45rem 0; }
.categoria-inicio small { color: var(--suave); }
.desempate { margin: .3rem 0 .6rem; padding-left: 1.4rem; display: grid; gap: .25rem; }
.desempate li { display: flex; align-items: center; gap: .3rem; }
.desempate .campo-check { flex: 1; margin: 0; }
.desempate-fixo { color: var(--suave); font-weight: 700; min-height: 36px; }
.gaveta-aparelho { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .8rem .4rem .2rem; color: var(--suave); font-size: .85rem; }
.gaveta-aparelho span { flex-basis: 100%; }
.portal-entrar { display: inline-block; margin: .4rem 0 .8rem; }
.j-versao h4 { margin: .6rem 0 .2rem; font-size: .95rem; }