/* Capivarada · componentes
   Depende de tokens.css. Tudo em classes com nome em português; as telas prontas estão em telas.js.
   Índice: base · tela · topo · botões · faixa do entardecer · cartões, etiquetas e pílulas · campos ·
   entrar · sala de espera · pergunta · esperando · juiz · revelação · placar · pódio · como jogar ·
   lousa · véu e painel · avisos · animações */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--papel);color:var(--cacau);font-family:var(--body);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
svg{flex:none}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- tela: ocupa o celular inteiro, sem rolar ---------- */
.tela{--pt:calc(16px + env(safe-area-inset-top, 0px));--pb:calc(18px + env(safe-area-inset-bottom, 0px));
  position:relative;min-height:100vh;min-height:100dvh;height:100dvh;max-width:520px;margin:0 auto;
  display:flex;flex-direction:column;padding:var(--pt) var(--gutter) var(--pb);overflow:hidden;background:var(--papel)}
.tela.rola{height:auto;overflow:visible}
.miolo{display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-height:0}
.miolo.espalha{justify-content:space-evenly}
.fim{margin-top:auto}
.miolo + .fim{margin-top:14px}
.fundo-cena{position:absolute;left:0;right:0;top:0;pointer-events:none}
.fundo-cena>svg{display:block;width:100%;height:100%}

/* ---------- topo: instalar, tema, tela cheia ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;position:relative;z-index:2;min-height:36px}
.topbar .dir{display:flex;gap:8px;margin-left:auto}
.pill{height:36px;border-radius:var(--r-pilula);background:var(--cartao);display:inline-flex;align-items:center;gap:6px;padding:0 13px 0 10px;
  font:800 13px var(--body);color:var(--cacau);box-shadow:0 3px 0 var(--sombra);white-space:nowrap}
.ib{width:36px;height:36px;border-radius:50%;background:var(--cartao);display:inline-grid;place-items:center;box-shadow:0 3px 0 var(--sombra);flex:none;color:var(--cacau)}
.ib.mini{width:30px;height:30px;box-shadow:0 2px 0 var(--sombra)}
.ib.mini .tr{width:16px;height:16px}
.tr{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pill .tr{stroke:var(--cacau)}

/* ---------- botões ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--r-pilula);font-family:var(--display);font-weight:600;white-space:nowrap;flex:none;width:100%;text-decoration:none}
.btn .tr{width:22px;height:22px;stroke-width:2.8}
.btn.pri{background:var(--aguape);color:var(--sobre-pri);height:56px;font-size:21px;box-shadow:0 5px 0 var(--aguape-2)}
.btn.sec{background:var(--cartao);color:var(--cacau);height:50px;font-size:18px;box-shadow:0 4px 0 var(--sombra)}
.btn.sec .tr{stroke:var(--aguape)}
.btn.peq{height:42px;font-size:16px;box-shadow:0 3px 0 var(--sombra)}
.btn.pri.peq{box-shadow:0 4px 0 var(--aguape-2)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sombra)}
.btn.pri:active{box-shadow:0 2px 0 var(--aguape-2)}
.btn[disabled],.btn.desligado{opacity:.45;pointer-events:none}
.link{display:block;text-align:center;margin-top:16px;font:800 14px var(--body);color:var(--cacau-2);text-decoration:underline;text-underline-offset:3px}
.par-btn{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- faixa do entardecer (topo das telas de jogo) ---------- */
.faixa{margin:calc(-1 * var(--pt)) calc(-1 * var(--gutter)) 0;padding:calc(var(--pt) - 2px) var(--gutter) 22px;position:relative;flex:none;background:var(--faixa)}
.faixa::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--pt) + 24px);background:var(--faixa-onda);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H320V28Q260 36 200 30T80 31T0 27Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H320V28Q260 36 200 30T80 31T0 27Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.faixa::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:12px;background:var(--papel);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 12' preserveAspectRatio='none'%3E%3Cpath d='M0 7Q40 1 80 5T160 5T240 6T320 4V12H0Z'/%3E%3C/svg%3E") 0 100%/100% 12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 12' preserveAspectRatio='none'%3E%3Cpath d='M0 7Q40 1 80 5T160 5T240 6T320 4V12H0Z'/%3E%3C/svg%3E") 0 100%/100% 12px no-repeat}
.faixa>*{position:relative}
.faixa-linha{display:flex;align-items:center;gap:8px;min-height:30px}
.faixa-linha .dir{margin-left:auto;display:flex;gap:6px;align-items:center}
.rodada{margin:0;font:800 13px var(--body);color:var(--cacau-2)}
.pergunta{margin:8px 0 0;font:600 25px/1.14 var(--display);overflow-wrap:break-word}
.pergunta-menor .pergunta,.pergunta.menor{font-size:21px}
.pergunta.pequena{font-size:18px;line-height:1.18;margin-top:4px}
.titulo{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.titulo h1,.titulo h2{margin:0;font:700 30px/1.1 var(--display)}
.titulo span{font:800 13px var(--body);color:var(--cacau-2)}
.faixa.curta{padding-bottom:20px}
.faixa-tit{margin:0;font:700 22px/1.1 var(--display);flex:1;min-width:0}
.faixa-linha.so-texto{min-height:18px}
.pergunta-pequena .pergunta{font-size:18px;line-height:1.18;margin-top:5px}
.faixa .sub{margin:6px 0 0;font:700 15px/1.35 var(--body);color:var(--cacau-2)}

/* ---------- cartões, etiquetas e pílulas ---------- */
.cartao{background:var(--cartao);border-radius:var(--r-cartao);padding:12px 14px;box-shadow:0 3px 0 var(--sombra)}
.cartao.areia{background:var(--areia);box-shadow:0 3px 0 var(--areia-sombra)}
.cartao-tit{display:flex;align-items:center;gap:8px;min-height:24px;margin:0 0 8px}
.cartao-tit h2,.cartao-tit h3{margin:0;font:700 18px/1.15 var(--display)}
.rot{font:800 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--cacau-2)}
.tipo{font:800 12px var(--body);color:var(--cacau-2);white-space:nowrap;flex:none}
.pts{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px 0 6px;border-radius:var(--r-pilula);font:600 15px var(--display);white-space:nowrap;flex:none;color:var(--cacau)}
.pts svg{width:22px;height:22px;overflow:visible}
.pts.l{background:var(--laranja-claro)} .pts.m{background:var(--melancia-claro)} .pts.p{background:var(--pernilongo-claro)}
.pts.neutra{background:var(--pos);padding:0 10px}
.etiqueta{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--r-pilula);background:var(--pos);font:800 12px var(--body);color:var(--cacau);white-space:nowrap}
.etiqueta .tr{width:14px;height:14px}
.etiqueta.ok{background:var(--ok-claro);color:var(--ok)}
.etiqueta.alerta{background:var(--alerta-claro);color:var(--alerta)}
.pos{min-width:26px;height:24px;border-radius:var(--r-pilula);display:inline-grid;place-items:center;font:600 12px/1 var(--display);background:var(--pos);padding:0 5px;flex:none;color:var(--cacau)}
.pos.ouro{background:var(--sol);color:#3B2418}
.nota{margin:0;font:700 13px/1.35 var(--body);color:var(--cacau-2)}
.fala{display:flex;align-items:center;gap:8px}
.fala>svg{width:56px;height:50px;flex:none;overflow:visible}
.fala p{margin:0;position:relative;background:var(--cartao);border-radius:16px;padding:8px 12px;font:700 14px/1.35 var(--body);box-shadow:0 3px 0 var(--sombra)}
.fala p::before{content:"";position:absolute;left:-7px;top:50%;margin-top:-7px;border:7px solid transparent;border-left:0;border-right-color:var(--cartao)}

/* ---------- campos ---------- */
.campo{position:relative;display:flex;align-items:center;height:56px;border-radius:var(--r-campo);background:var(--cartao);box-shadow:inset 0 0 0 2.5px var(--linha), 0 3px 0 var(--sombra)}
.campo:focus-within{box-shadow:inset 0 0 0 3px var(--aguape), 0 3px 0 var(--sombra)}
.campo input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;padding:0 62px 0 16px;font:600 21px var(--display);color:var(--cacau)}
.campo input::placeholder{color:var(--cacau-2);opacity:.55}
.contador{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:800 12px var(--body);color:var(--cacau-2);background:var(--pos);border-radius:var(--r-pilula);padding:3px 7px}
.contador.cheio{background:var(--alerta-claro);color:var(--alerta)}
.campo.grande{height:62px}
.campo.grande input{font-size:var(--fs-resp,22px)}
.rotulo{display:block;margin:0 0 6px;font:800 14px var(--body);color:var(--cacau)}
.ajuda{margin:6px 2px 0;font:700 12.5px/1.3 var(--body);color:var(--cacau-2)}
.erro{margin:6px 2px 0;font:800 13px/1.3 var(--body);color:var(--alerta)}

