/* Joculus Studios — wiki-quiznova.css
   Nur für das QuizNova-Wiki: Beispielfragen, spielbare Fragenkarte, Effekt-Knöpfe.
   Farben wie in der App: Hintergrund #0b0f1e, richtig #3ddc84, falsch #ff5c5c,
   Warnung #ffc95c, Gold #ebce90, Feuer #ff7a1a. */

/* ---------- Farbpunkt der Kategorie in Tabellen ---------- */
.qn-dot {
  display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.5em; vertical-align: -0.05em;
  border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b));
}

/* ---------- Beispielfragen ---------- */
.qn-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 18px 0 28px; }
.qn-q {
  margin: 0; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border);
  background: linear-gradient(160deg, color-mix(in srgb, var(--a) 16%, transparent), transparent 60%), var(--surface);
}
.qn-q figcaption { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--a); text-align: left; margin: 0 0 8px; }
.wiki-content .qn-q-text { margin: 0 0 10px; font-weight: 600; color: var(--text); }
.qn-q-answers { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wiki-content .qn-q-answers li { margin: 0; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 0.9rem; }
.wiki-content .qn-q-answers li.ok { background: rgba(61, 220, 132, 0.2); box-shadow: inset 0 0 0 1px #3ddc84; color: var(--text); }
.wiki-content .qn-q-answers li.ok::after { content: " ✓"; color: #3ddc84; font-weight: 700; }
.wiki-content .qn-q-why { margin: 0; font-size: 0.86rem; color: var(--text-faint); }

/* ---------- Spielbare Fragenkarte ---------- */
.qn-play { position: relative; max-width: 460px; margin: 20px 0 30px; }
.qn-stage {
  position: relative; padding: 14px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, color-mix(in srgb, var(--a, #8b7bff) 30%, transparent), transparent 70%), #0b0f1e;
  border: 1px solid var(--border);
}
.qn-hud { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 10px; font-size: 0.84rem; color: var(--text-faint); }
.qn-score b { color: var(--text); font-variant-numeric: tabular-nums; }
.qn-combo {
  padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 0.8rem; white-space: nowrap;
  border: 1px solid #ebce90; background: rgba(255, 209, 102, 0.18); color: #ffe6a5;
}
.qn-combo[hidden] { display: none; }
.qn-combo.fire { border-color: #ff7a1a; background: rgba(255, 122, 26, 0.3); color: #ffd2b0; box-shadow: 0 0 14px rgba(255, 122, 26, 0.6); animation: qn-flicker 0.52s ease-in-out 6; }
.qn-combo.pop { animation: qn-pop 0.4s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes qn-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes qn-flicker { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }

/* Karte mit Kartenstapel dahinter */
.qn-deck { position: relative; margin: 6px 4px 14px; }
.qn-ghost { position: absolute; inset: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.qn-ghost.g1 { transform: translateY(14px) rotate(-4deg) scale(0.94); }
.qn-ghost.g2 { transform: translateY(8px) rotate(3deg) scale(0.97); }
.qn-card {
  position: relative; padding: 18px 16px 16px; border-radius: 18px; min-height: 150px;
  background: linear-gradient(150deg, var(--a), var(--b)); color: #fff;
  transition: transform 0.45s cubic-bezier(.2, .9, .3, 1), opacity 0.3s;
}
.qn-card.gold { box-shadow: 0 0 0 2.5px #ebce90; }
.qn-card.out { transform: translateX(-110%) rotate(-12deg); opacity: 0; }
.qn-card.in { transform: translateX(40%) rotate(8deg); opacity: 0; transition: none; }
.qn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; padding-right: 50px; }
.qn-chip { padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); font-size: 0.75rem; font-weight: 600; }
.qn-chip.gold { background: rgba(235, 206, 144, 0.3); color: #fff4d6; }
.qn-clock {
  position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, 0.3); font: 700 0.95rem var(--font-display); font-variant-numeric: tabular-nums;
}
.qn-clock.frozen { background: rgba(138, 216, 255, 0.35); }
.wiki-content .qn-text { margin: 0; font: 700 1.08rem/1.35 var(--font-display); color: #fff; }
.qn-frame { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); pointer-events: none; overflow: visible; }
.qn-frame rect { fill: none; stroke-width: 4; stroke-linecap: round; }
.qn-frame .track { stroke: rgba(255, 255, 255, 0.10); }

/* Antwortkarten */
.wiki-content .qn-answers { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wiki-content .qn-answers li { margin: 0; }
.qn-answer {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: #fff;
  font: 600 0.95rem var(--font-body); text-align: left; touch-action: manipulation;
  opacity: 0; transform: translateY(40px);
  transition: transform 0.5s cubic-bezier(.25, 1.35, .45, 1), opacity 0.3s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.qn-answer.shown { opacity: 1; transform: none; }
.qn-answer:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.qn-answer:active:not(:disabled) { transform: scale(0.96); }
.qn-answer:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.qn-answer:disabled { cursor: default; }
.qn-letter { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.12); font-size: 0.8rem; }
.qn-mark { margin-left: auto; font-weight: 800; }
.qn-answer.dim { opacity: 0.45; }
.qn-answer.gone { opacity: 0.18; }
.qn-answer.right { background: rgba(61, 220, 132, 0.28); border-color: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.16), 0 0 18px rgba(61, 220, 132, 0.35); animation: qn-right 0.42s cubic-bezier(.3, 1.9, .5, 1); }
.qn-answer.wrong { background: rgba(255, 92, 92, 0.28); border-color: #ff5c5c; box-shadow: 0 0 0 4px rgba(255, 92, 92, 0.16); animation: qn-shake 0.26s linear; }
.qn-answer.reveal { background: rgba(61, 220, 132, 0.18); border-color: #3ddc84; animation: qn-pulse 0.76s ease-in-out 4; }
@keyframes qn-right { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes qn-shake { 0% { transform: translateX(0); } 19% { transform: translateX(-10px); } 38% { transform: translateX(10px); } 58% { transform: translateX(-8px); } 77% { transform: translateX(6px); } 100% { transform: translateX(0); } }
@keyframes qn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.qn-feedback { min-height: 3.2em; margin: 12px 2px 0; font-size: 0.88rem; color: #cfebe7; }
.qn-feedback b { color: #fff; }
.qn-feedback.show { animation: qn-up 0.26s ease-out; }
@keyframes qn-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qn-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.qn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.qn-btn {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); cursor: pointer;
  background: var(--surface); color: var(--text); font: 600 0.88rem var(--font-body);
}
.qn-btn:hover { background: var(--surface-hover); }
.qn-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.qn-btn[aria-pressed="true"] { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--accent); }
.qn-btn:disabled { opacity: 0.45; cursor: default; }
.qn-tools label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--text-faint); }

/* Farbmuster für die Timer-Farben */
.qn-swatch { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 3px; vertical-align: -0.1em; margin-right: 6px; background: var(--c); }

@media (prefers-reduced-motion: reduce) {
  .qn-answer, .qn-card { transition: opacity 0.2s; }
  .qn-answer.right, .qn-answer.wrong, .qn-answer.reveal, .qn-combo.pop, .qn-combo.fire, .qn-feedback.show { animation: none; }
}