/* ---------- scorecard ---------- */
.score {
  color: #fff;
}
.score .h2 {
  color: #fff;
}
.score .sub {
  color: var(--mist);
}
.quiz {
  margin: 56px auto 0;
  max-width: 860px;
  background: rgba(163, 180, 196, .10);
  border: 1px solid rgba(163, 180, 196, .22);
  border-radius: 12px;
  padding: 44px 48px;
}
.qprog {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}
.qprog span {
  flex: 1;
  height: 3px;
  background: rgba(163, 180, 196, .3);
  border-radius: 2px;
}
.qprog span.on {
  background: var(--gold-bright);
}
.qnum {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mist);
  font-weight: 600;
  margin-bottom: 12px;
}
.qtext {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .04em;
  margin-bottom: 26px;
}
.qopt {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(163, 180, 196, .08);
  border: 1px solid rgba(163, 180, 196, .3);
  color: var(--moonlight);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 15.5px;
  font-family: 'Inter';
  cursor: pointer;
  margin-bottom: 12px;
  transition: all .15s;
}
.qopt:hover, .qopt.sel {
  border-color: var(--gold-bright);
  background: rgba(223, 175, 94, .12);
}
.qnext {
  width: 100%;
  margin-top: 10px;
  justify-content: center;
}
.qresult {
  text-align: center;
  display: none;
}
.qresult h3 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: .04em;
  margin-bottom: 16px;
  color:#fff;
/* Layout rules required for typing effect */
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid; /* Blinking typing cursor */
    width: 0;

    /* Combined Animations: Boom entry -> Typing effect -> Cursor blink */
    animation: 
        boomEntrance 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        typewriter 2.5s steps(35, end) 0.6s forwards,
        blinkCursor 0.75s step-end infinite;
}


/* Typing Effect */
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}


.qresult p {
  color: var(--mist);
  max-width: 520px;
  margin: 0 auto 28px;
}

/* ---------- responsive (quiz portion only) ---------- */
@media(max-width: 960px) {
  .quiz {
    padding: 32px 24px;
  }
}