/* código da sala: 4 casas; um <input> transparente por cima recebe o teclado e a colagem */
.codigo{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;height:64px}
.codigo .cel{display:grid;place-items:center;border-radius:14px;background:var(--cartao);box-shadow:inset 0 0 0 2.5px var(--linha), 0 3px 0 var(--sombra);font:700 32px/1 var(--display);color:var(--cacau)}
.codigo .cel.vazia{color:transparent}
.codigo .cel.atual{box-shadow:inset 0 0 0 3px var(--aguape), 0 3px 0 var(--sombra)}
.codigo input{position:absolute;inset:0;opacity:0;font-size:16px;letter-spacing:1em;text-transform:uppercase}
.codigo.fixo .cel{background:var(--laranja-claro);box-shadow:0 3px 0 var(--sombra)}

/* escolher capivara: 12 em 6×2 (ou 4×3 em tela estreita) */
/* sala com mais gente: código e QR menores */
.espera.cheia .qr{width:88px;height:88px;padding:6px}
.espera.cheia .cod-grande{font-size:32px}
.espera.cheia .convite-txt .ajuda-qr{display:none}
.partida-linha{display:flex;align-items:center;gap:8px}
.partida-linha .resumo{flex:1;min-width:0}
.partida-linha .pill{height:32px;flex:none}
@media (max-height:680px){
  .qr{width:96px;height:96px;padding:7px}
  .cod-grande{font-size:34px}
  .passos{gap:8px}
  .passo{padding:8px 10px;grid-template-columns:46px 1fr;gap:10px}
  .passo .ilu{width:46px;height:46px}
  .passo p{font-size:13.5px;line-height:1.3}
}
.escolha{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.escolha .opc{position:relative;aspect-ratio:1;border-radius:14px;background:var(--cartao);box-shadow:0 3px 0 var(--sombra);display:grid;place-items:center;overflow:visible}
.escolha .opc .av{width:84%;height:84%}
.escolha .opc[aria-checked="true"]{background:var(--aguape-claro);box-shadow:inset 0 0 0 3px var(--aguape), 0 3px 0 var(--aguape-2)}
.escolha .opc[aria-checked="true"]::after{content:"";position:absolute;right:-5px;top:-5px;width:20px;height:20px;border-radius:50%;background:var(--aguape) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 0 0 2px var(--cartao)}
.escolha .opc[aria-disabled="true"]{opacity:.32;box-shadow:none;filter:grayscale(.6)}

/* segmentos (5 / 10 / 15) e chave liga/desliga */
.segs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:var(--r-pilula);background:var(--pos)}
.segs button{height:40px;border-radius:var(--r-pilula);font:600 17px var(--display);color:var(--cacau-2);white-space:nowrap}
.segs button[aria-checked="true"]{background:var(--cartao);color:var(--cacau);box-shadow:0 2px 0 var(--sombra)}
.segs.textos button{font:800 14px var(--body)}
.chave{position:relative;width:54px;height:32px;border-radius:var(--r-pilula);background:var(--pos);flex:none;box-shadow:inset 0 0 0 2px var(--linha)}
.chave::after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:var(--cartao);box-shadow:0 2px 0 var(--sombra);transition:transform .18s}
.chave[aria-checked="true"]{background:var(--aguape);box-shadow:none}
.chave[aria-checked="true"]::after{transform:translateX(22px);background:#fff}
.opcao{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:2px dashed var(--linha)}
.opcao:first-of-type{border-top:0;padding-top:4px}
.opcao-cab{display:flex;align-items:center;gap:10px}
.opcao-cab b{font:700 17px var(--display)}
.opcao-cab small{display:block;font:700 13px/1.3 var(--body);color:var(--cacau-2)}
.opcao-cab>div{flex:1;min-width:0}

/* ---------- entrar ---------- */
.entrar .cartao{padding:12px 12px 14px}

/* ---------- sala de espera ---------- */
.convite{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.qr{width:112px;height:112px;border-radius:14px;background:#FFFFFF;padding:8px;box-shadow:0 3px 0 var(--sombra);display:grid;place-items:center}
.qr svg,.qr canvas,.qr img{width:100%;height:100%;display:block;image-rendering:pixelated}
.convite-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.cod-grande{font:700 40px/1 var(--display);letter-spacing:.08em;color:var(--cacau)}
.convite-txt small{font:700 13px/1.3 var(--body);color:var(--cacau-2)}
.convite .pill{align-self:flex-start;height:32px;margin-top:4px}
.turma{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 4px;align-content:start}
.turma .quem{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;position:relative}
.turma .av{width:46px;height:46px}
.turma .nm{font:800 13px/15px var(--body);text-align:center;max-width:100%;overflow-wrap:anywhere}
.turma .coroa{position:absolute;top:-4px;left:calc(50% + 12px);width:20px;height:20px;border-radius:50%;background:var(--sol);display:grid;place-items:center;box-shadow:0 0 0 2px var(--cartao)}
.turma .coroa .tr{width:12px;height:12px;stroke:#3B2418;stroke-width:2.6}
.turma .vaga{width:46px;height:46px;border-radius:50%;border:2.5px dashed var(--linha)}
.turma .eu .av{background:var(--aguape-claro);border-radius:50%;box-shadow:0 0 0 2.5px var(--aguape)}
/* mais de 8: lista em 2 colunas, cabecinha ao lado do nome */
.turma.lista2,.responderam.lista2{grid-template-columns:1fr 1fr;gap:5px 10px}
.turma.lista2 .quem,.responderam.lista2 .quem{flex-direction:row;align-items:center;gap:7px}
.turma.lista2 .av,.responderam.lista2 .av{width:28px;height:28px}
.turma.lista2 .nm,.responderam.lista2 .nm{text-align:left;font-size:13px;line-height:15px}
.turma.lista2,.responderam.lista2{row-gap:4px}
.turma.lista2 .coroa{left:18px;top:-5px;width:17px;height:17px}
.turma.lista2 .coroa .tr{width:10px;height:10px}
.responderam.lista2 .marca{left:18px;top:-4px;width:17px;height:17px}
.responderam.lista2 .marca .tr{width:10px;height:10px}
.resumo{display:flex;flex-wrap:wrap;gap:6px}
.resumo .etiqueta{height:28px;font-size:13px}

/* ---------- pergunta e resposta ---------- */
.relogio{--p:1;position:relative;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;flex:none;
  background:conic-gradient(var(--aguape) calc(var(--p) * 360deg), var(--pos) 0);font:700 16px/1 var(--display);color:var(--cacau)}
.relogio::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--cartao)}
.relogio span{position:relative}
.relogio.acabando{background:conic-gradient(var(--alerta) calc(var(--p) * 360deg), var(--pos) 0);color:var(--alerta)}
.resposta{display:flex;flex-direction:column;gap:12px}
.pensando{display:flex;align-items:center;gap:12px;justify-content:center;flex:1 1 auto;min-height:0}
.pensando .capi{max-height:100%;width:auto}
.dica{margin:0;font:700 14px/1.35 var(--body);color:var(--cacau-2);text-align:center}
/* com o teclado aberto: some o enfeite, a pergunta encolhe e campo + botão sobem */
.tela.teclado .so-sem-teclado{display:none!important}
.tela.teclado{--pt:calc(10px + env(safe-area-inset-top, 0px));--pb:10px}
.tela.teclado .faixa{padding-bottom:16px}
.tela.teclado .pergunta{font-size:20px;margin-top:4px}
.tela.teclado .faixa-linha{min-height:28px}
.tela.teclado .relogio{width:38px;height:38px;font-size:14px}
.tela.teclado .relogio::before{inset:4px}
.tela.teclado .miolo{gap:10px;flex:0 0 auto}
.tela.teclado .fim{margin-top:12px}
.tela.teclado .btn.pri{height:52px}

/* ---------- esperando os outros ---------- */
.minha{display:flex;align-items:center;gap:10px}
.minha .av{width:44px;height:44px}
.minha-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.minha-txt small{font:800 12px var(--body);color:var(--cacau-2)}
.minha-txt q{font:700 21px/1.15 var(--display);quotes:"“" "”";overflow-wrap:anywhere}
.responderam{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 4px}
.responderam .quem{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;min-width:0}
.responderam .av{width:48px;height:48px}
.responderam .nm{font:800 13px/15px var(--body);text-align:center;overflow-wrap:anywhere}
.responderam .marca{position:absolute;top:-2px;left:calc(50% + 12px);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 2px var(--cartao)}
.responderam .marca .tr{width:13px;height:13px;stroke-width:3.2}
.responderam .ja .marca{background:var(--ok);color:#fff}
.responderam .ja .marca .tr{stroke:#fff}
.responderam .falta .av{opacity:.42}
.responderam .falta .marca{background:var(--pos);color:var(--cacau-2)}
.responderam .falta .nm{color:var(--cacau-2)}
.reticencias{display:inline-flex;gap:2px}
.reticencias i{width:4px;height:4px;border-radius:50%;background:currentColor;display:block}


/* ---------- juiz conferindo ---------- */
.par{display:flex;flex-direction:column;gap:10px}
.par-resps{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}
.chip-resp{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;background:var(--papel);border-radius:14px;padding:8px 6px 7px;box-shadow:inset 0 0 0 2px var(--linha)}
.chip-resp b{font:700 18px/1.12 var(--display);text-align:center;overflow-wrap:anywhere}
.chip-resp small{font:800 12px var(--body);color:var(--cacau-2);white-space:nowrap}
.par-meio{font:700 22px var(--display);color:var(--cacau-2)}
.par .par-btn .btn{width:auto}
.resumo.feitos{justify-content:center}
.vez{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.vez .capi{display:block}
.vez h2{margin:0;font:700 22px/1.2 var(--display)}
.vez p{margin:0;font:700 15px/1.4 var(--body);color:var(--cacau-2);max-width:30ch}

/* ---------- revelação ---------- */
.grupos{display:flex;flex-direction:column;gap:12px;margin-top:8px;flex:1 0 auto;justify-content:space-evenly}
.medindo .grupos,.medindo .corpo{flex:none;justify-content:flex-start}
.grupo{background:var(--cartao);border-radius:var(--r-cartao);padding:8px 10px 7px;box-shadow:0 3px 0 var(--sombra)}
.g-top{display:flex;align-items:center;gap:7px;min-height:28px}
.resp{font:700 22px/1.1 var(--display);letter-spacing:.01em;min-width:0;flex:0 1 auto;overflow-wrap:anywhere}
.sem-tipo .tipo{display:none}
.cena{margin-top:6px;border-radius:13px;overflow:hidden}
.cena svg{display:block;width:100%;height:100%}
.nomes{position:relative;margin-top:4px;min-height:17px}
.nomes .nm{position:absolute;top:0;transform:translateX(-50%);font:800 14px/17px var(--body);text-align:center}
.nomes.fluxo{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px}
.nomes.fluxo .nm{position:static;transform:none;white-space:nowrap;max-width:none!important}
.nomes.fluxo .nm::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cor);margin-right:5px;vertical-align:1px}
.nomes.cabecas{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:5px;min-height:0}
.nomes.cabecas .nm{position:static;transform:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font:800 13px/15px var(--body)}
.nomes.cabecas .av{width:24px;height:24px}
/* juntados pela sala: os textos como foram escritos e, para o juiz, o "separar" (CONTRATOS §7). Discreto: é exceção */
.variantes{display:flex;align-items:center;gap:8px;margin-top:1px;min-height:22px}
.var-txt{flex:1;min-width:0;font:700 12.5px/1.3 var(--body);color:var(--cacau-2);overflow-wrap:anywhere}
.separar{flex:none;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px 0 7px;border-radius:var(--r-pilula);background:var(--pos);color:var(--cacau);font:800 12px var(--body);box-shadow:0 2px 0 var(--sombra)}
.separar .tr{width:13px;height:13px;stroke-width:2.4}
.separar:active{transform:translateY(2px);box-shadow:none}
.compacto .variantes{min-height:18px;margin-top:0}
.compacto .var-txt{font-size:12px;line-height:1.25}
.compacto .separar{height:20px;font-size:12px;padding:0 7px 0 5px}
.compacto .separar .tr{width:12px;height:12px}
.aviso-flutuante{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top, 0px));z-index:70;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  width:max-content;max-width:calc(100% - 28px);background:var(--cartao);color:var(--cacau);border-radius:16px;padding:9px 14px;font:700 14px/1.3 var(--body);box-shadow:0 3px 0 var(--sombra), 0 8px 24px rgba(59,36,24,.18);
  animation:aviso var(--dura, 4000ms) ease both}
.aviso-flutuante .tr{width:18px;height:18px;flex:none;stroke:var(--aguape)}
.aviso-flutuante b{font-weight:900}
@keyframes aviso{0%{opacity:0;transform:translate(-50%,-14px)}6%{opacity:1;transform:translate(-50%,0)}90%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}
.margem{background:var(--areia);border-radius:var(--r-cartao);padding:8px 10px 10px;box-shadow:0 3px 0 var(--areia-sombra)}
.m-tit{font:700 19px/1.1 var(--display);white-space:nowrap}
.m-um{display:flex;align-items:center;gap:12px;margin-top:6px}
.m-um>svg{display:block;flex:none}
.m-um .m-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.m-um .nm{font:700 20px/1.12 var(--display)}
.m-um small{font:700 14px/1.3 var(--body);color:var(--cacau-2)}
.m-um q{font:800 17px/1.25 var(--body);quotes:"“" "”"}
.m-duas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.m-duas>div{display:flex;flex-direction:column;min-width:0}
.m-duas>div>svg{display:block;width:100%;height:auto}
.m-duas .nm{font:700 17px/1.15 var(--display);margin-top:6px}
.m-duas q{font:700 14px/1.3 var(--body);quotes:"“" "”"}
/* margem em lista (3 ou mais): cabecinha + nome + resposta. O espaço entre as linhas é pelo menos 4 px
   além da folga do desenho (o avatar é recortado justo na cabeça, então as orelhas não encostam) */
.m-rows{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.m-row{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center}
.m-row>svg{width:40px;height:40px;display:block;overflow:hidden}
.m-row .nm{display:block;font:700 16px/1.15 var(--display)}
.m-row q{display:block;font:700 14px/1.3 var(--body);quotes:"“" "”"}
.apertado .grupos{gap:10px}
.apertado .m-rows{gap:5px;margin-top:4px}
.apertado .m-row{grid-template-columns:28px 1fr;gap:8px}
.apertado .m-row>svg{width:28px;height:28px}
.apertado .m-row .nm{font-size:15px}
.apertado .m-row q{font-size:13px;line-height:1.25}
.apertado .m-row>div,.compacto .m-row>div{display:block;line-height:16px}
.apertado .m-row .nm,.compacto .m-row .nm{display:inline;white-space:nowrap;margin-right:6px}
.apertado .m-row q,.compacto .m-row q{display:inline}
.compacto .grupos{gap:9px}
.compacto .faixa{padding-bottom:19px}
.compacto.pergunta-pequena .faixa{padding-top:calc(var(--pt) - 6px);padding-bottom:15px}
.compacto.pergunta-pequena .btn.pri.fim{height:52px}
.compacto .grupo{padding:5px 8px 4px;border-radius:15px}
.compacto .g-top{min-height:22px;gap:6px}
.compacto .resp{font-size:18px}
.compacto .pts{height:24px;font-size:13px;padding:0 8px 0 4px;gap:4px}
.compacto .pts svg{width:18px;height:18px}
.compacto .cena{margin-top:3px;border-radius:11px}
.compacto .nomes{margin-top:4px;min-height:16px}
.compacto .nomes .nm{font-size:13px;line-height:16px}
.compacto .margem{padding:6px 8px 7px;border-radius:15px}
.compacto .m-tit{font-size:16px}
.compacto .m-rows{gap:5px;margin-top:4px}
.compacto .m-row{grid-template-columns:26px 1fr;gap:8px}
.compacto .m-row>svg{width:26px;height:26px}
.compacto .m-row .nm{font:800 13px/15px var(--body)}
.compacto .m-row q{font:600 13px/15px var(--body)}

/* ---------- placar ---------- */
.corpo{display:flex;flex-direction:column;gap:12px;margin-top:8px;flex:1 0 auto;justify-content:space-evenly}
.quadro{background:var(--cartao);border-radius:20px;padding:8px 8px 10px;box-shadow:0 3px 0 var(--sombra)}
.podio{position:relative;border-radius:14px;overflow:hidden}
.podio svg{display:block;width:100%;height:100%}
.etq{position:absolute;transform:translateX(-50%);background:#FFF8EC;color:#3B2418;border-radius:7px;font:700 20px/26px var(--display);padding:0 6px;box-shadow:0 2px 0 rgba(59,36,24,.25);white-space:nowrap}
.cols{display:grid;margin-top:8px}
.col{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.col .nm{font:800 14px/17px var(--body);text-align:center}
.pic{height:16px;display:inline-flex;align-items:center;gap:1px;font:800 12px/16px var(--body);color:var(--cacau);white-space:nowrap}
.pic svg{width:18px;height:14px;overflow:visible}
.quem-lista{display:none;grid-template-columns:1fr 1fr;gap:6px 10px;margin-top:10px}
.lista .cols{display:none}
.lista .quem-lista{display:grid}
.lista.uma .quem-lista{grid-template-columns:1fr}
.quem-lista>div{display:grid;grid-template-columns:auto 24px 1fr;gap:5px;align-items:center;min-width:0}
.quem-lista>div>svg{width:24px;height:24px;display:block}
.q-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.quem-lista .nm{font:800 13px/15px var(--body)}
.quem-lista .pic{height:14px}
.leg{background:var(--cartao);border-radius:var(--r-cartao);padding:10px 14px 11px;box-shadow:0 3px 0 var(--sombra);display:flex;flex-direction:column;gap:6px}
.lg{display:flex;align-items:center;gap:10px;font:600 14px/1.3 var(--body)}
.lg b{font-weight:900}
.lg svg{width:26px;height:22px;flex:none;overflow:visible}
.lgs{display:flex;flex-wrap:wrap;gap:3px 14px;font:700 13px/20px var(--body)}
.lgs span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.lgs svg{width:20px;height:18px;overflow:visible}
.lista-p{background:var(--cartao);border-radius:var(--r-cartao);padding:4px 6px;box-shadow:0 3px 0 var(--sombra);display:flex;flex-direction:column;gap:1px}
.linha{display:grid;grid-template-columns:28px 30px 1fr 28px;gap:6px;align-items:center;min-height:var(--alt,33px)}
.linha .pos{min-width:0;width:28px;height:22px}
.linha .av{width:28px;height:28px;display:block}
.ln-meio{display:flex;flex-direction:column;gap:1px;min-width:0}
.ln-nome{display:flex;align-items:center;gap:6px;min-width:0}
.ln-nome .nm{font:800 13px/14px var(--body);min-width:0;flex:0 1 auto}
.barra svg{display:block;height:15px;overflow:visible}
.ln-pt{font:700 18px/1 var(--display);text-align:right}
.lista-p.baixa .ln-nome .nm{line-height:13px}
.lista-p.baixa .barra svg{height:13px}
.lista-p.baixa .linha .av{width:26px;height:26px}
.placar.compacto.aperto .faixa{padding-top:calc(var(--pt) - 6px);padding-bottom:15px}
.placar.compacto.aperto .titulo h1{font-size:26px}
.placar.compacto.aperto .btn.pri.fim{height:52px}
.grupos + .fim,.corpo + .fim{margin-top:14px}
.medindo .grupos + .fim,.medindo .corpo + .fim{margin-top:auto}

/* ---------- desempate e pódio final ---------- */
.empatados{display:flex;align-items:center;gap:10px}
.empatados .avs{display:flex}
.empatados .avs .av{width:40px;height:40px;margin-right:-8px;background:var(--cartao);border-radius:50%;box-shadow:0 0 0 2.5px var(--cartao)}
.empatados p{margin:0 0 0 8px;font:700 14px/1.35 var(--body)}
.empatados b{font-weight:900}
.campeao{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.faixa-campeao{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:10px;background:var(--sol);color:#3B2418;font:700 18px var(--display);box-shadow:0 3px 0 #D9A520;white-space:nowrap}
.faixa-campeao .tr{width:20px;height:20px;stroke:#3B2418}
.podio-final{position:relative;border-radius:16px;overflow:hidden}
.podio-final svg{display:block;width:100%;height:100%}
.resto{display:flex;flex-direction:column;gap:4px}
.resto .linha{grid-template-columns:28px 30px 1fr auto;min-height:32px}
.resto .ln-pt{font-size:17px}

/* ---------- como jogar ---------- */
.passos{display:flex;flex-direction:column;gap:10px;counter-reset:passo}
.passo{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;background:var(--cartao);border-radius:var(--r-cartao);padding:10px 12px;box-shadow:0 3px 0 var(--sombra)}
.passo .ilu{width:52px;height:52px;border-radius:14px;background:var(--papel);display:grid;place-items:center;position:relative}
.passo .ilu svg{max-width:46px;max-height:46px}
.passo .ilu::before{counter-increment:passo;content:counter(passo);position:absolute;left:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:var(--aguape);color:#fff;font:700 13px/22px var(--display);text-align:center}
.passo h3{margin:0 0 2px;font:700 17px/1.15 var(--display)}
.passo p{margin:0;font:600 14px/1.35 var(--body);color:var(--cacau)}
.passo.areia{background:var(--areia);box-shadow:0 3px 0 var(--areia-sombra)}
.passo.areia .ilu{background:var(--cartao)}

/* ---------- modo lousa (sem internet) ---------- */
.lousa{position:relative;flex:1 1 auto;min-height:0;border-radius:22px;background:#2F5E52;box-shadow:inset 0 0 0 6px #D9A066, inset 0 0 0 8px #3B2418, 0 4px 0 var(--sombra);
  display:grid;place-items:center;padding:22px 20px;overflow:hidden;color:#FFF6E4}
:root[data-theme="dark"] .lousa{background:#1F4339}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .lousa{background:#1F4339} }
.lousa-txt{font:700 64px/1.02 var(--display);text-align:center;overflow-wrap:anywhere;hyphens:none;max-width:100%}
.lousa-vazia{font:700 20px/1.3 var(--display);text-align:center;opacity:.6}
.lousa .giz{position:absolute;right:16px;bottom:14px;width:34px;height:10px;border-radius:3px;background:#FFF6E4;opacity:.85;transform:rotate(-8deg)}
.lousa-rodape{display:flex;gap:10px;margin-top:12px}
.lousa-rodape .btn{flex:1}

/* ---------- véu de papel e painel que sobe de baixo ---------- */
.veu{position:fixed;inset:0;z-index:40;background:var(--veu);display:flex;align-items:flex-end;justify-content:center;padding-top:max(20px, env(safe-area-inset-top, 0px))}
.painel{width:100%;max-width:520px;max-height:100%;overflow:auto;overscroll-behavior:contain;background:var(--cartao);color:var(--cacau);border-radius:26px 26px 0 0;
  padding:10px 18px calc(20px + env(safe-area-inset-bottom, 0px));box-shadow:0 -3px 0 var(--sombra), 0 -12px 30px rgba(59,36,24,.12);display:flex;flex-direction:column;gap:12px;touch-action:pan-y}
.alca{width:46px;height:5px;border-radius:9px;background:var(--cacau);opacity:.3;margin:0 auto 2px;flex:none}
.painel-cab{display:flex;align-items:center;gap:10px}
.painel-cab h2{margin:0;font:700 22px/1.15 var(--display);flex:1}
.painel .centro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.painel .centro p{margin:0;font:700 15px/1.4 var(--body);color:var(--cacau-2);max-width:32ch}
.painel .centro h2{margin:0;font:700 22px/1.2 var(--display)}
@media (min-width:700px) and (min-height:560px){
  .veu{align-items:center;padding:24px}
  .painel{max-width:440px;border-radius:24px;box-shadow:0 5px 0 var(--sombra), 0 12px 40px rgba(59,36,24,.16);padding:20px}
  .alca{display:none}
}
.menu-lista{display:flex;flex-direction:column;gap:8px}
.menu-lista .btn{justify-content:flex-start;padding:0 18px}

/* ---------- avisos ---------- */
.aviso{display:flex;align-items:center;gap:10px;background:var(--alerta-claro);color:var(--alerta);border-radius:14px;padding:10px 12px;font:800 14px/1.3 var(--body)}
.aviso .tr{width:20px;height:20px}
.carregando{display:inline-flex;gap:6px;align-items:center}
.carregando svg{width:18px;height:18px}


/* ---------- início ---------- */
.inicio{--pe:236px}
.palco-inicio{height:calc(100% - var(--pe) + 26px)}
.palco-inicio>svg{width:100%;height:100%}
.logo{position:relative;margin:18px 0 0;text-align:center;font:700 47px/1 var(--display);color:var(--cacau);letter-spacing:.005em;
  -webkit-text-stroke:7px var(--cartao);paint-order:stroke fill}
.logo .ii{position:relative;display:inline-block}
.logo .ii svg{position:absolute;left:50%;top:-.02em;width:.42em;height:.5em;transform:translateX(-46%) rotate(-8deg);overflow:visible}
.slogan{position:relative;margin:8px 0 0;text-align:center;font:800 14px var(--body);color:var(--cacau-2)}
.inicio-pe{position:relative;margin-top:auto;display:flex;flex-direction:column}
.frase{margin:0;text-align:center;font:700 16px/1.4 var(--body);color:var(--cacau)}
.inicio-btns{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.inicio-links{display:flex;justify-content:center;gap:22px;margin-top:14px}
.inicio-links .link{margin:0}

/* pedaços de telas novas */
.espera-anf p{flex:1}
.espera-anf>svg{width:56px;height:auto}
.lousa-tit{font:700 20px var(--display);margin-left:4px}
.lousa-tela .topbar{margin-bottom:12px}
.lousa-tela.mostrando .topbar{margin-bottom:10px}
.troca{position:relative;display:flex;align-items:center;gap:10px}
.troca .saiu{opacity:.45;filter:grayscale(.7)}
.troca>.tr{width:24px;height:24px;stroke:var(--cacau-2)}
.troca .coroa{position:absolute;right:-6px;top:-6px;width:26px;height:26px;border-radius:50%;background:var(--sol);display:grid;place-items:center;box-shadow:0 0 0 2.5px var(--cartao)}
.troca .coroa .tr{width:15px;height:15px;stroke:#3B2418;stroke-width:2.6}
.podio-fim .cols{margin-top:6px}
.podio-fim .cols .nm{font:800 14px/17px var(--body);text-align:center;padding:0 2px}
.resto{padding:4px 8px}
.resto.duas{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
.resto.duas .linha{grid-template-columns:auto 1fr auto;gap:6px}
.resto.duas .linha .av{display:none}
.resto .pos{width:auto;min-width:28px}
q.sem{font-style:italic;font-weight:600;color:var(--cacau-2);quotes:none}
.minha .pill{flex:none}
.fala .tr{width:16px;height:16px;vertical-align:-3px;stroke:var(--aguape)}
.titulo .ib{align-self:center;margin-left:4px}
.titulo span{margin-left:auto}

/* ---------- prévia: moldura de celular (só nas páginas de proposta) ---------- */
.celular{width:340px;border:10px solid var(--moldura);border-radius:48px;overflow:hidden;background:var(--papel)}

/* =========================================================
   ANIMAÇÕES
   Entrada: toca uma vez, quando a tela abre. Ponha .entra na raiz da tela SÓ no primeiro desenho dela
   (no redesenho da mesma tela, sem .entra). Tela viva: laços suaves, ligados por .vivo na raiz (ou <html>).
   Quem pede menos movimento (prefers-reduced-motion) fica sem nenhuma.
   ========================================================= */
/* 1. carimbo: cai do alto girando e assenta com um quique (cartões da revelação, número do placar, código, pergunta) */
@keyframes carimbo{0%{opacity:0;transform:scale(1.55) rotate(-7deg)}55%{opacity:1;transform:scale(.94) rotate(1.5deg)}78%{transform:scale(1.03) rotate(-.5deg)}100%{transform:none}}
.entra .anim-carimbo{animation:carimbo .5s cubic-bezier(.3,.7,.4,1) both;animation-delay:calc(var(--i, 0) * 180ms + var(--atraso, 0ms))}
/* 2. laranja caindo na cabeça (e a meia melancia), com os risquinhos de impacto depois */
@keyframes cai{0%{opacity:0;transform:translateY(-34px)}60%{opacity:1;transform:translateY(2px)}80%{transform:translateY(-3px)}100%{transform:none}}
@keyframes plop{0%,60%{opacity:0;transform:scale(.6)}80%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:none}}
.entra .chega{animation:cai .55s cubic-bezier(.4,.1,.5,1) both;animation-delay:calc(var(--i, 0) * 180ms + 280ms + var(--j, 0) * 70ms)}
.entra .chega .plop{transform-box:fill-box;transform-origin:center;animation:plop .7s ease-out both;animation-delay:calc(var(--i, 0) * 180ms + 330ms + var(--j, 0) * 70ms)}
/* 3. caixotes crescendo do chão (placar e pódio) */
@keyframes sobe{0%{opacity:0;transform:translateY(60px)}70%{opacity:1;transform:translateY(-4px)}100%{transform:none}}
.entra .pilha-caixote{animation:sobe .6s cubic-bezier(.3,.8,.4,1) both;animation-delay:calc(var(--i, 0) * 90ms)}
.entra .etq{animation:carimbo .45s cubic-bezier(.3,.7,.4,1) both;animation-delay:calc(var(--i, 0) * 90ms + 520ms)}
/* 4. aparecer de baixo, sem deslizar de lado (cartões comuns, lista de quem chegou) */
@keyframes surge{0%{opacity:0;transform:translateY(12px) scale(.98)}100%{opacity:1;transform:none}}
.entra .anim-surge{animation:surge .35s ease-out both;animation-delay:calc(var(--i, 0) * 60ms)}
/* 5. painel subindo de baixo e o véu chegando */
@keyframes veu{from{opacity:0}}
@keyframes painel{from{transform:translateY(40%)}}
.veu.entra{animation:veu .18s ease-out}
.veu.entra .painel{animation:painel .3s cubic-bezier(.2,.9,.3,1)}
/* 6. chegou gente na sala: a cabecinha dá um pulinho (ponha .chegou no .quem novo) */
@keyframes pulinho{0%{transform:translateY(0) scale(.6);opacity:0}50%{transform:translateY(-8px) scale(1.05);opacity:1}100%{transform:none}}
.chegou .av{animation:pulinho .5s cubic-bezier(.3,.7,.4,1) both}

/* tela viva (laços) */
@keyframes boia{0%,100%{transform:translateY(0)}50%{transform:translateY(1.6px)}}
@keyframes pisca{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes zumbe{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2.5px,-2px) rotate(-6deg)}50%{transform:translate(1px,-3.5px) rotate(4deg)}75%{transform:translate(2.5px,-.5px) rotate(-3deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes brilha{0%,100%{opacity:1}50%{opacity:.82}}
@keyframes reflexo{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(-4px);opacity:.75}}
@keyframes bate{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes rola{to{transform:rotate(360deg)}}
@keyframes ponto{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes cintila{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.vivo .boiando{animation:boia 3.2s ease-in-out infinite}
.vivo .boiando.b2{animation-duration:3.7s;animation-delay:-1.2s}
.vivo .boiando.b3{animation-duration:2.9s;animation-delay:-2s}
.vivo .olhos{transform-box:fill-box;transform-origin:center;animation:pisca 5.5s infinite}
.vivo .boiando.b2 .olhos{animation-delay:-2.1s;animation-duration:6.3s}
.vivo .boiando.b3 .olhos{animation-delay:-3.6s;animation-duration:4.9s}
.vivo .pernilongo{animation:zumbe .9s linear infinite}
.vivo .sol{animation:brilha 4s ease-in-out infinite}
.vivo .reflexo{animation:reflexo 3.5s ease-in-out infinite}
.vivo .brilhos{transform-box:fill-box;transform-origin:center;animation:cintila 1.6s ease-in-out infinite}
.vivo .relogio.acabando{animation:bate 1s ease-in-out infinite}
.vivo .reticencias i{animation:ponto 1.2s infinite}
.vivo .reticencias i:nth-child(2){animation-delay:.2s}
.vivo .reticencias i:nth-child(3){animation-delay:.4s}
.rolando{animation:rola 1.1s linear infinite;transform-origin:center}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}