/* Modo treino */
body.no-scroll { overflow: hidden; }

.quiz-backdrop {
  --c: var(--primary);
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(27, 26, 46, .55);
  backdrop-filter: blur(6px);
  animation: q-fade .3s var(--ease);
}
.quiz-backdrop.closing { animation: q-fade .3s var(--ease) reverse forwards; }
@keyframes q-fade { from { opacity: 0; } }

.quiz {
  width: min(560px, 100%);
  max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
  background: var(--bg);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: q-pop .45s var(--spring);
}
.closing .quiz { animation: q-pop .3s var(--ease) reverse forwards; }
@keyframes q-pop { from { transform: translateY(30px) scale(.94); opacity: 0; } }

.quiz-top { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.quiz-bar { flex: 1; height: 14px; border-radius: 99px; background: var(--line); overflow: hidden; }
.quiz-bar i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, white));
  transition: width .5s var(--spring);
}
.quiz-count { font-weight: 800; color: var(--muted); font-size: 14px; min-width: 36px; text-align: right; }

.quiz-body { overflow-y: auto; padding: 4px 18px 20px; }
.quiz-card { animation: q-slide .45s var(--ease); }
@keyframes q-slide { from { opacity: 0; transform: translateX(30px); } }
.quiz-kicker { font-weight: 800; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.quiz-q { margin-top: 8px; font-family: var(--font-display); font-size: clamp(24px, 6vw, 30px); font-weight: 800; line-height: 1.15; }
.quiz-play {
  display: grid; place-items: center;
  width: 92px; height: 92px; margin: 14px auto 0;
  border: 0; border-radius: 28px; cursor: pointer;
  background: var(--c); color: #fff;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 65%, black);
  animation: mv-pulse 1.6s ease-in-out infinite;
  transition: transform .2s var(--spring);
}
.quiz-play:active { transform: translateY(4px); }
.quiz-play svg { width: 42px; height: 42px; }

.quiz-opts { display: grid; gap: 10px; margin-top: 20px; }
.quiz-opt {
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 10px 14px;
  border: 0; border-radius: 16px; cursor: pointer;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 var(--line);
  font-weight: 700; font-size: 16.5px; text-align: left; line-height: 1.3;
  animation: mv-in .45s var(--spring) backwards; animation-delay: calc(var(--k) * 60ms);
  transition: transform .15s var(--ease), box-shadow .15s, background .2s;
}
.quiz-opt span {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--bg-2); font-weight: 800; font-size: 14px; color: var(--ink-2);
}
.quiz-opt:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--c), 0 4px 0 color-mix(in srgb, var(--c) 40%, white); }
.quiz-opt:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--c); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.right { background: #E2F8F1; box-shadow: inset 0 0 0 2.5px var(--ok), 0 4px 0 #9EE3CF; animation: q-yes .5s var(--spring); }
.quiz-opt.right span { background: var(--ok); color: #fff; }
.quiz-opt.wrong { background: #FDECEC; box-shadow: inset 0 0 0 2.5px var(--danger), 0 4px 0 #F6C2C3; animation: q-no .45s var(--ease); }
.quiz-opt.wrong span { background: var(--danger); color: #fff; }
@keyframes q-yes { 40% { transform: scale(1.04); } }
@keyframes q-no { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.quiz-feedback:empty { display: none; }
.quiz-feedback {
  display: grid; gap: 12px;
  margin-top: 16px; padding: 16px; border-radius: 18px;
  animation: q-up .4s var(--spring);
}
@keyframes q-up { from { transform: translateY(20px); opacity: 0; } }
.quiz-feedback.ok { background: #E2F8F1; }
.quiz-feedback.no { background: #FDECEC; }
.quiz-feedback strong { font-family: var(--font-display); font-size: 20px; }
.quiz-feedback.ok strong { color: var(--ok); }
.quiz-feedback.no strong { color: var(--danger); }
.quiz-feedback p { font-weight: 700; margin-top: 2px; }
.quiz-feedback p span { color: var(--muted); font-weight: 600; }
.quiz-feedback .btn { --b: var(--c); width: 100%; }
.quiz-feedback.no .btn { --b: var(--danger); }

.quiz-end { text-align: center; padding: 10px 0 6px; position: relative; }
.quiz-ring { width: 150px; height: 150px; margin: 0 auto; transform: rotate(-90deg); }
.quiz-ring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.quiz-ring .bg { stroke: var(--line); }
.quiz-ring .fg { stroke: var(--c); animation: q-ring 1.2s var(--ease) .2s forwards; }
@keyframes q-ring { to { stroke-dashoffset: var(--to); } }
.quiz-score { margin-top: -98px; height: 98px; font-family: var(--font-display); font-size: 36px; }
.quiz-end h3 { margin-top: 18px; font-size: 30px; }
.quiz-sub { color: var(--muted); font-weight: 600; margin-top: 4px; }
.quiz-actions { display: flex; gap: 10px; margin-top: 22px; }
.quiz-actions .btn { flex: 1; --b: var(--c); }
@media (max-width: 420px) { .quiz-actions { flex-direction: column-reverse; } }