/* Visual da ferramenta Quiz Bíblico (classes começam com qz-) */

/* ---------- Desafio do dia ---------- */
.qz-diario {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap;
  margin: .4rem 0 1rem; padding: 1.35rem 1.4rem; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #2c7a6b 0%, transparent 55%), linear-gradient(140deg, #1f5b51, #12302b);
  box-shadow: 0 10px 30px rgba(18, 48, 43, .25); position: relative; overflow: hidden;
}
.qz-diario::after { content: "?"; position: absolute; right: -10px; bottom: -58px; font: 700 13rem/1 var(--fonte-titulo); color: rgba(255,255,255,.06); pointer-events: none; }
.qz-diario-txt { flex: 1 1 280px; position: relative; z-index: 1; }
.qz-diario-rot { display: flex; align-items: center; gap: .4rem; margin: 0 0 .2rem; font-size: .76rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: #f0d79b; }
.qz-diario-rot .ico { width: 17px; height: 17px; }
.qz-diario h2 { margin: 0 0 .3rem; color: #fff; font-size: clamp(1.3rem, 3.6vw, 1.6rem); }
.qz-diario p { margin: 0; color: #cfe0da; font-size: .95rem; }
.qz-grade { letter-spacing: .1em; margin-right: .3rem; }
.qz-diario-acoes { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; position: relative; z-index: 1; }
.qz-btn-claro { background: #f0d79b; color: #12302b; }
.qz-btn-claro .ico { width: 18px; height: 18px; }
.qz-chama { display: inline-flex; align-items: center; gap: .25rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(255,255,255,.12); color: #ffd28a; font-size: .9rem; }
.qz-chama .ico { width: 18px; height: 18px; }
.qz-chama strong { color: #fff; font-size: 1.05rem; }
.qz-chama[hidden], .qz-diario-acoes [hidden] { display: none; }

/* ---------- Estatísticas ---------- */
.qz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 0 0 .8rem; }
.qz-stats[hidden] { display: none; }
.qz-stats div { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-p); padding: .6rem .5rem; text-align: center; display: flex; flex-direction: column; }
.qz-stats strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--primaria); line-height: 1.2; }
.qz-stats span { font-size: .72rem; color: var(--texto-2); line-height: 1.25; }
@media (max-width: 520px) { .qz-stats { grid-template-columns: repeat(2, 1fr); } }
.qz-revisar { margin: 0 0 1rem; }
.qz-revisar[hidden] { display: none; }

/* ---------- Painel "Começar quiz" ---------- */
.qz-jogar h2 { margin-top: 1.6rem; }
.qz-config { display: grid; gap: .9rem; max-width: 640px; }
.qz-grupo { border: 0; padding: 0; margin: 0; min-width: 0; }
.qz-grupo legend { font-size: .85rem; font-weight: 650; color: var(--texto-2); margin-bottom: .35rem; padding: 0; }
.qz-seg { display: flex; gap: .4rem; flex-wrap: wrap; }
.qz-seg label { position: relative; cursor: pointer; }
.qz-seg input { position: absolute; opacity: 0; pointer-events: none; }
.qz-seg span { display: inline-flex; align-items: center; min-height: 42px; padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid var(--borda); background: var(--superficie); font-weight: 600; font-size: .92rem; transition: background .15s, border-color .15s; }
.qz-seg input:checked + span { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.qz-seg input:focus-visible + span { outline: 3px solid var(--dourado); outline-offset: 2px; }
.qz-comecar { min-height: 54px; font-size: 1.05rem; }
.qz-config-info { margin: -.3rem 0 0; font-size: .85rem; color: var(--texto-2); text-align: center; }

/* ---------- Temas ---------- */
.qz-temas { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.qz-tema { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: .95rem 1rem .85rem; text-decoration: none; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); transition: border-color .2s, transform .12s; }
.qz-tema:hover { border-color: var(--dourado); }
.qz-tema:active { transform: scale(.98); }
.qz-tema strong { font-family: var(--fonte-titulo); font-size: 1.12rem; line-height: 1.25; }
.qz-tema-res { font-size: .86rem; color: var(--texto-2); line-height: 1.4; flex: 1; }
.qz-tema-rodape { display: flex; align-items: center; gap: .6rem; font-size: .76rem; color: var(--texto-2); margin-top: .35rem; }
.qz-tema-prog { flex: 1; height: 6px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; display: block; }
.qz-tema-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primaria), var(--dourado)); border-radius: inherit; transition: width .6s; }
.qz-tema.sem-prog .qz-tema-prog { visibility: hidden; }
.qz-tema.completo strong::after { content: " ✓"; color: var(--sucesso); }
.qz-colecao { background: var(--dourado-suave); border-color: transparent; box-shadow: none; }

