/* ==========================================
   PERGUNTAS E RESPOSTAS - VISUAL DO JOGO (28/09/2026)
   ==========================================
   Layouts escolhidos pelo dono em DOCS/IDEIAS/PERGUNTAS-E-RESPOSTAS/:
     4-01 + 4-04  cartoes grossos + segurar para enviar
     5-01         acerto: caixa de resultado com festa
     5-05         erro: "quase", com carinho
     6-02 / 6-03  "seus XP estao esperando" (bau) / folha inferior no celular
     6-04 / 6-07  codigo por e-mail / "e' voce?"
   Tons claros; nenhum texto abaixo de 13px (DOCS/PAGINAS-DINAMICAS.md, item 3).
   ========================================== */

:root {
	--qa-azul: #3b82f6; --qa-azul-esc: #1d4ed8; --qa-verde: #22c55e; --qa-verde-esc: #15803d;
	--qa-ambar: #f59e0b; --qa-ambar-esc: #b45309; --qa-tinta: #0f172a; --qa-texto: #334155;
	--qa-suave: #64748b; --qa-borda: #e2e8f0;
}

/* ---------- Enunciado e itens (motor) ---------- */
.qa-cabecalho { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.qa-cab-item { background: #eff6ff; color: #1e40af; border-radius: 999px; padding: .25rem .8rem; font-size: 14px; }
.qa-enunciado, .qa-item-enunciado { font-size: 1.05rem; line-height: 1.65; color: var(--qa-texto); }
.qa-enunciado p, .qa-item-enunciado p { margin-bottom: .75rem; }
.qa-item { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.qa-item-num { font-size: 14px; font-weight: 800; color: var(--qa-suave); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.qa-midia { text-align: center; margin: .5rem 0 1rem; }
.qa-midia img, .qa-midia video { max-width: 100%; max-height: 360px; border-radius: 16px; border: 1px solid rgba(0,0,0,.06); background: #f8fafc; }
/* 29/09/2026: os videos das perguntas tem 240x176 de origem e apareciam nesse
   tamanho. Largura no dobro (480px), sem passar da coluna no celular; o
   max-height subiu para nao achatar a proporcao (176 x 2 = 352). */
.qa-midia video { width: 480px; height: auto; max-height: 420px; }

.qa-alts { display: grid; gap: .6rem; }
.qa-alts-simnao { grid-template-columns: repeat(2, minmax(0, 160px)); }
.qa-alt {
	display: flex; align-items: center; gap: .8rem; cursor: pointer; margin: 0;
	background: #fff; border: 2px solid var(--qa-borda); border-radius: 16px; padding: .85rem 1rem;
	box-shadow: 0 4px 0 var(--qa-borda); transition: transform .08s, box-shadow .08s, border-color .15s, background .15s;
	font-size: 1rem; color: var(--qa-texto);
}
.qa-alt:hover { border-color: #93c5fd; }
.qa-alt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--qa-borda); }
.qa-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qa-letra { flex: 0 0 32px; height: 32px; border-radius: 10px; background: #f1f5f9; display: grid; place-items: center; font-weight: 800; color: var(--qa-texto); }
.qa-alts-simnao .qa-alt { justify-content: center; font-weight: 800; letter-spacing: .04em; }
.qa-alt:has(.qa-radio:checked), .qa-alt.marcada { border-color: var(--qa-azul); background: #eff6ff; box-shadow: 0 4px 0 var(--qa-azul); }
.qa-alt:has(.qa-radio:checked) .qa-letra, .qa-alt.marcada .qa-letra { background: var(--qa-azul); color: #fff; }
.qa-alt:has(.qa-radio:focus-visible) { outline: 3px solid #93c5fd; outline-offset: 2px; }
.qa-alt.certa  { border-color: var(--qa-verde); background: #dcfce7; box-shadow: 0 4px 0 var(--qa-verde-esc); }
.qa-alt.certa .qa-letra { background: var(--qa-verde); color: #fff; }
.qa-alt.errada { border-color: #fca5a5; background: #fef2f2; box-shadow: 0 4px 0 #fca5a5; }
.qa-travado .qa-alt { cursor: default; }
.qa-campo-texto { border: 2px solid var(--qa-borda); border-radius: 14px; padding: .8rem 1rem; font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.qa-campo-texto:focus { border-color: var(--qa-azul); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

/* ---------- Segurar para enviar (4-04) ---------- */
.qa-envio { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: 1rem; }
.qa-segurar {
	position: relative; width: 150px; height: 150px; border-radius: 50%; border: 0;
	background: #e0e7ff; color: #3730a3; font-weight: 900; font-size: 15px; line-height: 1.25;
	user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none;
	transition: background .2s, transform .1s;
}
.qa-segurar:not([disabled]):hover { background: #c7d2fe; }
.qa-segurar:focus-visible { outline: 3px solid #818cf8; outline-offset: 4px; }
.qa-segurar[disabled] { opacity: .5; cursor: not-allowed; }
.qa-segurar.segurando { transform: scale(.96); }
.qa-segurar svg { position: absolute; inset: 0; transform: rotate(-90deg); pointer-events: none; }
.qa-segurar circle { fill: none; stroke: #6366f1; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; }
.qa-segurar span { position: relative; padding: 0 1rem; display: block; }
.qa-segurar.enviando { background: var(--qa-verde); color: #fff; }
.qa-envio-dica { font-size: 14px; color: var(--qa-suave); text-align: center; margin: 0; }
.qa-aviso-pendente { background: #fffbeb; border: 1px dashed var(--qa-ambar); color: #78350f; border-radius: 14px; padding: .6rem .9rem; font-size: 14px; margin-bottom: 1rem; }

/* ---------- Resultado: acerto com festa (5-01) ---------- */
.qa-res { border-radius: 24px; padding: 1.4rem 1.6rem; margin-bottom: 1.5rem; border: 2px solid; }
.qa-res-topo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.qa-res-ic { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; color: #fff; flex: 0 0 62px; }
.qa-res-tx { flex: 1; min-width: 200px; }
.qa-res-titulo { font-weight: 900; font-size: 1.5rem; margin: 0; color: var(--qa-tinta); }
.qa-res-sub { margin: 0; font-size: 14px; color: #475569; }
.qa-res-xp { text-align: center; min-width: 90px; }
.qa-res-xp b { display: block; font-size: 2.3rem; font-weight: 900; line-height: 1; }
.qa-res-xp small { font-weight: 800; color: var(--qa-suave); font-size: 13px; }
.qa-res-linha { background: #fff; border-radius: 14px; padding: .75rem 1rem; margin-top: .7rem; font-size: 15px; }
.qa-res-ok { background: #d1e7dd; border-color: #a3cfbb; }
.qa-res-ok .qa-res-ic { background: #198754; }
.qa-res-ok .qa-res-xp b { color: #198754; }
.qa-res-nivel { margin-top: .7rem; background: linear-gradient(90deg, #ede9fe, #fef3c7); border-radius: 14px; padding: .7rem 1rem; font-weight: 800; color: #4c1d95; font-size: 15px; }

/* ---------- Resultado: erro com carinho (5-05) ---------- */
.qa-res-quase { background: #fffbeb; border-color: #fde68a; }
.qa-res-quase .qa-res-ic { background: var(--qa-ambar); animation: qa-bate 1s ease-in-out 3; }
.qa-res-quase .qa-res-titulo { color: #92400e; }
.qa-res-quase .qa-res-xp b { color: var(--qa-ambar-esc); }
.qa-res-sua { color: var(--qa-suave); }
.qa-res-sua s { text-decoration-color: #fca5a5; }
.qa-res-certa { border: 2px solid var(--qa-verde); background: #f0fdf4; color: #14532d; font-weight: 700; }
.qa-res-certa.brilha { animation: qa-destaca 1.2s; }
.qa-res-porque { font-size: 15px; color: #78350f; margin-top: .8rem; }
.qa-res-porque i { color: var(--qa-ambar); }
.qa-res-opiniao { background: #eff6ff; border-color: #bfdbfe; }
.qa-res-opiniao .qa-res-ic { background: var(--qa-azul); }
.qa-res-opiniao .qa-res-xp b { color: var(--qa-azul-esc); }

.qa-treme { animation: qa-treme .45s; }
@keyframes qa-treme { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes qa-bate { 15% { transform: scale(1.12); } 30% { transform: none; } }
@keyframes qa-destaca { 0% { transform: scale(.97); box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 50% { transform: scale(1.01); box-shadow: 0 0 0 12px rgba(34,197,94,0); } 100% { transform: none; } }

/* ---------- Estatistica da comunidade ---------- */
.qa-est { margin-top: 1rem; }
.qa-est-titulo { font-size: 14px; font-weight: 800; color: var(--qa-suave); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.qa-est-linha { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; font-size: 14px; }
.qa-est-letra { width: 26px; font-weight: 800; }
.qa-est-barra { flex: 1; height: 12px; background: #f1f5f9; border-radius: 99px; overflow: hidden; }
.qa-est-barra span { display: block; height: 100%; width: 0; background: #cbd5e1; border-radius: 99px; transition: width .9s ease-out; }
.qa-est-linha.certa .qa-est-barra span { background: var(--qa-verde); }
.qa-est-pct { width: 42px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Leituras sugeridas (secao 6.4 do plano) ----------
   Mesmo card do v4_cards_footer; so' a grade muda: 3 por linha aqui, e no
   celular uma faixa que rola para o lado, para nao empurrar as alternativas. */
.qa-leituras { margin: 1.5rem 0; }
.qa-leituras-titulo { font-size: 1.1rem; font-weight: 800; color: var(--qa-tinta); margin-bottom: .9rem; }
.qa-leituras .row > div { flex: 0 0 auto; width: 33.333%; }
@media (max-width: 767.98px) {
	.qa-leituras .row { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start !important; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
	.qa-leituras .row > div { width: 72%; scroll-snap-align: start; }
}

/* ---------- Contexto ---------- */
.qa-contexto { background: #f8fafc; border-left: 4px solid #93c5fd; border-radius: 0 16px 16px 0; padding: 1rem 1.2rem; margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.65; color: var(--qa-texto); }
.qa-contexto p:last-child { margin-bottom: 0; }

/* ---------- Modal de login (6-02, 6-03, 6-04, 6-07) ---------- */
.qa-login .modal-content { border: 0; border-radius: 24px; overflow: hidden; }
.qa-login .modal-body { padding: 1.75rem 1.5rem 1.5rem; text-align: center; }
.qa-login-fechar { position: absolute; right: 12px; top: 8px; z-index: 2; }
.qa-bau { position: relative; width: 104px; margin: 0 auto 1rem; animation: qa-balanca 2s infinite; }
.qa-bau-tampa { height: 28px; background: linear-gradient(#f59e0b, #d97706); border: 4px solid #78350f; border-bottom: 0; border-radius: 18px 18px 0 0; transform-origin: 8% 100%; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.qa-bau-caixa { height: 58px; background: linear-gradient(#d97706, #b45309); border: 4px solid #78350f; border-radius: 4px 4px 12px 12px; display: grid; place-items: center; color: #fde68a; font-size: 1.3rem; }
.qa-bau-xp { position: absolute; top: -14px; right: -46px; background: var(--qa-verde); color: #fff; font-weight: 900; border-radius: 999px; padding: .15rem .6rem; font-size: 14px; transform: rotate(12deg); }
@keyframes qa-balanca { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-7deg); } 86% { transform: rotate(7deg); } 94% { transform: rotate(-3deg); } }
.qa-login h2 { font-weight: 900; font-size: 1.4rem; color: #92400e; margin: 0 0 .3rem; }
.qa-login p { color: #78350f; font-size: 15px; }
.qa-login-google { display: flex; justify-content: center; min-height: 44px; margin: .8rem 0 .5rem; }
.qa-login-btn { display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; border-radius: 14px; padding: .8rem; font-weight: 800; font-size: 15px; margin-top: .5rem; border: 0; }
.qa-login-email { background: var(--qa-ambar); color: #fff; box-shadow: 0 4px 0 var(--qa-ambar-esc); }
.qa-login-roxo { background: #8b5cf6; color: #fff; box-shadow: 0 4px 0 #6d28d9; }
.qa-login-link { display: inline-block; margin-top: .9rem; font-size: 14px; color: var(--qa-suave); }
.qa-login-av { position: relative; width: 84px; height: 84px; margin: 0 auto .8rem; }
.qa-login-av span { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, #c4b5fd, #f9a8d4); color: #fff; font-weight: 900; font-size: 1.8rem; }
.qa-login-av i { position: absolute; right: -2px; bottom: 0; color: var(--qa-verde); background: #fff; border-radius: 50%; font-size: 1.5rem; }
.qa-login-passo { display: none; }
.qa-login-passo.ativo { display: block; }
.qa-codigo { display: flex; justify-content: center; gap: .4rem; margin: 1rem 0; }
.qa-codigo input { width: 44px; height: 54px; text-align: center; font-size: 1.5rem; font-weight: 900; border: 2px solid var(--qa-borda); border-radius: 12px; }
.qa-codigo input:focus { outline: none; border-color: var(--qa-azul); }
.qa-codigo input.ok { border-color: var(--qa-verde); background: #f0fdf4; }
.qa-login-msg { font-size: 14px; min-height: 1.3em; margin: .5rem 0 0; }
.qa-login-msg.erro { color: #b91c1c; }
.qa-login-msg.ok { color: var(--qa-verde-esc); }
.qa-login-lembrar { font-size: 14px; color: var(--qa-suave); justify-content: center; display: flex; gap: .4rem; margin-top: .6rem; }

/* 6-03: no celular o modal sobe da parte de baixo, como uma folha. */
@media (max-width: 575.98px) {
	/* min-height: 0 anula o modal-dialog-centered, que esticava a folha na tela inteira. */
	.modal.fade.qa-login .modal-dialog { position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0; max-width: none; min-height: 0; transform: translateY(100%); transition: transform .4s cubic-bezier(.3,1.3,.5,1); }
	.modal.fade.qa-login.show .modal-dialog { transform: none; }
	.qa-login .modal-content { border-radius: 24px 24px 0 0; }
	.qa-login .modal-body::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 5px; background: #cbd5e1; margin: -0.75rem auto 1rem; }
}

/* ---------- Som ---------- */
.qa-som { position: fixed; right: 16px; bottom: 16px; z-index: 1030; border: 0; border-radius: 999px; background: #fff; color: var(--qa-texto); box-shadow: 0 6px 18px rgba(15,23,42,.15); padding: .5rem .9rem; font-size: 14px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
	.qa-bau, .qa-res-quase .qa-res-ic, .qa-res-certa.brilha, .qa-treme { animation: none !important; }
	.qa-login .modal-dialog { transition: none !important; }
}