/* ==========================================================================
   CryptoAcademia – KVÍZ: a tudásoldal végi minikvíz és a térképen a teljesítés jelzése
   A kvíz kódja: static/js/quiz.js; a sablon: templates/partials/quiz.html.
   SZABÁLY: csak var(--…) a tokens.css-ből, konkrét szín nincs. A bónuszkérdés az Extra tudás szürke, szaggatott
   stílusát kapja, hogy látsszon: onnan származik.
   ========================================================================== */

/* ── A keret: vastag fekete szegély, fekete fejléc-sáv (mint a widgeteknél és a kalkulátoroknál) ── */
.quiz { margin: var(--space-8) 0 0; border: var(--node-border) solid var(--color-ink); background: var(--color-surface); scroll-margin-top: var(--space-4); }
.quiz-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-ink); color: var(--color-text-inverse); }
.quiz-tag { flex: none; padding: 2px var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: var(--tracking-label); background: var(--accent); color: var(--accent-text); }
.quiz-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-heavy); font-variant-caps: all-small-caps; letter-spacing: 0.03em; line-height: var(--lh-tight); }
.quiz-head-best { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text-dim); }
.quiz-head-best[hidden] { display: none; }
.quiz-best-pct.is-pass { color: var(--color-text-inverse); }
.quiz-stars { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.qstar { display: inline-block; flex: none; width: 1.35em; height: 1.35em; overflow: visible; vertical-align: -0.3em; }
.qstar polygon { fill: var(--quiz-star-gold); stroke: var(--color-ink); stroke-width: var(--line-medium); vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.qstar.is-empty polygon { fill: transparent; }

.quiz-body { display: block; padding: var(--space-5) var(--space-6) var(--space-6); }
.quiz-loading { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); }

/* ── Kezdőlap ── */
.quiz-rule { margin: 0 0 var(--space-2); font-size: var(--fs-md); line-height: 1.5; }
.quiz-rule + .quiz-rule { color: var(--color-text-muted); font-size: var(--fs-base); }

/* ── Gombok ── */
.quiz-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.quiz-actions:empty { display: none; }
.quiz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--space-2) var(--space-5);
  font: inherit; font-size: var(--fs-base); font-weight: var(--fw-heavy); letter-spacing: 0.02em;
  color: var(--color-text); background: var(--color-surface);
  border: var(--line-thick) solid var(--color-ink); border-radius: var(--radius);
  cursor: pointer; transition: background-color var(--dur-fast), transform var(--dur-fast);
}
.quiz-btn:hover { background: var(--color-surface-sunken); }
.quiz-btn.is-primary { background: var(--accent); color: var(--accent-text); }
.quiz-btn.is-primary:hover { background: var(--accent-hover); }
.quiz-btn:active { transform: translateY(2px); }
.quiz-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.quiz-btn:focus-visible, .quiz-answer:focus-visible { outline: var(--line-thick) solid var(--accent); outline-offset: 3px; }

/* ── Kérdés ── */
.quiz-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--fs-xs); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-muted); }
.quiz-bonus-tag { padding: 2px var(--space-2); background: var(--extra-accent); color: var(--extra-text); }
.quiz-meta-note { text-transform: none; letter-spacing: 0; font-weight: var(--fw-bold); }

/* a fogyó idővonal */
.quiz-timer { height: var(--quiz-timer-h); margin: var(--space-3) 0 var(--space-4); background: var(--color-surface-sunken); border: var(--line-thin) solid var(--color-border); overflow: hidden; }
.quiz-timer-bar { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: left center; transition: background-color var(--dur-slow); }
.quiz-timer.is-low .quiz-timer-bar { background: var(--color-red); }

