/* ============================================================
   BOOK-SITE TRIVIA QUIZ — portable engine styles
   Drop quiz.css + quiz.js on any site, supply a quiz-data.js
   (window.QUIZ_CONFIG) and a container: <div id="quiz"></div>.
   Themes itself from the host site's CSS variables when present
   (--paper --card --ink --ink-soft --navy --navy-deep --brass
    --rule --sea), with neutral fallbacks otherwise.
   ============================================================ */

#quiz{
  --qz-paper: var(--paper, #f6f4ec);
  --qz-card:  var(--card, #fbfaf4);
  --qz-ink:   var(--ink, #222a33);
  --qz-soft:  var(--ink-soft, #5b6672);
  --qz-main:  var(--navy, #1d3f63);
  --qz-deep:  var(--navy-deep, #122c46);
  --qz-gold:  var(--brass, #a3823c);
  --qz-rule:  var(--rule, #aab4bd);
  --qz-sea:   var(--sea, #2e6e8e);
  --qz-good:  #2e7d4f;
  --qz-bad:   #a03a2e;
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 70px;   /* room for the fixed progress bar */
}

/* ---------- level toggle ---------- */
.qz-levels{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.qz-levels button{
  font:inherit;font-variant:small-caps;letter-spacing:.1em;font-size:15px;
  padding:7px 22px;cursor:pointer;color:var(--qz-main);
  background:var(--qz-card);border:1px solid var(--qz-rule);
}
.qz-levels button:hover{border-color:var(--qz-main)}
.qz-levels button.on{background:var(--qz-main);color:#fff;border-color:var(--qz-main)}
.qz-level-blurb{text-align:center;font-style:italic;color:var(--qz-soft);font-size:14.5px;margin:4px 0 0}

/* ---------- header strip: question no. + score ---------- */
.qz-status{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:22px 2px 10px;font-variant:small-caps;letter-spacing:.12em;
  color:var(--qz-sea);font-size:14.5px;
}
.qz-status .qz-score{color:var(--qz-gold)}

/* ---------- question card ---------- */
.qz-card{
  background:var(--qz-card);border:1px solid var(--qz-rule);
  box-shadow:0 2px 8px rgba(0,0,0,.08);padding:22px 24px 20px;
}
.qz-question{font-size:19px;line-height:1.5;margin:0 0 14px;text-align:center}
.qz-qimg{text-align:center;margin:0 0 16px}
.qz-qimg img{max-width:100%;max-height:340px;height:auto;background:#fff;
  border:1px solid var(--qz-rule);padding:6px}

/* text options */
.qz-opts{display:flex;flex-direction:column;gap:9px;margin:0}
.qz-opt{
  font:inherit;font-size:16.5px;text-align:left;cursor:pointer;line-height:1.4;
  padding:10px 14px;background:var(--qz-paper);
  border:1px solid var(--qz-rule);color:var(--qz-ink);
  display:flex;gap:12px;align-items:flex-start;
}
.qz-opt .qz-letter{
  flex:0 0 auto;font-variant:small-caps;font-weight:bold;color:var(--qz-sea);
  border:1px solid var(--qz-rule);background:var(--qz-card);
  width:26px;height:26px;line-height:24px;text-align:center;font-size:14px;
}
.qz-opt:hover{border-color:var(--qz-main)}
.qz-opt.sel{border-color:var(--qz-main);background:var(--qz-card);
  box-shadow:inset 0 0 0 1px var(--qz-main)}
.qz-opt.sel .qz-letter{background:var(--qz-main);color:#fff;border-color:var(--qz-main)}

/* image options: 2x2 grid */
.qz-opts.qz-imggrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qz-opts.qz-imggrid .qz-opt{flex-direction:column;align-items:center;gap:8px;padding:10px}
.qz-opts.qz-imggrid img{max-width:100%;height:150px;object-fit:contain;background:#fff}
@media (max-width:520px){ .qz-opts.qz-imggrid img{height:110px} }

/* right / wrong colouring after submit */
.qz-opt.correct{border-color:var(--qz-good);box-shadow:inset 0 0 0 2px var(--qz-good)}
.qz-opt.correct .qz-letter{background:var(--qz-good);border-color:var(--qz-good);color:#fff}
.qz-opt.wrong{border-color:var(--qz-bad);box-shadow:inset 0 0 0 2px var(--qz-bad)}
.qz-opt.wrong .qz-letter{background:var(--qz-bad);border-color:var(--qz-bad);color:#fff}
.qz-opt:disabled{cursor:default;opacity:.92}

/* ---------- verdict + explanation ---------- */
.qz-verdict{margin:16px 0 0;padding:13px 16px;border:1px solid;font-size:16px;line-height:1.5}
.qz-verdict.good{border-color:var(--qz-good);color:var(--qz-good);background:rgba(46,125,79,.06)}
.qz-verdict.bad{border-color:var(--qz-bad);color:var(--qz-bad);background:rgba(160,58,46,.06)}
.qz-verdict .qz-headline{font-variant:small-caps;letter-spacing:.1em;font-weight:bold;
  display:block;margin-bottom:4px;font-size:17px}
.qz-verdict .qz-explain{color:var(--qz-ink);font-style:italic}

/* ---------- buttons ---------- */
.qz-actions{text-align:center;margin-top:18px}
.qz-btn{
  font:inherit;font-variant:small-caps;letter-spacing:.14em;font-size:16px;
  padding:10px 34px;cursor:pointer;
  background:var(--qz-main);color:#fff;border:1px solid var(--qz-deep);
  box-shadow:0 2px 5px rgba(0,0,0,.15);
}
.qz-btn:hover{background:var(--qz-deep)}
.qz-btn:disabled{opacity:.45;cursor:default}
.qz-btn.qz-ghost{background:var(--qz-card);color:var(--qz-main);border-color:var(--qz-rule)}
.qz-btn.qz-ghost:hover{border-color:var(--qz-main)}

/* ---------- intro & finale ---------- */
.qz-intro,.qz-final{text-align:center;padding:8px 10px 4px}
.qz-intro p{max-width:560px;margin:10px auto;font-style:italic;color:var(--qz-soft)}
.qz-final .qz-bigscore{font-size:22px;margin:18px 0 6px;color:var(--qz-ink)}
.qz-final .qz-rank{
  font-variant:small-caps;letter-spacing:.12em;font-size:34px;color:var(--qz-deep);
  display:block;margin:8px 0 2px;
}
.qz-final .qz-rankdef{font-style:italic;color:var(--qz-soft);max-width:520px;margin:6px auto 20px}
.qz-final .qz-ladder{list-style:none;padding:0;margin:22px auto 8px;max-width:340px;
  font-size:14px;color:var(--qz-soft)}
.qz-final .qz-ladder li{display:flex;justify-content:space-between;
  border-bottom:1px dotted var(--qz-rule);padding:3px 2px}
.qz-final .qz-ladder li.me{color:var(--qz-deep);font-weight:bold}
.qz-final .qz-ladder .n{font-variant:small-caps;letter-spacing:.06em}

/* ---------- fixed progress bar ---------- */
.qz-progress{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--qz-card);border-top:1px solid var(--qz-rule);
  padding:9px 16px 11px;
}
.qz-progress .qz-ptext{
  max-width:720px;margin:0 auto 5px;display:flex;justify-content:space-between;
  font-variant:small-caps;letter-spacing:.1em;font-size:12.5px;color:var(--qz-soft);
}
.qz-progress .qz-track{
  max-width:720px;margin:0 auto;height:10px;position:relative;
  background:var(--qz-paper);border:1px solid var(--qz-rule);
}
.qz-progress .qz-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg, var(--qz-sea), var(--qz-main));
  transition:width .35s ease;
}
.qz-progress .qz-ticks{position:absolute;inset:0;display:flex}
.qz-progress .qz-ticks span{flex:1;border-right:1px solid rgba(0,0,0,.10)}
.qz-progress .qz-ticks span:last-child{border-right:none}