/* Virgule — quiz modes art direction / pass 1
   Daily + Rush share the assessment instrument language.
*/
.quiz-mode-art{
  --qm-gold:var(--craie-doree,#d9a857);
  --qm-muted:var(--craie-pale-vive,rgba(232,245,232,.64));
  --qm-rule:rgba(232,245,232,.15);
  background:var(--ardoise,#091a09);
}
.quiz-mode-art .page-hero{
  min-height:clamp(380px,52vh,560px);
  padding:110px clamp(20px,7vw,96px) 42px;
  display:flex;flex-direction:column;justify-content:flex-end;
  text-align:start;background:transparent;
}
.quiz-mode-art .page-hero::after{
  content:"ASSESSMENT / MODE";
  position:absolute;inset-block-start:92px;inset-inline-end:clamp(20px,7vw,96px);
  color:var(--qm-gold);font:500 10px/1 var(--font-mono,monospace);letter-spacing:.15em;
}
.quiz-mode-art .page-title{
  max-width:920px;margin:16px 0 12px;
  font-family:var(--font-heading,serif);font-size:clamp(48px,8vw,100px);
  line-height:.88;letter-spacing:-.05em;
}
.quiz-mode-art .page-sub{
  max-width:620px;margin:0;padding-inline-start:18px;
  border-inline-start:2px solid var(--qm-gold);
  color:var(--qm-muted);line-height:1.7;text-align:start;
}
.quiz-mode-art main,
.quiz-mode-art .wrap,
.quiz-mode-art .container{
  max-width:1180px;
}
.quiz-mode-art .mode-shell,
.quiz-mode-art .quiz-shell,
.quiz-mode-art .rush-shell,
.quiz-mode-art .daily-shell{
  background:transparent!important;
  padding:34px clamp(20px,7vw,96px) 100px!important;
}
.quiz-mode-art .mode-card,
.quiz-mode-art .question-card,
.quiz-mode-art .quiz-card,
.quiz-mode-art .result-card,
.quiz-mode-art .empty-card{
  border:0!important;border-block:1px solid var(--qm-rule)!important;
  border-radius:0!important;background:transparent!important;
  box-shadow:none!important;
}
.quiz-mode-art .question-card{padding:28px 0 30px!important}
.quiz-mode-art .progress,
.quiz-mode-art .quiz-progress,
.quiz-mode-art .progress-wrap{
  border-block:1px solid var(--qm-rule);
  padding:12px 0;
}
.quiz-mode-art .progress-bar,
.quiz-mode-art .quiz-progress-bar{height:2px;border-radius:0;background:var(--qm-rule)}
.quiz-mode-art .progress-fill,
.quiz-mode-art .quiz-progress-fill{border-radius:0;background:var(--qm-gold)}
.quiz-mode-art .question-number,
.quiz-mode-art .q-num,
.quiz-mode-art .eyebrow{
  color:var(--qm-gold)!important;
  font:500 10px/1.4 var(--font-mono,monospace)!important;
  letter-spacing:.13em;
}
.quiz-mode-art .question-text,
.quiz-mode-art .q-text{
  max-width:900px;
  font-family:var(--font-heading,serif)!important;
  font-size:clamp(26px,4.5vw,50px)!important;
  line-height:1.1!important;
}
.quiz-mode-art .answers,
.quiz-mode-art .options,
.quiz-mode-art .options-grid{
  gap:0!important;border-top:1px solid var(--qm-rule);
}
.quiz-mode-art button.option,
.quiz-mode-art .option,
.quiz-mode-art .opt-btn,
.quiz-mode-art .answer-btn{
  min-height:58px;padding:14px 0!important;
  border:0!important;border-bottom:1px solid var(--qm-rule)!important;
  border-radius:0!important;background:transparent!important;
  text-align:start;
}
.quiz-mode-art button.option:hover,
.quiz-mode-art .option:hover,
.quiz-mode-art .opt-btn:hover:not(:disabled),
.quiz-mode-art .answer-btn:hover{
  background:rgba(217,168,87,.035)!important;
}
.quiz-mode-art .next-btn,
.quiz-mode-art .continue-btn,
.quiz-mode-art .start-btn{
  border:0;border-bottom:1px solid var(--qm-gold);border-radius:0;
  background:transparent;color:var(--qm-gold);padding-inline:0;
}
.quiz-mode-art .timer,
.quiz-mode-art .score,
.quiz-mode-art .streak{
  border-inline-start:1px solid var(--qm-gold);
  border-radius:0;background:transparent!important;
  color:var(--qm-gold);
  font:500 10px/1.2 var(--font-mono,monospace);
  padding-inline-start:12px;
}
.quiz-mode-art .explanation,
.quiz-mode-art .feedback,
.quiz-mode-art .correction{
  border:0!important;border-inline-start:2px solid var(--qm-gold)!important;
  border-radius:0!important;background:transparent!important;
  color:var(--qm-muted);
}
@media(max-width:720px){
  .quiz-mode-art .page-hero{min-height:430px;padding:105px 20px 36px}
  .quiz-mode-art .page-title{font-size:clamp(48px,14vw,76px)}
  .quiz-mode-art .mode-shell,
  .quiz-mode-art .quiz-shell,
  .quiz-mode-art .rush-shell,
  .quiz-mode-art .daily-shell{padding-inline:20px!important}
  .quiz-mode-art .question-text,.quiz-mode-art .q-text{font-size:clamp(27px,8vw,42px)!important}
}
@media(prefers-reduced-motion:reduce){.quiz-mode-art *{animation:none!important;transition:none!important}}