.quiz-question { margin: 0; font-size: calc(var(--fs-md) + 2px); font-weight: var(--fw-bold); line-height: 1.45; }
.quiz-hint { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.quiz-question code, .quiz-answer code, .quiz-why code, .quiz-explain code { font-family: var(--font-mono); font-size: 0.86em; padding: 0 4px; background: var(--color-surface-sunken); border: var(--line-thin) solid var(--color-border); overflow-wrap: anywhere; }

/* a válaszok: asztalon 2 × 2, mobilon egymás alatt */
.quiz-answers { list-style: none; display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-5) 0 0; padding: 0; }
.quiz-answer-item { display: flex; flex-direction: column; min-width: 0; }
.quiz-answer {
  display: flex; align-items: flex-start; gap: var(--space-3); flex: 1 1 auto;
  width: 100%; min-height: 60px; padding: var(--space-3) var(--space-4);
  font: inherit; font-size: var(--fs-base); line-height: 1.45; text-align: left;
  color: var(--color-text); background: var(--color-surface);
  border: var(--line-thick) solid var(--color-ink); border-radius: var(--radius);
  cursor: pointer; transition: background-color var(--dur-fast), transform var(--dur-fast), opacity var(--dur-base);
}
.quiz-answer:hover:not(:disabled) { background: var(--accent-faded); box-shadow: inset 0 calc(-1 * var(--line-thick)) 0 var(--accent); }
.quiz-answer:active:not(:disabled) { transform: translateY(2px); }
.quiz-answer:disabled { cursor: default; }
.quiz-key {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -2px;
  font-size: var(--fs-sm); font-weight: var(--fw-heavy);
  background: var(--color-surface-sunken); border: var(--line-medium) solid var(--color-ink);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.quiz-answer-text { min-width: 0; padding-top: 1px; overflow-wrap: break-word; }
/* többválaszos kérdés: a betű négyzete a jelölőnégyzet; bejelölve kiemelőszínű */
.quiz-answer[aria-pressed="true"] { background: var(--accent-faded-strong); }
.quiz-answer[aria-pressed="true"] .quiz-key { background: var(--accent); color: var(--accent-text); }

/* kiértékelés után */
.quiz-answer-item.is-correct .quiz-answer { border-color: var(--color-green); background: repeating-linear-gradient(135deg, var(--green-hatch) 0 6px, var(--color-surface) 6px 12px); }
.quiz-answer-item.is-correct .quiz-key { background: var(--color-green); color: var(--color-text-inverse); border-color: var(--color-green); }
.quiz-answer-item.is-missed .quiz-answer { border-color: var(--color-green); border-style: dashed; background: repeating-linear-gradient(135deg, var(--green-hatch) 0 6px, var(--color-surface) 6px 12px); }
.quiz-answer-item.is-missed .quiz-key { border-color: var(--color-green); color: var(--color-green); background: var(--color-surface); }
.quiz-answer-item.is-wrong .quiz-answer { border-color: var(--color-red); background: repeating-linear-gradient(135deg, var(--red-hatch) 0 6px, var(--color-surface) 6px 12px); }
.quiz-answer-item.is-wrong .quiz-key { background: var(--color-red); color: var(--color-text-inverse); border-color: var(--color-red); }
.quiz-answer-item.is-dim .quiz-answer { opacity: 0.55; background: repeating-linear-gradient(135deg, var(--color-surface-sunken) 0 6px, var(--color-surface) 6px 12px); }
.quiz-why { display: grid; grid-template-rows: 1fr; font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text); background: var(--color-surface-alt); border: var(--line-thick) solid var(--color-ink); border-top: 0; animation: quiz-unfold var(--dur-slow) ease-out both; }
.quiz-why-in { min-height: 0; overflow: hidden; padding: var(--space-2) var(--space-4) var(--space-3); }
/* a magyarázat kinyílik (lefelé nyúlik, közben előtűnik), a visszajelzés sávja finoman becsúszik */
@keyframes quiz-unfold { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
@keyframes quiz-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.quiz-feedback:not(:empty) { animation: quiz-slide-in var(--dur-slow) ease-out both; }
.quiz-why[hidden] { display: none; }
.quiz-answer-item.is-correct .quiz-why, .quiz-answer-item.is-missed .quiz-why { border-color: var(--color-green); }
.quiz-answer-item.is-missed .quiz-why { border-style: dashed; }

.quiz-feedback { margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border-left: var(--node-border) solid var(--color-border-strong); background: var(--color-surface-alt); }
.quiz-feedback:empty { display: none; }
.quiz-feedback.is-ok { border-left-color: var(--color-green); background: var(--green-faded); }
.quiz-feedback.is-bad { border-left-color: var(--color-red); background: var(--color-red-faded); }
.quiz-verdict { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.quiz-explain { margin: var(--space-2) 0 0; font-size: var(--fs-sm); line-height: 1.55; }

/* bónuszkérdés: az Extra tudás szürke, szaggatott stílusa */
.quiz-q.is-bonus { padding: var(--space-4) var(--space-5) var(--space-5); border: var(--line-medium) dashed var(--extra-accent); background: var(--extra-faded); }
.quiz-q.is-bonus .quiz-timer-bar { background: var(--extra-accent); }
.quiz-q.is-bonus .quiz-timer.is-low .quiz-timer-bar { background: var(--color-red); }

/* ── Eredmény ── */
.quiz-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.quiz-score b { font-size: var(--fs-xxl); font-weight: var(--fw-black); line-height: 1; font-variant-numeric: tabular-nums; }
.quiz-score span { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.quiz-result.is-pass .quiz-score b { color: var(--color-green); }
.quiz-result-verdict { margin: var(--space-3) 0 0; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.quiz-result-bonus { display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-bold); border: var(--line-medium) dashed var(--extra-accent); background: var(--extra-faded); }
.quiz-result-bonus .quiz-stars { font-size: var(--fs-md); }
.quiz-result-best { margin: var(--space-3) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.quiz-result-best.is-new { color: var(--accent-link); font-weight: var(--fw-heavy); }
.quiz-store-note { margin: var(--space-4) 0 0; font-size: var(--fs-xs); color: var(--color-text-dim); }

@media (max-width: 900px) {
  .quiz-answers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .quiz { margin-top: var(--space-7); }
  .quiz-body { padding: var(--space-4) var(--space-4) var(--space-5); }
  .quiz-head-best { margin-left: 0; width: 100%; }
  .quiz-question { font-size: var(--fs-md); }
  .quiz-answer { min-height: 52px; padding: var(--space-3); }
  .quiz-actions .quiz-btn { flex: 1 1 auto; }
  .quiz-q.is-bonus { padding: var(--space-3) var(--space-3) var(--space-4); }
}

/* ── A térképen: a teljesített kártya kiszíneződik (a saját kiemelőszínének halvány változata), a bónuszcsillag (★) beljebb ül a sarokban ── */
.node.is-quiz-done { background: linear-gradient(var(--accent-faded-strong), var(--accent-faded-strong)), var(--color-surface); }
.node > .node-quiz {
  grid-area: auto;   /* a kártya rácsában is a sarokhoz igazodjon, ne a tartalom területéhez */
  /* a jelzés a kártya felső élén ül (félig kilóg), így semmilyen méretű kártyánál nem takarja a címet */
  position: absolute; z-index: 2; top: calc(-1 * (var(--node-border) / 2 + var(--quiz-pct-h) / 2)); right: var(--quiz-badge-inset);
  display: flex; pointer-events: none;
}
/* két cella egymás mellett, közös kerettel: [★ négyzet][legjobb százalék]; a százalék cellája fix méretű */
.node-quiz > span {
  box-sizing: border-box; height: var(--quiz-pct-h); display: grid; place-items: center;
  background: var(--color-surface); border: var(--line-medium) solid var(--color-ink);
}
.node-quiz > .node-quiz-star { background: var(--quiz-gold-pale); }
.node-quiz-star { width: var(--quiz-pct-h); }
.node-quiz-star .qstar { width: 20px; height: 20px; }
.node-quiz-pct { width: var(--quiz-pct-w); font-size: var(--fs-sm); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; line-height: 1; color: var(--color-text); }
.node-quiz > .node-quiz-star.is-empty { background: var(--color-surface); }   /* még nincs meg a csillag: fehér cella, üres csillag */
.node-quiz-pct.is-perfect { background: var(--quiz-gold-pale); }
.node-quiz-star + .node-quiz-pct { margin-left: calc(-1 * var(--line-medium)); }   /* a két keret egybeolvad */
/* admin módban a sarkokban a kezelőgombok vannak, dia módban a bélyegképek: ott nem kell a jelzés */
html.is-admin .node-quiz, html.slides-on .node-quiz { display: none; }

/* ── Teljesített kvíz: az egész doboz kiszíneződik (a kártya kiemelőszínével) ── */
.quiz.is-passed { background: linear-gradient(var(--accent-faded-strong), var(--accent-faded-strong)), var(--color-surface); }
.quiz.is-passed .quiz-head { background: var(--accent); color: var(--accent-text); }
.quiz.is-passed .quiz-tag { background: var(--color-ink); color: var(--color-text-inverse); }
.quiz.is-passed .quiz-head-best, .quiz.is-passed .quiz-best-pct.is-pass { color: var(--accent-text); }
.quiz.is-passed