/* ==========================================================================
   MARKLING — quizzes (hosted by the duck)
   ========================================================================== */

.quiz-wrap { max-width: 860px; margin: 0 auto; }

/* ---------- stage ---------- */
   /* (the quiz picker lives in soundings.css as .tide-table / .tide) */
.quiz-stage { margin-top: 10px; }
.quiz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.quiz-head h2 { font-family: 'Fraunces', serif; color: var(--plum); margin: 0; font-size: 1.6rem; }
.quiz-progress { font: 600 .78rem 'Bricolage Grotesque', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--plum-soft); }
.quiz-bar { height: 4px; background: rgba(95,212,200,.16); border-radius: 4px; margin: 12px 0 24px; overflow: hidden; }
.quiz-bar span { display: block; height: 100%; background: var(--primary); width: 0; transition: width .35s ease; }

.quiz-card {
  background: var(--card); border: 1px solid var(--ring);
  border-radius: var(--radius); padding: 28px 26px;
}
.quiz-q {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; color: var(--plum);
  margin: 0 0 20px; line-height: 1.35;
}
.quiz-answers { display: grid; gap: 10px; }
.qa {
  text-align: left; font: 400 .95rem 'Bricolage Grotesque', sans-serif; color: var(--plum);
  background: rgba(95,212,200,.05); border: 1px solid var(--ring);
  border-radius: 8px; padding: 13px 16px; cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}
.qa:hover:not(:disabled) { border-color: var(--primary); background: rgba(95,212,200,.1); transform: translateX(3px); }
.qa:disabled { cursor: default; opacity: .75; }
.qa.correct { border-color: #5FD4C8; background: rgba(95,212,200,.16); opacity: 1; }
.qa.wrong { border-color: var(--red-on-dark); background: rgba(206,51,53,.12); opacity: 1; }
/* quiz.js prefixes marked answers with <b class="qa-mark">. Colour the word,
   not the whole answer - --red is 2.71:1 on --card, --red-on-dark is 4.5:1. */
.qa-mark { font-weight: 700; }
.qa.wrong .qa-mark { color: var(--red-on-dark); }
.qa.correct .qa-mark { color: var(--primary-deep); }
.qa.chosen { border-color: var(--primary); background: rgba(95,212,200,.12); opacity: 1; }

.quiz-why {
  margin: 18px 0 0; padding: 14px 16px; border-left: 3px solid var(--primary);
  background: rgba(95,212,200,.06); border-radius: 0 8px 8px 0;
  font-size: .9rem; color: var(--plum-soft); line-height: 1.55;
}
.quiz-next {
  margin-top: 20px; background: var(--primary); color: #04202B; border: none;
  border-radius: 100px; padding: 11px 24px; font: 700 .9rem 'Bricolage Grotesque', sans-serif;
  cursor: pointer; transition: transform .18s, background .18s;
}
.quiz-next:hover { transform: translateY(-2px); background: var(--primary-deep); }

/* ---------- result ---------- */
.quiz-result {
  background: linear-gradient(140deg, var(--card), rgba(12,49,64,.5));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 28px; text-align: center;
}
.result-score {
  font-family: 'Fraunces', serif; font-size: 2.8rem; color: var(--primary);
  line-height: 1; margin-bottom: 6px;
}
.result-title { font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--plum); margin: 0 0 12px; }
.result-text { color: var(--plum-soft); max-width: 56ch; margin: 0 auto 22px; font-size: .96rem; }
.quiz-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.quiz-actions .btn, .quiz-restart {
  border-radius: 100px; padding: 11px 22px; font: 600 .88rem 'Bricolage Grotesque', sans-serif;
  cursor: pointer; text-decoration: none; display: inline-block; border: 1px solid var(--line);
  background: transparent; color: var(--plum);
}
.quiz-actions .btn.primary { background: var(--primary); color: #04202B; border-color: var(--primary); }
.quiz-restart:hover, .quiz-actions .btn:hover { border-color: var(--primary); }

/* ---------- the host ---------- */
.host {
  position: relative; max-width: 420px; margin: 34px auto 0;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.4)); cursor: pointer;
}
.host canvas { display: block; width: 100%; height: auto; image-rendering:crisp-edges;image-rendering: pixelated; }
.quiz-bubble {
  position: absolute; bottom: 78%; transform: translateX(-50%) translateY(6px);
  background: var(--plum); color: #04202B; border-radius: 10px;
  padding: 9px 14px; font: 500 .84rem 'Bricolage Grotesque', sans-serif;
  /* never wider than the host, whatever the host turns out to be */
  max-width: min(260px, calc(100% - 12px));
  overflow-wrap: anywhere;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; line-height: 1.4;
}
.quiz-bubble.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.quiz-bubble::after {
  /* --tail is the duck's position relative to the bubble, set in quiz.js, so
     the pointer stays aimed at the bird even when the bubble has been pushed
     sideways to stay on screen. */
  content: ''; position: absolute; bottom: -6px;
  left: clamp(10px, var(--tail, 22px), calc(100% - 24px));
  margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 7px solid var(--plum);
}
@media (prefers-reduced-motion: reduce) {
  .qa, .quiz-next, .quiz-bubble { transition: none; }
}
@media (max-width: 620px) {
  .quiz-card { padding: 20px 16px; }
  .quiz-q { font-size: 1.05rem; }
  .result-score { font-size: 2.2rem; }

  /* On a phone there is no room to float a bubble over the duck: it ran off
     the side of the screen and, because it opens upwards, sat on top of the
     answer buttons. So it stops floating. The host becomes a column with the
     bubble ordered above the canvas, which means it can overlap nothing and
     overflow nothing - it simply takes its own space and pushes the bird
     down. min-height keeps the layout from jumping as the lines change. */
  .host {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .host canvas { order: 2; }

  .quiz-bubble {
    order: 1;
    position: static;
    left: auto !important;          /* quiz.js writes an inline left */
    transform: none;
    max-width: 100%;
    margin: 0 auto 12px;
    min-height: 2.4em;
    box-sizing: border-box;
  }
  .quiz-bubble.show { transform: none; }
  .quiz-bubble::after { left: 50%; margin-left: -7px; }
}

/* ---------- the verdict's one commercial exit ----------------------------
   Deliberately quieter than the quiz actions above it: this is an offer, not
   a result, and it should not compete with the verdict the reader came for. */
.result-cta {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  text-align: left;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}
.result-cta-note {
  display: block;
  font: 700 .62rem 'Bricolage Grotesque', sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--plum-soft);
  margin-bottom: 8px;
}
.result-cta-text {
  font-size: .88rem;
  line-height: 1.65;
  color: var(--plum-soft);
  margin: 0;
}
.result-cta-link {
  display: inline-block;
  margin-top: 10px;
  font: 700 .8rem 'Bricolage Grotesque', sans-serif;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.result-cta-link:hover,
.result-cta-link:focus-visible { color: #E9E9F0; }