/* ---------- Gincana e impressão ---------- */
.qz-gin-form, .qz-imp-form { display: grid; gap: .9rem; }
.qz-gin-equipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.qz-gin-equipes label[hidden] { display: none; }
.qz-cor { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: .35rem; vertical-align: 1px; }
.qz-gin-linha, .qz-imp-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.qz-gin-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.qz-imp-form { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.qz-imp-acoes { grid-column: 1 / -1; }

/* ---------- Convite de desafio ---------- */
.qz-convite { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: 1rem 1.1rem; margin: 0 0 1rem; border-radius: var(--raio); background: var(--dourado-suave); border: 1.5px solid var(--dourado); animation: subir .35s ease-out; }
.qz-convite-ico { font-size: 2rem; margin: 0; line-height: 1; }
.qz-convite div { flex: 1 1 220px; display: flex; flex-direction: column; }
.qz-convite span { font-size: .9rem; color: var(--texto-2); }

/* ---------- Página do tema ---------- */
.qz-cat-topo { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--dourado); font-weight: 750; }
.qz-prog-tema { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; max-width: 640px; margin: 0 0 .7rem; font-size: .85rem; color: var(--texto-2); }
.qz-prog-tema[hidden] { display: none; }
.qz-prog-tema strong { color: var(--texto); }
.qz-prog-tema .qz-tema-prog { grid-column: 1 / -1; }
.qz-resp-cabeca { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
.qz-resp-acoes { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.qz-lista { padding-left: 1.4rem; margin: 0; }
.qz-lista > li { margin-bottom: 1.1rem; padding-left: .2rem; }
.qz-lista > li::marker { font-weight: 800; color: var(--primaria); }
.qz-lista-p { margin: 0 0 .3rem; }
.qz-lista-p .qz-j-nivel { vertical-align: 2px; }
.qz-lista-ops { margin: 0 0 .35rem; padding-left: 1.3rem; color: var(--texto-2); }
.qz-lista-ops li { margin: 0; }
.qz-lista details { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-p); }
.qz-lista summary { cursor: pointer; padding: .45rem .8rem; font-size: .88rem; font-weight: 650; color: var(--primaria); list-style: none; }
.qz-lista summary::-webkit-details-marker { display: none; }
.qz-lista summary::before { content: "▸ "; }
.qz-lista details[open] summary::before { content: "▾ "; }
.qz-lista details p { margin: 0; padding: 0 .8rem .7rem; font-size: .95rem; }
.qz-lista li:has(details[open]) .qz-lista-ops [data-certa] { color: var(--sucesso); font-weight: 700; }
.qz-lista-ref { display: inline-flex; align-items: center; gap: .25rem; font-weight: 650; }
.qz-lista-ref .ico { width: 16px; height: 16px; color: var(--dourado); }
.qz-outros { flex-wrap: wrap; overflow: visible; }
.qz-outros .chip { text-decoration: none; }
.qz-mais { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* =================== TELA DO JOGO =================== */
:root.qz-aberto, :root.qz-aberto body { overflow: hidden; }
:root.qz-aberto .aviso-toast { z-index: 90; }
.qz-jogo {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: var(--fundo); color: var(--texto);
  padding-top: env(safe-area-inset-top);
}
.qz-jogo:not([hidden]) .qz-j-corpo { animation: qz-entrar .28s ease-out; }
.qz-jogo[hidden] { display: none; }
@keyframes qz-entrar { from { opacity: 0; transform: translateY(14px); } }
.qz-j-topo { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; max-width: 760px; width: 100%; margin: 0 auto; }
.qz-j-prog { flex: 1; display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--texto-2); }
.qz-j-barra { display: block; height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.qz-j-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--primaria), var(--dourado)); transition: width .4s ease; }
.qz-j-pts { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dourado); font-size: .95rem; min-width: 4.2rem; text-align: right; }
.qz-j-pts[hidden] { display: none; }
.qz-som-off { display: none; }
.qz-jogo.sem-som .qz-som-on { display: none; }
.qz-jogo.sem-som .qz-som-off { display: block; }

