/* quiz.css — Styles für das Spiel "quiz" (System Architektur V1.1) */

  .quiz-options {
    display: grid; gap: 10px; margin-top: 14px;
  }
  .quiz-option {
    background: var(--paper);
    border: var(--stroke-thick) solid var(--ink);
    padding: 13px 18px;
    border-radius: 16px;
    cursor: pointer;
    font-family: 'Patrick Hand', sans-serif;
    font-size: 18px;
    text-align: left;
    transition: all 0.15s;
    color: var(--ink);
  }
  .quiz-option:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
  /* Eigene Auswahl klar sichtbar (vorher fehlte diese Regel komplett). */
  .quiz-option.selected {
    background: var(--ink); color: var(--paper);
  }
  /* Richtige Antwort leuchtet grün auf. */
  .quiz-option.correct {
    background: #37c871; border-color: #37c871; color: #0b2a16;
    box-shadow: 0 0 18px rgba(55, 200, 113, 0.55);
  }
  .quiz-option.wrong {
    background: var(--paper);
    text-decoration: line-through;
    opacity: 0.6;
  }
  /* Avatare der Spieler, die eine Option gewählt haben (Review/Reveal). */
  .quiz-choosers { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .quiz-chooser {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--ink); object-fit: cover; background: var(--paper);
    animation: chooserIn .35s cubic-bezier(.34,1.56,.64,1) backwards;
  }
  .quiz-choosers .quiz-chooser:nth-child(2) { animation-delay: .07s; }
  .quiz-choosers .quiz-chooser:nth-child(3) { animation-delay: .14s; }
  .quiz-choosers .quiz-chooser:nth-child(4) { animation-delay: .21s; }
  .quiz-choosers .quiz-chooser:nth-child(n+5) { animation-delay: .28s; }
  @keyframes chooserIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  /* Animationen: Pop bei eigener Auswahl, Puls auf der richtigen Antwort. */
  .quiz-option.selected { animation: optPop .28s cubic-bezier(.34,1.56,.64,1); }
  @keyframes optPop {
    0% { transform: scale(.96); }
    55% { transform: scale(1.03); }
    100% { transform: scale(1); }
  }
  .quiz-option.correct { animation: correctPulse .65s ease-in-out 2; }
  @keyframes correctPulse {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.03); }
  }