/* ================= Impostor (jogo de grupo) — estilos próprios =================
   Pensado para pessoas mais velhas: letra grande, botões grandes com texto, alto contraste.
   Usa as variáveis de css/style.css (claro/escuro). Cabe em ecrãs de 320 a 390 px. */
.amg-pagina { overflow-x: hidden; }
.amg { font-size: 1.15rem; line-height: 1.45; max-width: 560px; padding: 14px 14px 24px; }
.amg *, .amg *::before, .amg *::after { min-width: 0; }
.amg h2 { font-size: 1.45rem; line-height: 1.2; margin: 0 0 12px; }
.amg-texto { margin: 0 0 12px; color: var(--tinta); }
.amg-nota { margin: 10px 0 0; font-size: 1.02rem; color: var(--tinta2); }
.amg-centro { text-align: center; }
.amg-intro { text-align: center; padding: 6px 4px 4px; }
.amg-intro h2 { font-size: 1.7rem; }
.amg-emoji { font-size: 3rem; margin: 0; line-height: 1.1; }
.amg-ou { text-align: center; font-weight: 700; color: var(--tinta2); margin: 6px 0; }

.amg-cartao { background: var(--bg2); border: 2px solid var(--linha); border-radius: 18px; padding: 18px 16px; margin: 0 0 14px; box-shadow: var(--sombra); overflow-wrap: anywhere; }
.amg-rotulo { display: block; font-weight: 800; font-size: 1.1rem; margin: 0 0 8px; }
.amg-sub { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta2); margin: 18px 0 8px; }

/* Campos */
.amg-input { display: block; width: 100%; font: inherit; font-size: 1.35rem; padding: 14px 16px; min-height: 60px; border: 3px solid var(--tinta2); border-radius: 14px; background: var(--bg2); color: var(--tinta); margin: 0 0 14px; }
.amg-input:focus { border-color: #2d6cdf; outline: 3px solid color-mix(in srgb, #2d6cdf 35%, transparent); outline-offset: 1px; }
.amg-input[aria-invalid="true"] { border-color: #b3261e; }
.amg-input-cod { font-size: 2.2rem; font-weight: 800; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .35em; }
.amg-select { font-size: 1.15rem; appearance: auto; }
.amg-erro { background: #fde7e5; color: #8c1d18; border: 2px solid #b3261e; border-radius: 12px; padding: 10px 14px; margin: 0; font-weight: 700; }
.amg-erro[hidden] { display: none; }

/* Botões */
.amg-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 60px; padding: 14px 18px; border-radius: 16px; border: 3px solid var(--tinta); font: inherit; font-size: 1.22rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; margin: 0 0 10px; touch-action: manipulation; }
.amg-btn:last-child { margin-bottom: 0; }
.amg-primario { background: var(--tinta); color: var(--bg); }
.amg-secundario { background: var(--bg2); color: var(--tinta); }
.amg-grande { min-height: 72px; font-size: 1.35rem; }
.amg-btn:disabled { opacity: .55; cursor: default; }
.amg-btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.95); }
.amg-link { background: transparent; border: 0; text-decoration: underline; min-height: 48px; font-weight: 700; color: var(--tinta); width: auto; margin: 8px auto 0; }
.amg-mini { width: auto; min-height: 44px; padding: 6px 12px; font-size: 1rem; border-width: 2px; margin: 0; border-radius: 12px; background: var(--bg2); color: var(--tinta); }
.amg-linha-btns { display: grid; gap: 10px; margin-top: 12px; }

