/* Wonder Family Encyclopedia Quiz -- self-contained styles, scoped variable names
   so this plugin never collides with the active theme's own CSS variables. */

.wfq-qcard, .wfq-progress {
  --wfq-paper: #FBF7F0;
  --wfq-paper-card: #FFFFFF;
  --wfq-paper-sunk: #F3ECDD;
  --wfq-ink: #2E2A22;
  --wfq-ink-soft: #6B6255;
  --wfq-line: #E3D9C6;
  --wfq-rust: #A4634B;
  --wfq-rust-wash: #F5E7E1;
  --wfq-shadow: 0 2px 4px rgba(46,42,34,0.06), 0 12px 28px rgba(46,42,34,0.08);

  --wfq-explorer: #5B8C4E; --wfq-explorer-wash: #E7F0E1; --wfq-explorer-deep: #3E6634;
  --wfq-challenger: #D07A2E; --wfq-challenger-wash: #FBEADA; --wfq-challenger-deep: #A85C1E;
  --wfq-master: #B8892E; --wfq-master-wash: #F8EDD6; --wfq-master-deep: #8C6620;
}

@media (prefers-color-scheme: dark) {
  .wfq-qcard, .wfq-progress {
    --wfq-paper: #221F19; --wfq-paper-card: #2C2820; --wfq-paper-sunk: #2F2B23;
    --wfq-ink: #F1EAD9; --wfq-ink-soft: #B7AD98; --wfq-line: #443E32;
    --wfq-rust: #D89A80; --wfq-rust-wash: #3A2B25;
    --wfq-explorer: #8FC77B; --wfq-explorer-wash: #293823; --wfq-explorer-deep: #B6E0A3;
    --wfq-challenger: #E89A55; --wfq-challenger-wash: #3A2A1B; --wfq-challenger-deep: #F0B27E;
    --wfq-master: #DAB65E; --wfq-master-wash: #382F1B; --wfq-master-deep: #EAC97E;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap');

.wfq-demo-shell { display: flex; justify-content: center; padding: 10px 0 6px; }

.wfq-progress { display: flex; gap: 4px; max-width: 420px; margin: 0 auto 10px; }
.wfq-progress .seg { flex: 1; height: 6px; border-radius: 3px; background: var(--wfq-line); }
.wfq-progress .seg.on { background: var(--wfq-explorer); }

.wfq-qcard {
  width: 100%; max-width: 420px; border-radius: 26px; overflow: hidden;
  box-shadow: var(--wfq-shadow); background: var(--wfq-paper-card);
  border: 2px solid var(--wfq-line); transition: border-color .3s;
  font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
}
.wfq-qcard.explorer { border-color: var(--wfq-explorer); }
.wfq-qcard.challenger { border-color: var(--wfq-challenger); }
.wfq-qcard.master { border-color: var(--wfq-master); }

.wfq-qhead { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; transition: background .3s; }
.wfq-qcard.explorer .wfq-qhead { background: var(--wfq-explorer-wash); }
.wfq-qcard.challenger .wfq-qhead { background: var(--wfq-challenger-wash); }
.wfq-qcard.master .wfq-qhead { background: var(--wfq-master-wash); }

.wfq-tierpill {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12px;
  padding: 5px 13px; border-radius: 20px; color: #fff; transition: background .3s;
}
.wfq-qcard.explorer .wfq-tierpill { background: var(--wfq-explorer); }
.wfq-qcard.challenger .wfq-tierpill { background: var(--wfq-challenger); }
.wfq-qcard.master .wfq-tierpill { background: var(--wfq-master); }

.wfq-catpill {
  font-size: 11px; font-weight: 600; color: var(--wfq-ink-soft);
  background: var(--wfq-paper-card); border: 1px solid var(--wfq-line);
  border-radius: 20px; padding: 4px 10px;
}

.wfq-qbody { padding: 16px 18px 20px; }
.wfq-qtext {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px;
  line-height: 1.35; margin: 10px 0 16px; color: var(--wfq-ink); text-align: center;
}

.wfq-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 6px; }
.wfq-ans {
  font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 12.5px;
  border-radius: 14px; border: 2px solid var(--wfq-line); padding: 11px 10px;
  display: flex; align-items: center; gap: 8px; background: var(--wfq-paper-sunk);
  color: var(--wfq-ink); cursor: pointer; text-align: left; width: 100%;
  transition: transform .15s, border-color .2s, background .2s, box-shadow .2s;
}
.wfq-ans:hover:not(.locked) { transform: translateY(-2px); border-color: var(--wfq-explorer); }
.wfq-ans:active:not(.locked) { transform: translateY(0); }
.wfq-ans .letter {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--wfq-line);
  display: flex; align-items: center; justify-content: center; font-size: 10.5px;
  flex-shrink: 0; background: var(--wfq-paper-card); transition: background .2s, border-color .2s, color .2s;
}
.wfq-ans.locked { cursor: default; }
.wfq-ans.correct { border-color: var(--wfq-explorer); background: var(--wfq-paper-card); box-shadow: 0 0 0 3px rgba(91,140,78,0.15); }
.wfq-ans.correct .letter { background: var(--wfq-explorer); border-color: var(--wfq-explorer); color: #fff; }
.wfq-ans.wrong { border-color: var(--wfq-rust); background: var(--wfq-rust-wash); opacity: 0.75; }
.wfq-ans.wrong .letter { background: var(--wfq-rust); border-color: var(--wfq-rust); color: #fff; }
.wfq-ans.dim { opacity: 0.45; }

/* Did You Know panel -- grid-rows animation, no magic max-height numbers */
.wfq-dyk-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; margin-top: 8px; }
.wfq-dyk-wrap.open { grid-template-rows: 1fr; }
.wfq-dyk-inner { overflow: hidden; }
.wfq-dyk { border-radius: 16px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; opacity: 0; transition: opacity .3s .1s; }
.wfq-dyk-wrap.open .wfq-dyk { opacity: 1; }
.wfq-qcard.explorer .wfq-dyk { background: var(--wfq-explorer-wash); border: 1.5px dashed var(--wfq-explorer); }
.wfq-qcard.challenger .wfq-dyk { background: var(--wfq-challenger-wash); border: 1.5px dashed var(--wfq-challenger); }
.wfq-qcard.master .wfq-dyk { background: var(--wfq-master-wash); border: 1.5px dashed var(--wfq-master); }
.wfq-lbl { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 11.5px; margin-bottom: 4px; }
.wfq-qcard.explorer .wfq-lbl { color: var(--wfq-explorer-deep); }
.wfq-qcard.challenger .wfq-lbl { color: var(--wfq-challenger-deep); }
.wfq-qcard.master .wfq-lbl { color: var(--wfq-master-deep); }
.wfq-dyk p { margin: 0; color: var(--wfq-ink); }

.wfq-nextrow { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease .1s; }
.wfq-nextrow.open { grid-template-rows: 1fr; margin-top: 14px; }
.wfq-nextrow-inner { overflow: hidden; text-align: center; }
.wfq-nextbtn {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px;
  border: none; border-radius: 14px; padding: 11px 26px;
  background: var(--wfq-ink); color: var(--wfq-paper); cursor: pointer;
}
.wfq-nextbtn:hover { opacity: 0.9; }

.wfq-score-summary {
  text-align: center; font-family: 'Baloo 2', sans-serif; padding: 20px 10px;
}
.wfq-score-summary .big { font-size: 32px; font-weight: 800; color: var(--wfq-explorer-deep); }

@media (prefers-reduced-motion: reduce) {
  .wfq-ans, .wfq-dyk-wrap, .wfq-dyk, .wfq-nextrow { transition: none !important; }
}
.wfq-image-stage {
  position: relative;
  margin: 0 18px 4px;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--wfq-paper-sunk);
  display: none; /* shown via JS only when a question actually has images */
}
.wfq-image-stage.has-images { display: block; }

.wfq-qimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.wfq-qimg--group  { opacity: 1; transform: scale(1); }
.wfq-qimg--reveal { opacity: 0; transform: scale(1.18); }

/* Triggered by adding .revealed to the stage when an answer is locked */
.wfq-image-stage.revealed .wfq-qimg--group  { opacity: 0; transform: scale(1.08); }
.wfq-image-stage.revealed .wfq-qimg--reveal { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .wfq-qimg { transition: none !important; }
}