/* quiz em janela de foco (modal): escurece o fundo, prende o foco, Esc fecha */
.quiz { border: 0; padding: 0; max-width: min(640px, calc(100vw - 2 * var(--gutter))); width: 100%; background: var(--qmq-bg); color: var(--qmq-ink); border-radius: var(--r-bloco); box-shadow: 0 0 0 2px var(--qmq-ink); overflow: hidden; }
.quiz::backdrop { background: rgba(27, 25, 23, .82); }
.quiz[open] { display: flex; flex-direction: column; max-height: calc(100svh - 2 * var(--gutter)); }
.quiz-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5); border-bottom: 2px solid var(--qmq-line); background: var(--qmq-bg); }
.quiz-topo .etiqueta { margin: 0; }
.quiz-fechar { background: none; border: 2px solid var(--qmq-line); border-radius: var(--r-pilula); min-width: var(--toque); min-height: var(--toque); display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1); padding: 0 var(--e-3); font-weight: 700; }
.quiz-fechar:hover { background: var(--qmq-bg-2); }
.quiz-progresso { height: 6px; background: var(--qmq-bg-2); }
.quiz-progresso i { display: block; height: 100%; background: var(--qmq-acao); transition: width 250ms var(--curva); }
.quiz-corpo { padding: var(--e-5); overflow: auto; display: flex; flex-direction: column; gap: var(--e-4); }
.quiz-pergunta { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: var(--t-h3); line-height: 1.2; text-transform: none; letter-spacing: 0; }
.quiz-opcoes { display: flex; flex-direction: column; gap: var(--e-2); list-style: none; padding: 0; margin: 0; }
.quiz-opcao { width: 100%; text-align: left; min-height: var(--toque); padding: var(--e-3) var(--e-4); border: 2px solid var(--qmq-line); border-radius: var(--r-card); background: var(--qmq-bg); display: flex; gap: var(--e-3); align-items: center; font-size: var(--t-corpo); line-height: 1.3; transition: border-color 250ms, background-color 250ms; }
.quiz-opcao .letra { font-family: var(--f-display); font-weight: 900; width: 28px; flex: none; color: var(--qmq-ink-2); }
.quiz-opcao:hover:not([disabled]) { background: var(--qmq-bg-2); }
.quiz-opcao[disabled] { cursor: default; opacity: .75; }
.quiz-opcao.certa { border-color: var(--qmq-ok); border-width: 3px; opacity: 1; background: rgba(47, 125, 79, .08); }
.quiz-opcao.certa .letra { color: var(--qmq-ok); }
.quiz-opcao.errada { border-color: var(--qmq-alerta); border-width: 3px; opacity: 1; background: rgba(184, 71, 31, .08); }
.quiz-opcao.errada .letra { color: var(--qmq-alerta); }
.quiz-opcao .marca { margin-left: auto; width: 22px; height: 22px; flex: none; }
.quiz-feedback { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 250ms var(--curva); }
.quiz-feedback.aberto { grid-template-rows: 1fr; }
.quiz-feedback > div { overflow: hidden; }
.quiz-resultado { border-radius: var(--r-card); padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); border-left: 6px solid var(--qmq-neutro); background: var(--qmq-bg-2); }
.quiz-resultado.ok { border-left-color: var(--qmq-ok); }
.quiz-resultado.erro { border-left-color: var(--qmq-alerta); }
.quiz-resultado .veredito { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 700; font-family: var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: 1px; font-size: var(--t-apoio); }
.quiz-resultado.ok .veredito { color: var(--qmq-ok); }
.quiz-resultado.erro .veredito { color: var(--qmq-alerta); }
.quiz-resultado .veredito svg { width: 20px; height: 20px; }
.quiz-resultado p { margin: 0; }
.quiz-onde { font-size: var(--t-apoio); color: var(--qmq-ink-2); }
.quiz-onde strong { color: var(--qmq-ink); }
.quiz-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.quiz-acoes .btn { flex: 1 1 auto; }
.quiz-fim { text-align: center; display: flex; flex-direction: column; gap: var(--e-3); align-items: center; padding: var(--e-3) 0; }
.quiz-fim .placar { font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-size: var(--t-display); line-height: .9; letter-spacing: -0.02em; }
.quiz-fim .placar small { display: block; font-family: var(--f-texto); font-weight: 400; font-size: var(--t-corpo); letter-spacing: 0; margin-top: var(--e-2); }
@media (max-width: 719px) {
  .quiz { max-width: 100vw; width: 100vw; max-height: 100svh; border-radius: 0; margin: 0; height: 100svh; }
  .quiz[open] { max-height: 100svh; }
  .quiz-corpo { padding: var(--e-4); }
}

/* ===== passada visual "rua e jornal" ===== */
.quiz { border-radius: 0; }
.quiz-opcao { border-radius: 0; }
.quiz-fechar { border-radius: 0; }
.quiz-resultado { border-left: 0; border-top: 3px solid var(--qmq-neutro); border-radius: 0; background: transparent; padding: var(--e-3) 0 0; }
.quiz-resultado.ok { border-top-color: var(--qmq-ok); }
.quiz-resultado.erro { border-top-color: var(--qmq-alerta); }