.qz-j-corpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: .4rem 16px calc(9rem + env(safe-area-inset-bottom)); }
.qz-j-tela { max-width: 680px; margin: 0 auto; }
.qz-j-tela[hidden] { display: none; }

.qz-j-equipe { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem; margin: .3rem 0 .9rem; padding: .7rem 1rem; border-radius: 14px; color: #fff; background: var(--c); font-size: 1rem; }
.qz-j-equipe[hidden] { display: none; }
.qz-j-equipe strong { font-size: 1.15rem; }
.qz-j-placar { margin-left: auto; display: flex; gap: .3rem; }
.qz-j-placar span { min-width: 2rem; text-align: center; padding: .1rem .45rem; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--c); font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 2px var(--c); }

.qz-j-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .9rem; min-height: 44px; }
.qz-j-tag { font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--dourado); }
.qz-j-nivel { display: inline-block; font-size: .72rem; font-weight: 750; padding: .12rem .55rem; border-radius: 99px; background: var(--superficie-2); color: var(--texto-2); }
.qz-j-nivel.n1 { background: color-mix(in srgb, var(--sucesso) 15%, transparent); color: var(--sucesso); }
.qz-j-nivel.n2 { background: color-mix(in srgb, var(--dourado) 18%, transparent); color: var(--dourado); }
.qz-j-nivel.n3 { background: color-mix(in srgb, var(--perigo) 14%, transparent); color: var(--perigo); }
.qz-j-seq { font-size: .8rem; font-weight: 750; color: #c2541b; animation: qz-pulo .4s ease-out; }
.qz-j-seq[hidden], .qz-j-tempo[hidden] { display: none; }
@keyframes qz-pulo { 40% { transform: scale(1.18); } }
.qz-j-tempo { position: relative; width: 44px; height: 44px; margin-left: auto; display: grid; place-items: center; }
.qz-j-tempo svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.qz-j-tempo circle { fill: none; stroke: var(--superficie-2); stroke-width: 3.5; }
.qz-j-tempo .qz-j-tempo-arco { stroke: var(--primaria); stroke-linecap: round; transition: stroke-dashoffset .2s linear, stroke .3s; }
.qz-j-tempo b { position: relative; font-size: 1rem; font-variant-numeric: tabular-nums; }
.qz-j-tempo.acabando .qz-j-tempo-arco { stroke: var(--perigo); }
.qz-j-tempo.acabando b { color: var(--perigo); animation: qz-pulo .5s ease-out infinite; }

.qz-j-pergunta { font-size: clamp(1.3rem, 4.6vw, 1.75rem); line-height: 1.3; margin: 0 0 1.2rem; outline: none; }
.qz-j-opcoes { display: grid; gap: .6rem; }
.qz-op {
  display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 60px; padding: .7rem .9rem; text-align: left;
  background: var(--superficie); border: 2px solid var(--borda); border-radius: 16px; cursor: pointer; font-size: 1.04rem; line-height: 1.35;
  box-shadow: 0 2px 0 var(--borda); transition: border-color .15s, background .15s, transform .1s, opacity .25s;
}
.qz-op:hover:not(:disabled) { border-color: var(--primaria); }
.qz-op:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.qz-op:disabled { cursor: default; }
.qz-op-letra { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--superficie-2); font-weight: 800; font-size: .9rem; color: var(--texto-2); }
.qz-op.certa { border-color: var(--sucesso); background: color-mix(in srgb, var(--sucesso) 12%, var(--superficie)); box-shadow: 0 2px 0 var(--sucesso); animation: qz-certa .35s ease-out; }
@keyframes qz-certa { 50% { transform: scale(1.02); } }
.qz-op.certa .qz-op-letra { background: var(--sucesso); color: #fff; }
.qz-op.errada { border-color: var(--perigo); background: color-mix(in srgb, var(--perigo) 10%, var(--superficie)); box-shadow: 0 2px 0 var(--perigo); animation: qz-tremer .4s; }
.qz-op.errada .qz-op-letra { background: var(--perigo); color: #fff; }
.qz-op:disabled:not(.certa):not(.errada) { opacity: .55; }
.qz-op.oculta { opacity: 0 !important; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
@keyframes qz-tremer { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.qz-j-ajudas { display: flex; justify-content: center; gap: .6rem; margin-top: 1.2rem; }
.qz-j-ajudas[hidden] { display: none; }
.qz-j-ajuda { display: inline-flex; align-items: center; gap: .35rem; border: 1.5px dashed var(--borda); background: transparent; border-radius: 999px; padding: .5rem 1rem; font-weight: 650; font-size: .88rem; color: var(--texto-2); cursor: pointer; min-height: 42px; }
.qz-j-ajuda .ico { width: 16px; height: 16px; }
.qz-j-ajuda b { font-size: 1.05rem; color: var(--dourado); }
.qz-j-ajuda:hover:not(:disabled) { border-color: var(--primaria); color: var(--texto); }
.qz-j-ajuda:disabled { opacity: .35; cursor: default; text-decoration: line-through; }

/* Retorno depois da resposta (folha que sobe de baixo) */
.qz-j-retorno { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 0 env(safe-area-inset-bottom); background: var(--superficie); border-top: 4px solid var(--perigo); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.18); animation: subir .28s ease-out; max-height: 62vh; overflow-y: auto; }
.qz-j-retorno.ok { border-top-color: var(--sucesso); }
.qz-j-retorno[hidden] { display: none; }
.qz-j-retorno-in { max-width: 680px; margin: 0 auto; padding: 1rem 16px 1rem; }
.qz-j-ret-tit { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 800; color: var(--perigo); }
.qz-j-retorno.ok .qz-j-ret-tit { color: var(--sucesso); }
.qz-j-ret-tit small { display: block; font-size: .95rem; font-weight: 650; color: var(--texto); }
.qz-j-retorno.ok .qz-j-ret-tit small { display: inline; color: var(--dourado); margin-left: .3rem; }
.qz-j-ret-exp p { margin: 0 0 .5rem; font-size: .97rem; color: var(--texto-2); }
.qz-j-ret-exp a { font-weight: 650; }
.qz-j-ref { font-size: .9rem !important; }
.qz-j-retorno .btn { min-height: 52px; margin-top: .3rem; }

/* Resultado */
.qz-j-resultado { text-align: center; }
.qz-r-topo { padding: .6rem 0 .4rem; }
.qz-r-anel { position: relative; width: 150px; height: 150px; margin: .4rem auto .6rem; display: grid; place-items: center; }
.qz-r-anel svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.qz-r-anel circle { fill: none; stroke: var(--superficie-2); stroke-width: 10; }
.qz-r-anel .qz-r-arco { stroke: var(--primaria); stroke-linecap: round; animation: qz-arco 1s ease-out both; }
@keyframes qz-arco { from { stroke-dashoffset: 327; } }
.qz-r-anel span { position: relative; display: flex; flex-direction: column; font-size: .9rem; color: var(--texto-2); line-height: 1.1; }
.qz-r-anel strong { font-size: 2.8rem; color: var(--texto); font-family: var(--fonte-titulo); }
.qz-r-estrelas { margin: 0; font-size: 1.9rem; letter-spacing: .15em; color: var(--dourado); }
.qz-r-estrelas span { color: var(--borda); }
.qz-r-msg { margin: .2rem 0 .3rem; outline: none; }
.qz-r-info { margin: 0 0 .4rem; color: var(--texto-2); font-size: .95rem; }
.qz-r-grade { margin: 0 0 .6rem; letter-spacing: .12em; font-size: 1.1rem; }
.qz-r-vs { display: inline-block; margin: .2rem 0 .6rem; padding: .5rem 1rem; border-radius: 999px; font-weight: 750; background: var(--superficie-2); }
.qz-r-vs.venceu { background: color-mix(in srgb, var(--sucesso) 15%, transparent); color: var(--sucesso); }
.qz-r-diario { margin: .2rem 0 .6rem; font-size: .95rem; }
.qz-r-trofeu { font-size: 4rem; margin: .4rem 0 0; line-height: 1; animation: qz-pulo .6s ease-out; }
.qz-r-acoes { display: grid; gap: .6rem; max-width: 420px; margin: .8rem auto 1.2rem; }
.qz-r-acoes .btn .ico { width: 19px; height: 19px; }
.qz-r-desafio { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; text-align: left; padding: .8rem; border-radius: var(--raio); background: var(--superficie-2); }
.qz-r-desafio .campo input { padding: .55rem .75rem; }
@media (max-width: 400px) { .qz-r-desafio { grid-template-columns: 1fr; } }
.qz-r-linha { display: flex; gap: .5rem; }
.qz-r-linha .btn { flex: 1; }
.qz-r-revisao { text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 1rem; }
.qz-r-revisao summary { padding: .9rem 1rem; font-weight: 700; cursor: pointer; }
.qz-r-revisao ol { margin: 0; padding: 0 1rem 1rem 2.2rem; }
.qz-r-revisao li { margin-bottom: .8rem; }
.qz-r-revisao li::marker { font-weight: 800; }
.qz-r-revisao li.ok::marker { color: var(--sucesso); }
.qz-r-revisao li.x::marker { color: var(--perigo); }
.qz-r-revisao li > * { display: block; }
.qz-r-revisao span { font-size: .92rem; margin: .15rem 0; }
.qz-r-revisao li.x span { color: var(--perigo); }
.qz-r-revisao li.x span b { color: var(--sucesso); }
.qz-r-revisao small { color: var(--texto-2); font-size: .86rem; line-height: 1.45; }
.qz-r-ranking { list-style: none; padding: 0; margin: .4rem auto 0; max-width: 420px; display: grid; gap: .5rem; }
.qz-r-ranking li { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 14px; background: var(--superficie); border: 2px solid var(--c); text-align: left; }
.qz-r-ranking li:first-child { background: color-mix(in srgb, var(--c) 14%, var(--superficie)); transform: scale(1.03); }
.qz-r-pos { font-weight: 800; color: var(--c); width: 2rem; }
.qz-r-ranking strong { flex: 1; }
.qz-r-pts { font-weight: 700; font-variant-numeric: tabular-nums; }

.qz-confete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* Modo gincana: letras maiores (bom para projetar na TV) */
@media (min-width: 900px) {
  .qz-jogo.modo-gincana .qz-j-pergunta { font-size: 2.2rem; }
  .qz-jogo.modo-gincana .qz-op { font-size: 1.25rem; min-height: 72px; }
}

/* ---------- Folha para imprimir ---------- */
#qz-folha { display: none; }
@media print {
  body.qz-imprimindo > *:not(#qz-folha) { display: none !important; }
  body.qz-imprimindo #qz-folha { display: block; color: #000; font: 11.5pt/1.45 Georgia, serif; }
  #qz-folha h1 { font-size: 20pt; margin: 0 0 .3rem; }
  #qz-folha .qz-f-linha { margin: 0 0 1rem; font-family: system-ui, sans-serif; font-size: 10pt; }
  #qz-folha .qz-f-perguntas > li { break-inside: avoid; margin-bottom: .7rem; }
  #qz-folha .qz-f-perguntas p { margin: 0 0 .15rem; font-weight: 700; }
  #qz-folha ol[type="a"] { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 1.5rem; }
  #qz-folha .qz-f-gabarito { break-before: page; }
  #qz-folha .qz-f-gabarito h2 { font-size: 15pt; }
  #qz-folha .qz-f-gabarito ol { columns: 2; column-gap: 2rem; font-size: 10.5pt; }
  #qz-folha .qz-f-fonte { margin-top: 1.2rem; font-size: 9pt; color: #555; }
  .qz-jogo { display: none !important; }
}