/* The full screen button on every quiz and the full screen look (js/quiz-fullscreen.js; the router
   adds both to /quizzes/<slug>/ pages). Classic and purple. */
.quiz-wrapper { position: relative; }
.quiz-fs-btn { position: absolute; top: 14px; right: 14px; z-index: 5; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; color: #64748b; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.quiz-fs-btn:hover { color: #f59e0b; border-color: #f59e0b; background: #fffbeb; }
.quiz-fs-btn svg { width: 20px; height: 20px; }
body.pv-quiz .quiz-fs-btn { border: 1.5px solid var(--pv-line, #e6dff2); border-radius: 12px; color: var(--pv-violet, #634bf5); }
body.pv-quiz .quiz-fs-btn:hover { border-color: var(--pv-lav, #cbc2ff); background: #faf8fe; color: var(--pv-violet, #634bf5); }

/* full screen: no site chrome, the quiz centred and grown to the screen */
body.quiz-fs .site-header, body.quiz-fs .site-footer, body.quiz-fs .pv-top, body.quiz-fs .pv-footer, body.quiz-fs .crumb { display: none !important; }
/* the title and level pills stay put from question to question: the space above them is fixed
   (--qfs-top, from js/quiz-fullscreen.js: what centres the quiz's tallest card on the screen) */
body.quiz-fs .quiz-wrapper { min-height: 100vh !important; padding: var(--qfs-top, 24px) 20px 24px !important; }
body.quiz-fs .quiz-wrapper > :not(.quiz-fs-btn) { zoom: var(--qfs, 1); }
@media (max-width: 540px) {
  .quiz-fs-btn { top: 10px; right: 10px; width: 36px; height: 36px; }
}