/* ============================================================
   De Kwelpieperquiz
   ============================================================ */
.quiz-body{background:var(--blue-950)}
.quiz-vlak{position:relative;overflow:hidden;padding:clamp(7.5rem,15vh,10rem) 0 clamp(4rem,10vh,7rem);min-height:100vh}
.quiz-vlak .shell{max-width:760px}

.quiz-start h1,.quiz-eind h2{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,4.6rem);line-height:1;margin:.9rem 0 1.1rem;
}
.quiz-start .lead,.quiz-eind .lead{max-width:46ch;margin-bottom:2rem}

/* ---- balk met voortgang ---- */
.quiz-balk{
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);
  margin-bottom:1rem;
}
.quiz-voortgang{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;max-width:260px}
.quiz-voortgang i{display:block;height:100%;width:0;background:var(--yellow);border-radius:99px;transition:width .4s var(--ease)}
#quizScore{color:var(--yellow);font-weight:800}

/* ---- de foto ---- */
.quiz-foto{
  margin:0 0 1.4rem;border-radius:20px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.05);aspect-ratio:4/3;max-height:52vh;
  box-shadow:0 26px 60px rgba(3,5,28,.5);
}
.quiz-foto img{width:100%;height:100%;object-fit:cover;display:block}

.quiz-vraag{
  margin:0 0 1rem;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.2rem,3vw,2rem);line-height:1.05;
}

/* ---- de antwoorden ---- */
.quiz-keuzes{display:grid;gap:.55rem}
.quiz-keuzes button{
  display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;cursor:pointer;
  padding:.85rem 1.1rem;border:0;border-radius:14px;
  background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:.98rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:background .18s,transform .18s;
}
.quiz-keuzes button:hover:not(:disabled){background:rgba(255,255,255,.14);transform:translateX(3px)}
.quiz-keuzes button:disabled{cursor:default}
.quiz-keuzes button.goed{background:rgba(60,200,120,.24);box-shadow:inset 0 0 0 2px #3cc878}
.quiz-keuzes button.fout{background:rgba(255,45,32,.2);box-shadow:inset 0 0 0 2px var(--red)}
.quiz-keuzes button i{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);font-style:normal;font-weight:800;font-size:.78rem;
}
.quiz-keuzes button.goed i{background:#3cc878;color:#04120a}
.quiz-keuzes button.fout i{background:var(--red)}

/* ---- na het antwoord ---- */
.quiz-uitslag{margin-top:1.2rem}
.quiz-uitslag p{margin:0 0 1rem;color:rgba(255,255,255,.8)}
.quiz-uitslag b{color:var(--yellow)}
.quiz-knoppen{display:flex;flex-wrap:wrap;gap:.6rem}

.quiz-eind .display{color:var(--yellow)}

@media (max-width:520px){
  .quiz-foto{aspect-ratio:1/1}
}