/* Código e QR */
.amg-codigo { display: flex; justify-content: center; gap: 8px; margin: 4px 0 12px; }
.amg-codigo span { display: grid; place-items: center; width: 62px; height: 76px; border-radius: 14px; background: var(--tinta); color: var(--bg); font-size: 2.8rem; font-weight: 900; font-variant-numeric: tabular-nums; }
@media (max-width: 340px) { .amg-codigo span { width: 54px; height: 68px; font-size: 2.4rem; } }
.amg-qr { display: block; width: min(220px, 70%); height: auto; margin: 8px auto 4px; border-radius: 8px; border: 2px solid var(--linha); background: #fff; }

/* Jogadores */
.amg-jogadores { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.amg-jogadores li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--tinta) 6%, var(--bg2)); font-weight: 700; font-size: 1.2rem; }
.amg-jogadores li.desligado { opacity: .7; }
.amg-j-nome small { font-weight: 600; color: var(--tinta2); font-size: .95rem; }
.amg-j-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.amg-etq { font-size: .92rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #ffe9a8; color: #4a3800; }
.amg-etq-off { background: #e7e9ee; color: #333b47; }
.amg-pontos { font-size: 1.15rem; }
.amg-pontos small { color: #1f7a45; font-weight: 800; }
.amg-espera { font-size: 1.25rem; font-weight: 700; text-align: center; margin: 4px 0; }
.amg-config { margin-top: 12px; }
.amg-config .amg-input { margin-bottom: 0; }
.amg-cartao .amg-config:first-child { margin-top: 0; margin-bottom: 14px; }

/* Ronda */
.amg-ronda { text-align: center; font-weight: 800; color: var(--tinta2); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; }
.amg-capa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 200px; padding: 22px 16px; margin: 0 0 14px; border-radius: 20px; border: 4px dashed var(--tinta); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tinta) 8%, var(--bg2)) 0 14px, var(--bg2) 14px 28px); color: var(--tinta); cursor: pointer; font: inherit; touch-action: manipulation; }
.amg-capa-ico { font-size: 2.6rem; line-height: 1; }
.amg-capa-txt { font-size: 1.55rem; font-weight: 900; line-height: 1.2; }
.amg-capa-sub { font-size: 1.05rem; color: var(--tinta2); font-weight: 600; }
.amg-segredo { text-align: center; margin: 0 0 14px; padding: 18px 16px; border-radius: 20px; border: 4px solid #1f7a45; background: color-mix(in srgb, #1f7a45 10%, var(--bg2)); overflow-wrap: anywhere; }
.amg-segredo.impostor { border-color: #b3261e; background: color-mix(in srgb, #b3261e 10%, var(--bg2)); }
.amg-segredo-cat { font-size: 1.2rem; margin: 0 0 6px; }
.amg-segredo-palavra { font-size: clamp(2rem, 10vw, 2.8rem); font-weight: 900; line-height: 1.1; margin: 6px 0 10px; text-transform: uppercase; letter-spacing: .02em; text-align: center; overflow-wrap: anywhere; hyphens: auto; }
.amg-segredo-imp { font-size: clamp(1.9rem, 9vw, 2.5rem); font-weight: 900; color: #b3261e; margin: 4px 0 8px; line-height: 1.1; }
@media (prefers-color-scheme: dark) { .amg-segredo-imp { color: #ff8a80; } .amg-etq-off { background: #3a4350; color: #eef1f5; } .amg-erro { background: #3d1513; color: #ffd9d5; } }
.amg-segredo .amg-btn { margin-top: 14px; }

.amg-vez { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px; border-radius: 16px; background: color-mix(in srgb, #2d6cdf 12%, var(--bg2)); border: 3px solid #2d6cdf; margin: 0 0 14px; }
.amg-vez.minha { background: #ffe066; border-color: #8a6d00; color: #1d2733; }
.amg-vez.fim { background: color-mix(in srgb, var(--tinta) 6%, var(--bg2)); border-color: var(--tinta2); }
.amg-vez-rot { font-size: 1.1rem; font-weight: 800; }
.amg-vez.minha .amg-vez-rot { font-size: 1.6rem; }
.amg-vez-nome { font-size: 2.1rem; font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; }
.amg-vez-txt { font-size: 1.12rem; }
.amg-relogio { margin-top: 6px; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.amg-relogio.esgotado { color: #b3261e; }
.amg-ordem { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.amg-ordem li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 1.15rem; font-weight: 700; background: color-mix(in srgb, var(--tinta) 5%, var(--bg2)); }
.amg-ordem li.atual { background: #2d6cdf; color: #fff; }
.amg-ordem li.feito { color: var(--tinta2); }
.amg-ordem-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); color: var(--tinta); border: 2px solid currentColor; font-size: 1rem; }
.amg-ordem li.atual .amg-ordem-n { color: #2d6cdf; border-color: #fff; background: #fff; }

/* Votação */
.amg-votos { display: grid; gap: 10px; }
.amg-voto { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 68px; padding: 12px; border-radius: 16px; border: 3px solid var(--tinta); background: var(--bg2); color: var(--tinta); font: inherit; font-size: 1.4rem; font-weight: 800; cursor: pointer; touch-action: manipulation; overflow-wrap: anywhere; }
.amg-voto.escolhido { background: #b3261e; border-color: #b3261e; color: #fff; }
.amg-voto small { font-size: 1rem; font-weight: 700; }
.amg-progresso-votos { font-size: 1.3rem; font-weight: 800; text-align: center; margin: 0 0 10px; }
.amg-quem-votou { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.amg-quem-votou li { padding: 6px 12px; border-radius: 999px; border: 2px solid var(--linha); font-weight: 700; font-size: 1.02rem; }
.amg-quem-votou li.sim { border-color: #1f7a45; color: #1f7a45; }
@media (prefers-color-scheme: dark) { .amg-quem-votou li.sim { color: #7ad3a0; border-color: #7ad3a0; } .amg-pontos small { color: #7ad3a0; } }

/* Revelação e resultado */
.amg-revelacao { text-align: center; padding: 20px 16px; border-radius: 20px; margin: 0 0 14px; border: 4px solid var(--tinta2); background: var(--bg2); overflow-wrap: anywhere; }
.amg-revelacao.apanhado { border-color: #1f7a45; background: color-mix(in srgb, #1f7a45 12%, var(--bg2)); }
.amg-revelacao.falhou { border-color: #b3261e; background: color-mix(in srgb, #b3261e 10%, var(--bg2)); }
.amg-revelacao h2 { font-size: 1.7rem; margin: 6px 0 8px; }
.amg-revelacao .amg-rotulo { margin: 0; color: var(--tinta2); }
.amg-mais-votado { font-size: 2.1rem; font-weight: 900; margin: 0; line-height: 1.15; }
.amg-palpite { text-align: center; font-size: 1.15rem; margin: 10px 0 0; padding: 10px; border-radius: 12px; }
.amg-palpite.certo { background: color-mix(in srgb, #1f7a45 14%, var(--bg2)); }
.amg-palpite.errado { background: color-mix(in srgb, var(--tinta) 6%, var(--bg2)); }
.amg-lista-votos { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 1.1rem; }

.amg-rodape-sala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--tinta2); font-size: 1.05rem; }
.amg-rodape-sala .amg-link { margin: 0; }
.amg-ligacao { position: sticky; top: var(--altura-topo, 57px); z-index: 9; background: #ffe066; color: #1d2733; text-align: center; font-weight: 800; padding: 10px 14px; font-size: 1.05rem; }
.amg-ligacao[hidden] { display: none; }
.amg-ajuda { font-size: 1.08rem; }
.amg-ajuda li { margin: 6px 0; }
.amg-cartao > .amg-sub:first-child { margin-top: 0; }

/* ---------- Escolha do modo ---------- */
.amg-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; padding: 6px; border-radius: 18px; background: color-mix(in srgb, var(--tinta) 8%, var(--bg2)); border: 2px solid var(--linha); }
.amg-modo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 6px; border-radius: 13px; border: 3px solid transparent; background: transparent; color: var(--tinta); font: inherit; cursor: pointer; text-align: center; line-height: 1.2; touch-action: manipulation; }
.amg-modo b { font-size: 1.05rem; font-weight: 800; }
.amg-modo small { font-size: .9rem; color: var(--tinta2); font-weight: 600; }
.amg-modo.ativo { background: var(--tinta); color: var(--bg); border-color: var(--tinta); }
.amg-modo.ativo small { color: color-mix(in srgb, var(--bg) 80%, transparent); }
@media (max-width: 359px) { .amg-modo b { font-size: .98rem; } .amg-modo small { font-size: .84rem; } }
.amg-pergunta-modo { margin: 18px 0 12px; }
.amg-modo-grande { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; margin: 0 0 14px; padding: 18px; border-radius: 18px; border: 3px solid var(--tinta); background: var(--bg2); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sombra); overflow-wrap: anywhere; touch-action: manipulation; }
.amg-modo-grande b { font-size: 1.35rem; line-height: 1.2; }
.amg-modo-grande span { font-size: 1.08rem; color: var(--tinta2); }
.amg-modo-grande .amg-modo-ico { font-size: 2rem; line-height: 1; color: inherit; }
.amg-modo-grande:active { transform: translateY(1px); }

/* ---------- Modo «Um só telemóvel» ---------- */
.il-lista .amg-j-nome { flex: 1 1 auto; }
.il-rotulo-nome { margin-top: 16px; }
.il-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.il-opcoes .amg-btn { margin: 0; }
.il-opcao { min-height: 60px; padding: 10px; border-radius: 14px; border: 3px solid var(--tinta); background: var(--bg2); color: var(--tinta); font: inherit; font-size: 1.15rem; font-weight: 800; cursor: pointer; }
.il-opcao.escolhida { background: var(--tinta); color: var(--bg); }
.il-opcao:disabled { opacity: .45; cursor: default; }
.il-passar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 26px 16px; margin: 0 0 16px; border-radius: 20px; background: var(--bg2); border: 3px solid #2d6cdf; box-shadow: var(--sombra); overflow-wrap: anywhere; }
.il-passar-ico { font-size: 3rem; line-height: 1.1; }
.il-passar-rot { font-size: 1.3rem; font-weight: 700; margin: 0; }
.il-passar-nome { font-size: clamp(2.2rem, 11vw, 3rem); font-weight: 900; line-height: 1.1; margin: 4px 0 8px; }
.amg-espera-toque:disabled { opacity: .7; }
/* Toques rápidos não selecionam texto nos botões e ecrãs de passagem */
.amg-btn, .amg-voto, .amg-capa, .amg-modo, .amg-modo-grande, .il-opcao, .il-passar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- Várias rondas: escolha de papéis, vivos/fora, espectador, vencedor ---------- */
.il-opcoes-4 { grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); }
.il-opcoes-4 .il-opcao { font-size: 1.4rem; }
.amg-config + .amg-config { margin-top: 14px; }
.amg-regra-min b { color: #8c1d18; }
@media (prefers-color-scheme: dark) { .amg-regra-min b { color: #ffb4ab; } }
.amg-vivos, .amg-fora { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.amg-vivos li { padding: 6px 12px; border-radius: 999px; border: 2px solid #1f7a45; font-weight: 800; font-size: 1.05rem; }
.amg-fora { display: grid; gap: 6px; }
.amg-fora li { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--tinta) 6%, var(--bg2)); font-size: 1.05rem; }
.amg-fora s { font-weight: 800; }
@media (prefers-color-scheme: dark) { .amg-vivos li { border-color: #7ad3a0; } }
.amg-espectador { text-align: center; margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; border: 3px dashed var(--tinta2); background: color-mix(in srgb, var(--tinta) 6%, var(--bg2)); }
.amg-espectador p { margin: 0; }
.amg-espectador-tit { font-size: 1.35rem; font-weight: 900; margin-bottom: 4px !important; }
.amg-revelacao.neutro { border-color: #2d6cdf; background: color-mix(in srgb, #2d6cdf 10%, var(--bg2)); }
.amg-vencedor { text-align: center; padding: 22px 16px; border-radius: 20px; margin: 0 0 14px; border: 4px solid #1f7a45; background: color-mix(in srgb, #1f7a45 14%, var(--bg2)); overflow-wrap: anywhere; }
.amg-vencedor.oposicao { border-color: #b3261e; background: color-mix(in srgb, #b3261e 12%, var(--bg2)); }
.amg-vencedor h2 { font-size: 1.85rem; margin: 4px 0 8px; }
.amg-vencedor-ico { font-size: 3rem; line-height: 1.1; margin: 0; }
.amg-vencedor .amg-texto { margin: 0; }