/* ==========================================================================
   Lockace — Quiz chronométré (Lot 4.2)

   Complément de `quiz.css`, jamais un remplacement : une page de quiz éclair
   charge les deux, et une page de quiz ordinaire n'a aucune raison de charger
   celle-ci. Tout ce qui est ici n'existe que lorsque le joueur a demandé le
   chrono — l'écran d'accueil, le cadran, la correction au temps écoulé, la
   course et son record.

   Deux règles tenues partout dans ce fichier :

   1. **aucune information par la seule couleur** (plan §13). Le passage en
      urgence change la teinte, mais ce qui informe reste le nombre affiché ;
      la question manquée porte un pictogramme et une phrase, pas juste un
      cadre rouge.
   2. **l'animation n'est jamais nécessaire.** Sous `prefers-reduced-motion`,
      la barre saute d'un quart de seconde à l'autre et rien ne palpite : on
      perd du confort, jamais une information.
   ========================================================================== */

/* Écran d'accueil : la règle du jeu et le record
   -------------------------------------------------------------------------- */

/* Dite avant le départ, pas découverte en jeu. Cadre discret : c'est une règle,
   pas un avertissement — le ton du site ne fait pas peur pour faire jouer. */
.quiz-chrono-rule {
  margin-block: var(--space-4);
  margin-inline: auto;
  max-width: 42rem;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-tertiary);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: left;
}

/* Le record de l'appareil. Doré comme les succès : c'est la même famille de
   récompense, et la seule personne battue est soi-même. */
.quiz-record {
  margin-block: var(--space-4) var(--space-5);
  color: var(--color-tertiary-soft);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}

.quiz-record-icon {
  font-style: normal;
}

/* Le cadran
   -------------------------------------------------------------------------- */

.quiz-timer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Chiffres tabulaires : sans eux, la largeur du nombre change à chaque seconde
   et la barre tressaute de quelques pixels tout au long du rebours. */
.quiz-timer-value {
  flex: 0 0 auto;
  min-width: 3.5ch;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-secondary-soft);
  text-align: right;
}

.quiz-timer-track {
  flex: 1 1 auto;
  height: 0.65rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

/* La barre descend, là où celle de la progression monte : les deux sont
   voisines à l'écran, et une seule direction pour deux sens serait illisible. */
.quiz-timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-soft));
  border-radius: var(--radius-pill);
}

/* Dernières secondes. Le rouge alerte, le nombre informe : quelqu'un qui ne
   distingue pas les deux teintes lit « 3 s » aussi bien que les autres. */
.quiz-timer.is-urgent .quiz-timer-value {
  color: var(--color-error);
}

.quiz-timer.is-urgent .quiz-timer-bar {
  background: var(--color-error);
}

@media (prefers-reduced-motion: no-preference) {
  .quiz-timer-bar {
    /* `linear`, et exactement la cadence du rebours (cf. quiz-timer.js) : la
       barre glisse alors d'un tic au suivant sans jamais ni rattraper ni
       devancer le temps réel. */
    transition: width 250ms linear, background-color var(--transition-fast);
  }

  .quiz-timer.is-urgent .quiz-timer-value {
    animation: quiz-timer-pulse 1s ease-in-out infinite;
  }
}

/* Battement lent et sans clignotement : l'opacité ne descend pas sous 0,55 et
   le cycle reste à 1 Hz, loin du seuil de photosensibilité (plan §13). */
@keyframes quiz-timer-pulse {
  50% {
    opacity: 0.55;
  }
}

/* Correction : la question emportée par le temps
   -------------------------------------------------------------------------- */

/* Distincte de la mauvaise réponse : même absence de point, mais ce n'est pas
   la même chose à lire. L'ambre plutôt que le rouge — on n'a pas échoué, on
   n'a pas eu le temps. */
.quiz-feedback.is-expired {
  border-color: var(--color-warning);
}

.quiz-feedback.is-expired .quiz-feedback-status {
  color: var(--color-warning);
}

/* Résultat : la course et son record
   -------------------------------------------------------------------------- */

.quiz-run {
  margin-block: var(--space-4) var(--space-5);
  margin-inline: auto;
  max-width: 34rem;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.quiz-run-time {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-secondary-soft);
}

.quiz-run-missed {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.quiz-run-record {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Record battu : c'est le moment qu'on est venu chercher, il se voit. */
.quiz-run-record.is-new {
  color: var(--color-tertiary-soft);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .quiz-run-record.is-new {
    animation: quiz-record-appear 360ms ease;
  }
}

@keyframes quiz-record-appear {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}