/* Softer, less intrusive quiz: turn fullscreen overlay into a centered modal */

/* Quiz overlay (z-[90]) -> dim backdrop, page visible behind */
.fixed.inset-0.z-\[90\]{
  background-color: rgba(255,255,255,0.25) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 1.25rem;
}
/* Hide the decorative full-bleed glows so the backdrop stays clean */
.fixed.inset-0.z-\[90\] > .pointer-events-none.absolute.inset-0.-z-10{ display:none !important; }

/* Inner card */
.fixed.inset-0.z-\[90\] > .relative.w-full.max-w-2xl{
  background: hsl(var(--background, 0 0% 100%));
  color: hsl(var(--foreground, 0 0% 10%));
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.45), 0 8px 24px -8px rgba(0,0,0,.25);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  max-width: 640px;
}
.fixed.inset-0.z-\[90\] > .relative.w-full.max-w-2xl > div:first-child{ margin-bottom: 1.5rem; }

/* Tighten internal spacing on small screens */
@media (max-width: 640px){
  .fixed.inset-0.z-\[90\] > .relative.w-full.max-w-2xl{ padding: 1.25rem; border-radius: 16px; }
  .fixed.inset-0.z-\[90\] > .relative.w-full.max-w-2xl .mb-12{ margin-bottom: 1.75rem !important; }
  .fixed.inset-0.z-\[90\] > .relative.w-full.max-w-2xl .mb-10{ margin-bottom: 1.25rem !important; }
}

/* ============ Pre-quiz gate ============ */
.qg-backdrop{
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(255,255,255,0.25);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: 1.25rem;
  animation: qgFade .25s ease-out;
}
@keyframes qgFade { from{opacity:0} to{opacity:1} }
.qg-card{
  background: hsl(var(--background, 0 0% 100%));
  color: hsl(var(--foreground, 0 0% 10%));
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.45), 0 8px 24px -8px rgba(0,0,0,.25);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  width: 100%; max-width: 460px;
  text-align: left;
}
.qg-eyebrow{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: hsl(var(--muted-foreground, 0 0% 45%));
  margin: 0 0 .75rem;
}
.qg-title{
  font-size: clamp(1.35rem, 3.2vw, 1.7rem);
  line-height: 1.2; margin: 0 0 .75rem; font-weight: 600;
}
.qg-desc{
  font-size: .95rem; line-height: 1.55;
  color: hsl(var(--muted-foreground, 0 0% 35%));
  margin: 0 0 1.5rem;
}
.qg-actions{ display:flex; flex-direction:column; gap:.6rem; }
.qg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 48px; padding: .75rem 1.25rem;
  border-radius: 999px; font-size: .95rem; font-weight: 500;
  cursor: pointer; border: 1px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s, transform .15s;
  text-decoration: none;
}
.qg-btn-primary{
  background: hsl(var(--foreground, 0 0% 10%));
  color: hsl(var(--background, 0 0% 100%));
}
.qg-btn-primary:hover{ transform: translateY(-1px); }
.qg-btn-ghost{
  background: transparent;
  color: hsl(var(--muted-foreground, 0 0% 35%));
  border-color: hsl(var(--border, 0 0% 85%));
}
.qg-btn-ghost:hover{
  color: hsl(var(--foreground, 0 0% 10%));
  border-color: hsl(var(--foreground, 0 0% 10%));
}
@media (min-width: 480px){
  .qg-actions{ flex-direction: row; }
  .qg-btn{ flex: 1; }
}