/* PQ Quiz Engine v1.0.0 — night-pack theme */
.pq-quiz-root {
  --pq-night: #12101c;
  --pq-dusk: #1c1930;
  --pq-moon: #efeaf7;
  --pq-mist: #9d94b8;
  --pq-ember: #f2a355;
  --pq-role: var(--pq-ember);
  max-width: 640px;
  margin: 2rem auto;
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
}

.pq-card {
  background: linear-gradient(180deg, var(--pq-dusk) 0%, var(--pq-night) 100%);
  border: 1px solid rgba(239, 234, 247, 0.08);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  color: var(--pq-moon);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pq-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.pq-moon { line-height: 0; }
.pq-intro .pq-moon, .pq-result .pq-moon { text-align: center; margin-bottom: 0.75rem; }
.pq-moon-full svg { filter: drop-shadow(0 0 18px rgba(239, 234, 247, 0.45)); }

.pq-count {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pq-mist);
}

.pq-title {
  font-size: 1.9rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  text-align: center;
  color: var(--pq-moon);
}

.pq-sub {
  color: var(--pq-mist);
  text-align: center;
  margin: 0 0 1.5rem;
  line-height: 1.6;
}

.pq-question {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 1.25rem;
  color: var(--pq-moon);
}

.pq-opts { display: grid; gap: 0.65rem; margin-bottom: 1.25rem; }

.pq-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(239, 234, 247, 0.04);
  border: 1px solid rgba(239, 234, 247, 0.12);
  border-radius: 14px;
  color: var(--pq-moon);
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.5;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.pq-opt:hover { border-color: var(--pq-ember); background: rgba(242, 163, 85, 0.08); transform: translateX(4px); }
.pq-opt:focus-visible, .pq-btn:focus-visible { outline: 2px solid var(--pq-ember); outline-offset: 2px; }
.pq-opt-sel { border-color: var(--pq-ember); background: rgba(242, 163, 85, 0.12); }

.pq-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 999px;
  padding: 0.8rem 1.7rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pq-btn-primary {
  display: block;
  width: 100%;
  background: var(--pq-ember);
  color: #241505;
  border: none;
  box-shadow: 0 8px 24px rgba(242, 163, 85, 0.25);
}
.pq-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(242, 163, 85, 0.35); }

.pq-btn-ghost {
  background: transparent;
  border: 1px solid rgba(239, 234, 247, 0.2);
  color: var(--pq-mist);
}
.pq-btn-ghost:hover { border-color: var(--pq-moon); color: var(--pq-moon); }

.pq-disclaimer {
  margin: 1.25rem 0 0;
  font-size: 0.78rem;
  color: var(--pq-mist);
  text-align: center;
  opacity: 0.8;
}

/* result */
.pq-result { text-align: center; }
.pq-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pq-mist);
  margin: 0 0 0.35rem;
}
.pq-arch-name {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--pq-role);
  text-shadow: 0 0 30px color-mix(in srgb, var(--pq-role) 40%, transparent);
}
.pq-tagline { font-size: 1.05rem; color: var(--pq-moon); font-style: italic; margin: 0 0 1.5rem; line-height: 1.55; }

.pq-bars { display: grid; gap: 0.55rem; margin-bottom: 1.25rem; text-align: left; }
.pq-bar-row { display: grid; grid-template-columns: 64px 1fr 44px; align-items: center; gap: 0.6rem; }
.pq-bar-label { font-size: 0.8rem; font-weight: 600; color: var(--pq-mist); }
.pq-bar-track { height: 8px; border-radius: 999px; background: rgba(239, 234, 247, 0.08); overflow: hidden; }
.pq-bar-fill { height: 100%; border-radius: 999px; transition: width 0.8s ease; }
.pq-bar-pct { font-size: 0.8rem; font-weight: 700; color: var(--pq-moon); text-align: right; }

.pq-close { font-size: 0.88rem; color: var(--pq-mist); margin: 0 0 1rem; }
.pq-desc { color: var(--pq-moon); line-height: 1.65; text-align: left; margin: 0 0 1.25rem; }

.pq-strengths { text-align: left; margin-bottom: 1.5rem; }
.pq-strengths ul { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--pq-moon); line-height: 1.7; }

.pq-actions { display: grid; gap: 0.6rem; }

@media (max-width: 480px) {
  .pq-card { padding: 1.5rem 1.15rem; border-radius: 16px; }
  .pq-title { font-size: 1.55rem; }
  .pq-arch-name { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pq-opt, .pq-btn, .pq-bar-fill { transition: none; }
  .pq-opt:hover, .pq-btn-primary:hover { transform: none; }
}