/* Quiz do Rock Nacional (/jogo, public/quiz.js) -- usa as cores do styles.css */
.quiz-page .article-body{ white-space: normal; }
.quiz-lead{ max-width: 60ch; }
.quiz-app{ margin: 2rem 0 2.5rem; max-width: 720px; }
.quiz-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2rem);
}
.quiz-edition{
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.quiz-meta{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.quiz-progress{ height: 4px; background: var(--surface-2); margin: 0.75rem 0 1.25rem; border-radius: 2px; overflow: hidden; }
.quiz-progress span{ display: block; height: 100%; background: var(--accent); transition: width 0.4s var(--ease-out); }
.quiz-prompt{ font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 700; line-height: 1.3; margin: 0.5rem 0 1.25rem; }
.quiz-options{ display: grid; gap: 0.6rem; }
.quiz-option{
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.quiz-option:hover:not(:disabled){ border-color: var(--accent); }
.quiz-option:focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 2px; }
.quiz-option:disabled{ cursor: default; }
.quiz-letter{
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-dim);
}
.quiz-option.chosen{ border-color: var(--stone-2); }
.quiz-option.right{ background: rgba(46, 160, 67, 0.18); border-color: #2ea043; }
.quiz-option.right .quiz-letter{ background: #2ea043; border-color: #2ea043; color: #fff; }
.quiz-option.wrong{ background: rgba(226, 38, 61, 0.16); border-color: var(--accent); }
.quiz-option.wrong .quiz-letter{ background: var(--accent); border-color: var(--accent); color: #fff; }
.quiz-feedback{ margin-top: 1.25rem; display: grid; gap: 0.85rem; justify-items: start; }
.quiz-verdict{ font-weight: 700; }
.quiz-verdict.ok{ color: #3fb950; }
.quiz-verdict.nope{ color: var(--accent-text); }
.quiz-band-link{ display: flex; align-items: center; gap: 0.75rem; color: var(--accent-2); font-weight: 600; }
.quiz-band-link img{ width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); }
.quiz-band-link:hover span{ text-decoration: underline; }
.quiz-actions{ display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.quiz-btn{
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--stone-3);
  border-radius: var(--radius);
  padding: 0.75rem 1.25rem;
  cursor: pointer;
}
.quiz-btn:hover{ border-color: var(--text-dim); }
.quiz-btn.primary{ background: var(--accent); border-color: var(--accent); color: #fff; }
.quiz-btn.primary:hover{ background: var(--accent-text); }
.quiz-btn:focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 2px; }
.quiz-summary{ text-align: center; }
.quiz-summary .quiz-actions{ justify-content: center; }
.quiz-score{ font-size: clamp(4rem, 14vw, 6.5rem); margin: 0.5rem 0 0.25rem; }
.quiz-grid{ font-size: 1.4rem; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.quiz-stat{ color: var(--text-dim); margin: 0.25rem 0; }
.quiz-share-status{ display: block; margin-top: 0.75rem; color: var(--text-dim); font-size: 0.9rem; white-space: pre-line; }
.quiz-hint{ margin-top: 1rem; font-size: 0.85rem; color: var(--text-dimmer); }
.quiz-about h2{ font-size: 1.1rem; margin: 0 0 0.75rem; }
.quiz-about ul{ padding-left: 1.2rem; margin-bottom: 1rem; display: grid; gap: 0.4rem; }
@media (max-width: 520px){
  .quiz-actions .quiz-btn{ width: 100%; }
}