/* ==========================================================================
   Air Health Quiz — full-screen Typeform-style flow
   ========================================================================== */
.quiz {
  position: relative; min-height: calc(100vh - 200px);
  background:
    radial-gradient(1200px 700px at 70% 40%, rgba(16,100,108,.20), transparent 60%),
    radial-gradient(900px 600px at 20% 80%, rgba(16,100,108,.12), transparent 55%),
    linear-gradient(180deg, #0a3138, #06262b);
  overflow: hidden;
}
/* starfield */
.quiz::before {
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80% 60%, #fff, transparent),
    radial-gradient(1px 1px at 35% 70%, #fff, transparent),
    radial-gradient(1px 1px at 75% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 90%, #fff, transparent),
    radial-gradient(1px 1px at 90% 35%, #fff, transparent);
  background-repeat: no-repeat;
}
.quiz__progress { position:sticky; top:0; left:0; width:100%; height:4px; background:rgba(255,255,255,.1); z-index:5; }
.quiz__progress-bar { height:100%; width:0; background:var(--accent); transition:width .35s ease; }

.quiz__screen { display:none; position:relative; z-index:2; min-height:calc(100vh - 240px);
  align-items:center; justify-content:center; padding:3rem 1.5rem; }
.quiz__screen.is-active { display:flex; animation:quizFade .4s ease; }
@keyframes quizFade { from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }

.quiz__inner { max-width:680px; width:100%; color:#fff; text-align:left; }
.quiz__intro .quiz__inner, .quiz__result .quiz__inner { text-align:center; }
.quiz__planet { margin-bottom:1.5rem; }
.quiz__intro h1 { font-size:clamp(2rem,5vw,3.2rem); color:#fff; margin-bottom:1rem; }
.quiz__lede { font-size:1.15rem; color:#cfe6e8; line-height:1.6; margin-bottom:2rem; max-width:46ch; }
.quiz__intro .quiz__lede, .quiz__result .quiz__lede { margin-inline:auto; }

.quiz__qnum { display:inline-block; font-family:var(--font-display); font-size:.8rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
.quiz__qtitle { font-size:clamp(1.5rem,3.5vw,2.2rem); color:#fff; line-height:1.25; margin-bottom:.5rem; }
.quiz__qsub { color:#9fc1c4; font-size:.95rem; margin-bottom:1rem; }

.quiz__opts { display:flex; flex-direction:column; gap:.7rem; margin:1.6rem 0; }
.quiz__opt { display:flex; align-items:center; gap:1rem; width:100%; text-align:left;
  padding:1rem 1.2rem; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.18);
  border-radius:12px; color:#fff; font-size:1.05rem; cursor:pointer; transition:.15s; font-family:var(--font-body); }
.quiz__opt:hover { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.4); transform:translateX(3px); }
.quiz__opt.is-selected { background:var(--teal-500); border-color:var(--accent); }
.quiz__opt-key { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:7px;
  background:rgba(255,255,255,.15); font-family:var(--font-display); font-weight:700; font-size:.9rem; }
.quiz__opt.is-selected .quiz__opt-key { background:var(--accent); color:var(--teal-900); }

.quiz__next { margin-top:.5rem; }
.quiz__nav { margin-top:1.2rem; }
.quiz__back { background:none; border:none; color:#9fc1c4; font-size:.95rem; cursor:pointer; padding:.4rem 0; transition:color .15s; }
.quiz__back:hover { color:#fff; }

.quiz__result-eyebrow { display:inline-block; font-family:var(--font-display); font-size:.8rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
.quiz__result h2 { font-size:clamp(1.8rem,4.5vw,2.8rem); color:#fff; margin-bottom:1rem; }
.quiz__score { font-family:var(--font-display); font-size:1rem; color:#9fc1c4; margin-bottom:1.8rem; }
.quiz__retake { display:block; margin:1.4rem auto 0; background:none; border:none; color:#9fc1c4;
  font-size:.9rem; cursor:pointer; text-decoration:underline; }
.quiz__retake:hover { color:#fff; }

@media (max-width:600px){
  .quiz__screen { padding:2rem 1.2rem; min-height:calc(100vh - 200px); }
  .quiz__opt { font-size:1rem; padding:.9rem 1rem; }
}