:root{--ink:#111;--muted:#555;--bg:#f3f4f6;--card:#fff;--line:#d5dbe3;
--verde:#1e7a46;--vermelho:#b3261e;--amarelo:#b36b00;--azul:#1f4e8c;--cinza:#6b7280}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body{min-height:100vh;display:flex;flex-direction:column;font-size:20px;line-height:1.3}
#barra{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 14px;background:#fff;
  border-bottom:1px solid var(--line);font-size:15px;position:sticky;top:0;z-index:5}
.rede{font-weight:700}.rede.on{color:var(--verde)}.rede.off{color:var(--amarelo)}
#fila{color:var(--amarelo);font-weight:700}
#quem{font-weight:700;color:var(--azul)}
main{flex:1;display:flex;flex-direction:column;gap:14px;padding:16px;max-width:560px;width:100%;margin:0 auto}
h1{font-size:28px;margin:6px 0;text-align:center}
.pergunta{font-size:30px;font-weight:800;text-align:center;margin:10px 0 4px}
.sub{font-size:19px;color:var(--muted);text-align:center}
.grande{font-size:26px;font-weight:800;text-align:center}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:22px 12px;font-size:26px;font-weight:800;color:#fff;
  text-align:center;text-decoration:none;cursor:pointer;min-height:84px}
.btn:active{transform:scale(.98);filter:brightness(.92)}
.verde{background:var(--verde)}.vermelho{background:var(--vermelho)}.amarelo{background:var(--amarelo)}
.azul{background:var(--azul)}.cinza{background:var(--cinza)}
.btn.pequeno{font-size:19px;padding:14px;min-height:0;font-weight:700}
.btn.contorno{background:#fff;color:var(--azul);border:2px solid var(--azul)}
.gigante{padding:44px 12px;font-size:32px}
.duplo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cartao{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:16px;cursor:pointer}
.cartao.destaque{border-color:var(--verde);border-width:3px}
.cartao .nome{font-size:23px;font-weight:800}
.cartao .mor{font-size:17px;color:var(--muted);margin-top:4px}
.cartao .info{font-size:17px;margin-top:6px}
.visor{background:#fff;border:3px solid var(--ink);border-radius:14px;text-align:center;font-size:48px;font-weight:800;
  padding:12px;min-height:84px;font-variant-numeric:tabular-nums}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.teclado button{font-size:34px;font-weight:800;padding:18px 0;border:0;border-radius:12px;background:#e5e7eb;color:var(--ink)}
.teclado button:active{background:#cbd5e1}
.aviso{border-radius:14px;padding:22px 16px;text-align:center;color:#fff;font-size:28px;font-weight:800}
.aviso small{display:block;font-size:19px;font-weight:600;margin-top:8px}
.nota{font-size:16px;color:var(--muted);text-align:center}
.linkzinho{background:none;border:0;color:var(--azul);font-size:18px;text-decoration:underline;padding:12px;cursor:pointer}
#rodar{display:none}
@media (orientation:landscape) and (max-height:600px){
  #rodar{display:flex;position:fixed;inset:0;z-index:99;background:var(--azul);color:#fff;align-items:center;
    justify-content:center;text-align:center;font-size:30px;font-weight:800;line-height:1.4}
}
.carregar{text-align:center;font-size:24px;padding:40px 0}
input.texto{font-size:28px;padding:12px;border:3px solid var(--ink);border-radius:12px;width:100%;text-align:center;text-transform:uppercase}