@import url('https://fonts.cdnfonts.com/css/open-sauce-one');

:root{
  --bg: #000000;
  --ink: #edf0f2;
  --border: #edf0f2;

  --btn-ans-bg: #edf0f2;
  --btn-ans-ink: #000000;

  --btn-next-bg: #1612ff;
  --btn-next-ink: #edf0f2;

  --btn-try-bg: #1612ff;
  --btn-try-ink: #edf0f2;

  --radius: 16px;
  --radius-sm: 12px;

  --font: "Open Sauce One", "Open Sauce", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
}

.wrap{
  max-width: 920px;
  margin: 0 auto;
  padding: 34px 16px 56px;
}

h1{
  margin: 0 0 22px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
}

.card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  padding: 26px 22px 22px;
}

/* More breathing room */
.toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}

.progress, .score{
  font-size: 14px;
  opacity: .92;
}

.pill{
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  opacity: .95;
}

.quote{
  font-size: 24px;
  line-height: 1.5;
  margin: 8px 0 22px;
}

.choices{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}

button{
  font-family: var(--font);
  font-weight: 500;
}

button.choice{
  appearance:none;
  border: 1px solid rgba(0,0,0,.0);
  background: var(--btn-ans-bg);
  color: var(--btn-ans-ink);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  cursor:pointer;
  font-size: 15px;
  transition: filter .12s ease, transform .02s ease;
}

button.choice:hover{ filter: brightness(.94); }
button.choice:active{ transform: translateY(1px); }
button.choice[disabled]{ opacity:.65; cursor:default; }

/* Highlight correct answer after selection */
button.choice.correct{
  outline: 3px solid #1612ff;
  outline-offset: 2px;
}
button.choice.wrong{
  outline: 2px solid rgba(237,240,242,.35);
  outline-offset: 2px;
}

/* Feedback box with light green/red backgrounds */
.feedback{
  margin-top: 10px;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.feedback.good{
  background: rgba(24,128,56,.14);
  border-color: rgba(24,128,56,.55);
}

.feedback.bad{
  background: rgba(217,48,37,.14);
  border-color: rgba(217,48,37,.55);
}

.feedbackTitle{
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.controls{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 22px;
  align-items:center;
}

button.action{
  appearance:none;
  border: 1px solid rgba(0,0,0,0);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  cursor:pointer;
  font-size: 15px;
  transition: filter .12s ease, transform .02s ease;
}

button.action:hover{ filter: brightness(.94); }
button.action:active{ transform: translateY(1px); }

button#btnNext{
  background: var(--btn-next-bg);
  color: var(--btn-next-ink);
}

button#btnTryAgain{
  background: var(--btn-try-bg);
  color: var(--btn-try-ink);
}

button.action:disabled{ opacity:.55; cursor:default; }

.hidden{ display:none; }

.small{
  margin-top: 18px;
  font-size: 12px;
  opacity: .92;
  line-height: 1.6;
  max-width: 90ch;
}

@media (max-width:520px){
  h1{ font-size: 26px; }
  .quote{ font-size: 22px; margin-bottom: 18px; }
  .card{ padding: 22px 16px 18px; }
  .toprow{ margin-bottom: 16px; }
}

/* End-of-quiz CTA + Share */
.endCta{ margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(237,240,242,.35); }
.ctaBlock{ display:flex; flex-direction:column; gap: 10px; }
.ctaLead{ display:flex; flex-direction:column; gap: 6px; line-height: 1.5; }
.ctaBridge{ display:flex; flex-direction:column; gap: 6px; line-height: 1.5; }

.ctaButton{
  display:inline-block;
  margin-top: 6px;
  background: #1612ff;
  color: #edf0f2;
  text-decoration:none;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  width: fit-content;
  transition: filter .12s ease, transform .02s ease;
}
.ctaButton:hover{ filter: brightness(.94); }
.ctaButton:active{ transform: translateY(1px); }

.shareBlock{ margin-top: 16px; display:flex; flex-direction:column; gap: 10px; }
.shareTitle{ font-size: 14px; opacity:.95; }
.shareGrid{ display:flex; flex-wrap:wrap; gap: 10px; }
.shareBtn{
  appearance:none;
  border: 1px solid rgba(237,240,242,.35);
  background: transparent;
  color: var(--ink);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor:pointer;
  font-size: 14px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  transition: filter .12s ease, transform .02s ease, background .12s ease, border-color .12s ease;
}
.shareBtn:hover{ background: rgba(237,240,242,.06); border-color: rgba(237,240,242,.55); }
.shareBtn:active{ transform: translateY(1px); }
.shareBtn .icon{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(237,240,242,.45);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}
.shareHint{ font-size: 12px; opacity:.92; }

@media (max-width:520px){
  .shareBtn{ width: 100%; justify-content:flex-start; }
  .ctaButton{ width: 100%; text-align:center; }
}