/* Cadastro antes dos jogos (compartilhado). Desenhado para o palco de 1080×1920 dos totens.
   Usa as cores definidas no :root de cada jogo (--bg, --neon, --card...). */
.cad { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 35; overflow: hidden; background: var(--bg); color: var(--fg);
  opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.cad.aberto { opacity: 1; pointer-events: auto; }
.cad-brilho { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(200, 243, 29, 0.12) 0, rgba(200, 243, 29, 0) 55%); }

/* Topo: progresso e fechar */
.cad-topo { position: absolute; left: 60px; right: 60px; top: 70px; height: 90px; display: flex; align-items: center; justify-content: space-between; }
.cad-passos { display: flex; align-items: center; }
.cad-passos i { width: 64px; height: 14px; margin-right: 14px; border-radius: 99px; background: var(--card-2); box-shadow: inset 0 0 0 2px var(--line); transition: width 0.3s, background 0.3s; }
.cad-passos i.feito { background: var(--neon-dark); box-shadow: none; }
.cad-passos i.atual { width: 120px; background: var(--neon); box-shadow: none; }
.cad-fechar { width: 92px; height: 92px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); display: flex; align-items: center; justify-content: center; }
.cad-fechar svg { width: 40px; height: 40px; }

/* Etapa */
.cad-etapa { position: absolute; left: 60px; right: 60px; top: 210px; bottom: 60px; display: flex; flex-direction: column; animation: cadEntrar 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes cadEntrar { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
.cad-chapeu { font: 700 38px/1 var(--corpo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon); }
.cad-titulo { margin: 30px 0 0; font: 800 104px/1.02 var(--titulo); letter-spacing: -0.035em; }
.cad-campo { margin-top: 56px; min-height: 150px; padding: 36px 40px; border-radius: 36px; background: var(--card); box-shadow: inset 0 0 0 3px var(--neon-dark);
  font: 700 64px/1.2 var(--titulo); word-break: break-word; }
.cad-campo.vazio { display: flex; align-items: center; }
.cad-campo.vazio .cad-texto { color: var(--dim); font-weight: 600; }
.cad-campo.vazio .cad-cursor { order: -1; margin: 0 16px 0 0; }
.cad-cursor { display: inline-block; width: 6px; height: 66px; margin-left: 6px; vertical-align: -10px; background: var(--neon); animation: cadPiscar 1s steps(1, end) infinite; }
@keyframes cadPiscar { 50% { opacity: 0; } }
.cad-dica { margin-top: 24px; min-height: 48px; font: 500 36px/1.35 var(--corpo); color: var(--muted); }
.cad-dica.erro { color: var(--fg); font-weight: 700; }

/* Teclado próprio na tela */
.cad-teclado { margin-top: auto; }
.cad-linha { display: flex; justify-content: center; margin-top: 14px; }
.cad-tecla { flex: 0 0 auto; width: 86px; height: 112px; margin: 0 5px; border-radius: 22px; background: var(--card-2); box-shadow: inset 0 0 0 2px var(--line), 0 6px 0 #000;
  font: 700 46px/1 var(--titulo); display: flex; align-items: center; justify-content: center; transition: transform 0.08s, background 0.08s; }
.cad-tecla:active { transform: translateY(4px); background: #2e2e2e; box-shadow: inset 0 0 0 2px var(--line), 0 2px 0 #000; }
.cad-tecla.larga { width: 200px; font-size: 34px; }
.cad-tecla.muito-larga { width: 300px; font-size: 34px; }
.cad-tecla.espaco { width: 440px; font: 600 32px/1 var(--corpo); color: var(--muted); }
.cad-tecla.acao { background: var(--card); }
.cad-tecla.ligada { background: var(--neon); color: var(--bg); box-shadow: 0 6px 0 var(--neon-dark); }
.cad-tecla svg { width: 52px; height: 52px; }
.cad-numerico .cad-linha { margin-top: 18px; }
.cad-numerico .cad-tecla { width: 300px; height: 130px; margin: 0 8px; font-size: 64px; }
.cad-numerico .cad-tecla.acao { font: 700 36px/1 var(--titulo); }

/* Botões de navegação */
.cad-acoes { display: flex; margin-top: 40px; }
.cad-acoes.fim { margin-top: auto; }
.cad-voltar { flex: 0 0 auto; width: 280px; margin-right: 20px; padding: 40px 0; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); font: 700 44px/1 var(--titulo); }
.cad-seguir { flex: 1; padding: 40px 0; border-radius: 999px; background: var(--neon); color: var(--bg); font: 800 48px/1 var(--titulo); box-shadow: 0 18px 60px rgba(200, 243, 29, 0.28); }

/* Pergunta de perfil em cartões */
.cad-opcoes { margin-top: 60px; }
.cad-opcao { display: flex; align-items: center; width: 100%; margin-top: 24px; padding: 42px 44px; border-radius: 36px; background: var(--card); box-shadow: inset 0 0 0 3px var(--line);
  font: 700 52px/1.15 var(--titulo); text-align: left; transition: background 0.2s, color 0.2s, transform 0.15s; }
.cad-opcao b { flex: 0 0 auto; width: 86px; height: 86px; margin-right: 34px; border-radius: 50%; background: var(--card-2); box-shadow: inset 0 0 0 3px var(--line);
  display: flex; align-items: center; justify-content: center; font: 800 42px/1 var(--titulo); color: var(--neon); }
.cad-opcao:active { transform: scale(0.98); }
.cad-opcao.escolhida { background: var(--neon); color: var(--bg); box-shadow: none; }
.cad-opcao.escolhida b { background: var(--bg); color: var(--neon); box-shadow: none; }

/* Aceites da LGPD com chave liga/desliga */
.cad-aceites { margin-top: 56px; }
.cad-aceite { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 24px; padding: 38px 40px; border-radius: 36px; background: var(--card);
  box-shadow: inset 0 0 0 3px var(--line); text-align: left; font: 600 40px/1.3 var(--corpo); color: var(--fg); transition: box-shadow 0.25s; }
.cad-aceite.ligado { box-shadow: inset 0 0 0 3px var(--neon-dark); }
.cad-aceite small { display: block; margin-top: 10px; font: 600 28px/1.2 var(--corpo); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.cad-chave { flex: 0 0 auto; position: relative; width: 132px; height: 76px; margin-left: 30px; border-radius: 99px; background: var(--card-2); box-shadow: inset 0 0 0 3px var(--line); transition: background 0.25s; }
.cad-chave::after { content: ""; position: absolute; left: 8px; top: 8px; width: 60px; height: 60px; border-radius: 50%; background: var(--muted); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s; }
.cad-aceite.ligado .cad-chave { background: var(--neon); box-shadow: none; }
.cad-aceite.ligado .cad-chave::after { transform: translateX(56px); background: var(--bg); }
.cad-letra { margin: 34px 0 0; font: 500 30px/1.45 var(--corpo); color: var(--dim); }

/* Pronto: saudação e contagem regressiva */
.cad-pronto { align-items: center; justify-content: center; text-align: center; }
.cad-numero { margin-top: 60px; height: 380px; font: 900 360px/1 var(--titulo); color: var(--neon); }
.cad-numero.anima { animation: cadNumero 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes cadNumero { 0% { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(0.85); } }

/* PIN do operador */
.cad-pin .cad-campo { justify-content: center; text-align: center; letter-spacing: 0.3em; }

.cad .tremer { animation: cadTremer 0.4s ease-in-out; }
@keyframes cadTremer { 20%, 60% { transform: translateX(-14px); } 40%, 80% { transform: translateX(14px); } }

/* ---------- fila virtual (fila.js) ---------- */
/* cartão com o QR code na tela de espera; o convite "Toque para jogar" sobe um pouco para dar lugar a ele */
#palco.fila-no-convite { --convite-y: 1440px; }
#palco.fila-no-convite #convite { top: 1400px; }
.fila-cartao { position: absolute; left: 90px; top: 1548px; width: 900px; z-index: 7; display: flex; align-items: center; padding: 26px 36px 26px 26px; border-radius: 40px;
  background: rgba(27, 27, 27, 0.96); box-shadow: inset 0 0 0 3px var(--neon-dark), 0 30px 90px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(20px);
  transition: opacity 0.35s, transform 0.35s; pointer-events: none; }
.fila-cartao.visivel { opacity: 1; transform: none; }
.fila-qr { flex: 0 0 auto; width: 206px; height: 206px; padding: 10px; border-radius: 22px; background: #ffffff; }
.fila-qr svg { display: block; width: 100%; height: 100%; }
.fila-cartao-texto { flex: 1; min-width: 0; margin-left: 34px; }
.fila-cartao-texto small { display: block; font: 700 26px/1 var(--corpo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon); }
.fila-cartao-texto b { display: block; margin-top: 14px; font: 800 50px/1.05 var(--titulo); letter-spacing: -0.02em; color: var(--fg); }
.fila-cartao-texto > span { display: block; margin-top: 12px; font: 500 29px/1.3 var(--corpo); color: var(--muted); }

/* chamada da vez: cobre o jogo parado até a pessoa tocar em "Sou eu, começar" */
.fila-chamada { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 28; display: flex; flex-direction: column; align-items: center; padding: 104px 80px 0; text-align: center;
  background: radial-gradient(circle at 50% 42%, rgba(200, 243, 29, 0.16), rgba(11, 11, 11, 0) 58%), rgba(11, 11, 11, 0.97); color: var(--fg);
  opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.fila-chamada.visivel { opacity: 1; pointer-events: auto; }
.fila-logo { width: 380px; height: auto; }
.fila-chapeu { display: block; margin-top: 150px; font: 700 38px/1 var(--corpo); letter-spacing: 0.18em; text-transform: uppercase; color: var(--neon); }
.fila-titulo { margin: 36px 0 0; font: 800 100px/1.02 var(--titulo); letter-spacing: -0.03em; }
.fila-nome { display: block; margin-top: 14px; font-size: 150px; color: var(--neon); }
.fila-nome.longo { font-size: 112px; }
.fila-texto { margin: 40px 0 0; font: 500 42px/1.3 var(--corpo); color: var(--muted); }
.fila-sou-eu { margin-top: 70px; padding: 48px 100px; border: 0; border-radius: 999px; background: var(--neon); color: var(--bg); font: 800 64px/1 var(--titulo);
  box-shadow: 0 24px 90px rgba(200, 243, 29, 0.35); animation: filaPulsar 1.5s ease-in-out infinite; touch-action: manipulation; }
.fila-sou-eu:active { transform: scale(0.97); }
@keyframes filaPulsar { 0%, 100% { box-shadow: 0 24px 90px rgba(200, 243, 29, 0.3); } 50% { box-shadow: 0 24px 120px rgba(200, 243, 29, 0.6); } }
.fila-contagem { margin: 44px 0 0; font: 500 34px/1.3 var(--corpo); color: var(--dim); }
.fila-proximos { margin: 18px 0 0; font: 700 40px/1.3 var(--titulo); color: var(--fg); }
.fila-rodape { position: absolute; left: 90px; right: 90px; bottom: 96px; display: flex; align-items: center; justify-content: center; }
.fila-rodape .fila-qr { width: 176px; height: 176px; }
.fila-rodape > span { margin-left: 34px; text-align: left; font: 500 32px/1.3 var(--corpo); color: var(--muted); }
.fila-rodape > span b { display: block; font: 800 44px/1.1 var(--titulo); color: var(--fg); }

/* bloco no painel do operador */
.fila-painel { margin: 30px 0 0; padding: 30px 34px; border-radius: 30px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 2px var(--line); text-align: left; }
.fila-painel-topo { display: flex; align-items: center; justify-content: space-between; }
.fila-painel-topo b { font: 800 42px/1 var(--titulo); color: var(--fg); }
.fila-painel button { margin: 0; padding: 22px 32px; border: 0; border-radius: 999px; background: var(--card); color: var(--fg); font: 700 30px/1 var(--corpo); box-shadow: inset 0 0 0 2px var(--line); }
.fila-painel button.ligada { background: var(--neon); color: var(--bg); box-shadow: none; }
.fila-painel-acoes { margin-top: 6px; }
.fila-painel-acoes button { margin: 14px 14px 0 0; }
.fila-painel p { margin: 18px 0 0; font: 500 30px/1.35 var(--corpo); color: var(--muted); }
.fila-painel .fila-lista { color: var(--fg); }
.fila-painel .fila-lista:empty { display: none; }
.fila-painel .fila-link { font-size: 26px; color: var(--dim); word-break: break-all; }

/* ---------- visitante do site: formulário único, fora do palco (tamanho normal de página) ---------- */
.visitante { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px 16px; overflow-y: auto;
  background: rgba(11, 11, 11, 0.94); -webkit-overflow-scrolling: touch; }
.visitante-cartao { position: relative; width: 100%; max-width: 440px; margin: auto; padding: 28px 24px 24px; border-radius: 24px; background: var(--card, #1b1b1b);
  box-shadow: inset 0 0 0 1px var(--line, #3a3a3a), 0 30px 90px rgba(0, 0, 0, 0.6); color: var(--fg, #ffffff); font: 400 15px/1.5 var(--corpo, "Inter", system-ui, sans-serif); text-align: left; }
.visitante-logo { display: block; width: 112px; height: auto; }
.visitante-chapeu { margin-top: 20px; font: 700 12px/1 var(--corpo, "Inter", system-ui, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon, #c8f31d); }
.visitante-cartao h2 { margin: 10px 0 0; font: 800 28px/1.08 var(--titulo, "Outfit", system-ui, sans-serif); letter-spacing: -0.02em; }
.visitante-texto { margin: 10px 0 4px; color: var(--muted, #c9c9c9); }
.visitante-campo { display: block; margin-top: 14px; }
.visitante-campo span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim, #8f8f8f); }
.visitante-campo input { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; border: 0; border-radius: 12px; background: var(--bg-2, #111111); color: var(--fg, #ffffff);
  font: 600 16px/1.2 var(--corpo, "Inter", system-ui, sans-serif); box-shadow: inset 0 0 0 1.5px var(--line, #3a3a3a); outline: none; -webkit-appearance: none; box-sizing: border-box; }
.visitante-campo input:focus { box-shadow: inset 0 0 0 2px var(--neon, #c8f31d); }
.visitante-campo input::placeholder { color: var(--dim, #8f8f8f); font-weight: 500; }
.visitante-isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.visitante-erro { min-height: 18px; margin: 12px 0 0; font-size: 13px; font-weight: 600; color: #ff9b8f; }
.visitante-enviar { display: block; width: 100%; margin-top: 6px; padding: 16px; border: 0; border-radius: 999px; background: var(--neon, #c8f31d); color: var(--bg, #0b0b0b);
  font: 800 17px/1 var(--titulo, "Outfit", system-ui, sans-serif); cursor: pointer; box-shadow: 0 14px 44px rgba(200, 243, 29, 0.25); }
.visitante-lgpd { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--dim, #8f8f8f); }
.visitante-lgpd a { color: var(--muted, #c9c9c9); text-decoration: underline; text-underline-offset: 3px; }
.visitante-fechar { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 9px; border: 0; border-radius: 50%; background: var(--card-2, #242424); color: var(--muted, #c9c9c9); cursor: pointer; }
.visitante-fechar svg { display: block; width: 100%; height: 100%; }
.fila-painel-bloco { margin-top: 26px; padding-top: 24px; border-top: 2px solid var(--line); }

/* Seta de volta ao acervo, no semicírculo verde do canto de cima (site e demonstração; no totem do evento não
   aparece). A área de toque é o próprio semicírculo (230 px, como o .j-canto e o #canto dos jogos), e a seta fica no
   centro visual dele. Fica abaixo das camadas de resultado, painel e cadastro, que cobrem o palco inteiro. */
.voltar-acervo { position: absolute; right: 0; top: 0; z-index: 29; width: 230px; height: 230px; border-bottom-left-radius: 100%;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.voltar-acervo svg { position: absolute; right: 64px; top: 64px; width: 68px; height: 68px; fill: none; stroke: var(--bg, #0b0b0b);
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.voltar-acervo:active svg { transform: translateX(-8px); }