/* ============================================================
   GENIOS CREATIVOS · Checkpoint / Quiz por mundo (quiz.js)
   Reto de opción múltiple con feedback inmediato.
   Usa el color del mundo vía --wc. Carga DESPUÉS de genios.css.
   ============================================================ */

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

.quiz-card {
  background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 32px; box-shadow: var(--shadow);
}

.quiz-bar-top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.quiz-track { flex: 1; height: 14px; background: #EAEDFA; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(30,37,71,.12); }
.quiz-fill { height: 100%; width: 0; border-radius: 999px; background: var(--wc, var(--blue)); transition: width .4s cubic-bezier(.34,1.4,.5,1); }
.quiz-count { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink-2); white-space: nowrap; }

.quiz-q {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px;
}
.quiz-q .ava { width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb,var(--wc,var(--blue)) 14%,#fff); border: 2px solid color-mix(in srgb,var(--wc,var(--blue)) 30%,#fff); display: grid; place-items: center; }
.quiz-q .ava img { width: 100%; height: 100%; object-fit: contain; }
.quiz-q h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px,2.6vw,26px); color: var(--ink); line-height: 1.2; }

.quiz-options { display: flex; flex-direction: column; gap: 12px; }
.quiz-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: #F7F9FF; border: 2px solid var(--line); border-radius: var(--r); padding: 16px 18px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--ink); cursor: pointer;
  transition: transform .12s, border-color .16s, background .16s; box-shadow: 0 4px 0 var(--line);
}
.quiz-opt:hover:not(:disabled) { border-color: var(--wc,var(--blue)); transform: translateY(-2px); }
.quiz-opt:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.quiz-opt .key {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--line); font-family: var(--font-display); font-weight: 700; color: var(--ink-2);
}
.quiz-opt.correct { background: color-mix(in srgb,var(--green) 12%,#fff); border-color: var(--green); box-shadow: 0 4px 0 #169A50; }
.quiz-opt.correct .key { background: var(--green); color: #fff; border-color: var(--green); }
.quiz-opt.wrong { background: color-mix(in srgb,var(--red) 9%,#fff); border-color: var(--red); box-shadow: 0 4px 0 #D43344; animation: quizShake .4s; }
.quiz-opt.wrong .key { background: var(--red); color: #fff; border-color: var(--red); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.dim { opacity: .55; }
@keyframes quizShake { 0%,100%{ transform: translateX(0) } 25%{ transform: translateX(-7px) } 75%{ transform: translateX(7px) } }

.quiz-feedback {
  margin-top: 16px; display: none; align-items: flex-start; gap: 12px;
  border-radius: var(--r); padding: 16px 18px; font-weight: 700; font-size: 15px; line-height: 1.5;
}
.quiz-feedback.show { display: flex; }
.quiz-feedback.ok { background: color-mix(in srgb,var(--green) 10%,#fff); border: 2px solid color-mix(in srgb,var(--green) 32%,#fff); color: #1B7A47; }
.quiz-feedback.no { background: color-mix(in srgb,var(--gold) 12%,#fff); border: 2px solid color-mix(in srgb,var(--gold) 32%,#fff); color: #8a5a00; }
.quiz-feedback .em { font-size: 20px; flex-shrink: 0; }
.quiz-feedback .next { margin-left: auto; align-self: center; }

/* Pantalla final */
.quiz-end { text-align: center; padding: 14px 10px; }
.quiz-end .coin {
  width: 130px; height: 130px; margin: 0 auto 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #FF8A00); display: grid; place-items: center; font-size: 58px;
  box-shadow: 0 12px 0 #D98C00, 0 22px 40px -10px rgba(217,140,0,.6); animation: popIn .5s cubic-bezier(.34,1.7,.5,1) both;
}
.quiz-end h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px,3.4vw,36px); color: var(--ink); }
.quiz-end .score { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--wc,var(--blue)); margin: 8px 0 4px; }
.quiz-end p { font-weight: 600; font-size: 16px; color: var(--ink-2); margin-bottom: 22px; }
.quiz-end .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 620px) {
  .quiz-card { padding: 22px 18px; }
  .quiz-feedback { flex-wrap: wrap; } .quiz-feedback .next { margin-left: 0; width: 100%; }
}