/* ============================================================================
   QZR vNext — Écran de jeu solo « light HD » (cœur question/réponse)
   ----------------------------------------------------------------------------
   Reskin de la surface de jeu partagée (#viewPlayground : entête, timer, carte
   question, tuiles réponses, mascotte) vers les tokens vNext (teal, énergie XP,
   tuiles .ans du mockup solo-play). Le thème realtime existant (body.theme-1)
   est déjà clair mais orange (#ff7a45) + cartes "glass" ; on le re-teinte.

   SCOPE : #quizRealTimeContainer.qzr-play-hd — classe posée par toggleView()
   uniquement quand le playground s'affiche EN MODE SOLO (isSoloEngineMode).
   Le multi-joueur garde son rendu actuel jusqu'à Feature 6 (qui réutilisera
   cette même CSS en posant la classe). Chargé APRÈS style-realtime.css +
   vnext-tokens.css + vnext-mascot.css.
   ============================================================================ */

/* ── Surface : fond clair vNext (bat body.theme-1 #quizRealTimeContainer) ──── */
body.theme-1 #quizRealTimeContainer.qzr-play-hd {
  background: var(--qz-screen, #F1FAF6);
  color: var(--qz-text, #06342A);
}

/* Zone de jeu : colonne lisible, centrée */
#quizRealTimeContainer.qzr-play-hd #viewPlayground {
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
}

/* ── Entête : badge n° de question (eyebrow) + timer ───────────────────────── */
#quizRealTimeContainer.qzr-play-hd .playground-header {
  margin-bottom: var(--qz-4);
  gap: var(--qz-3);
}
body.theme-1 #quizRealTimeContainer.qzr-play-hd .question-number-tracket {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--qz-accent-soft, #E6F5EF) !important;
  color: var(--qz-accent-ink, #0F6E56) !important;
  border: none !important;
  border-radius: var(--qz-r-pill, var(--qz-r-pill));
  padding: var(--qz-2) var(--qz-3);
  font-size: .78rem;
  font-weight: var(--qz-fw-strong, 500);
  letter-spacing: 0;
  text-transform: none;
}
#quizRealTimeContainer.qzr-play-hd .question-number-tracket i { color: var(--qz-accent, #16A87A); }

/* ── Chips de stats (Série / XP) — mockup solo frame 1 ─────────────────────── */
#quizRealTimeContainer.qzr-play-hd .qzr-play-hud {
  display: flex;
  gap: 8px;
  margin: -4px 0 14px;
  /* `flex: 0 0 100%` meant "full width, own line" — a ROW assumption. The
     playground is a COLUMN flex container, where flex-basis is the HEIGHT, so
     this chip row claimed 100% of the playground and, with flex-shrink 0,
     refused to give any back: the scroller below it collapsed to 8px.

     It only stayed harmless while the playground had no definite height (an
     indefinite basis resolves to content). The moment the height was bounded to
     fix the scroll, it took everything. `0 0 auto` + width keeps the intent —
     its own full-width line, sized to its content. */
  flex: 0 0 auto;
  width: 100%;
}
#quizRealTimeContainer.qzr-play-hd .qzr-play-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: var(--qz-fw-strong, 500);
  color: var(--qz-muted, #5E8A7C);
  background: var(--qz-surface, #FFFFFF);
  border: 1px solid var(--qz-line, #DCEFE8);
  padding: var(--qz-1) var(--qz-3);
  border-radius: var(--qz-r-pill, var(--qz-r-pill));
}
#quizRealTimeContainer.qzr-play-hd .qzr-play-chip--streak i { color: #E0812A; }
#quizRealTimeContainer.qzr-play-hd .qzr-play-chip--xp i { color: var(--qz-alert, #BA7517); }

/* ── Feedback mascotte (retint teal/erreur, mécanique conservée) ───────────── */
#quizRealTimeContainer.qzr-play-hd .qzr-m-bubble--success {
  background: var(--qz-accent-soft, #E6F5EF);
  border-color: var(--qz-accent, #16A87A);
  color: var(--qz-accent-ink, #0F6E56);
}
#quizRealTimeContainer.qzr-play-hd .qzr-m-bubble--success::after {
  background: var(--qz-accent-soft, #E6F5EF);
  border-left-color: var(--qz-accent, #16A87A);
  border-bottom-color: var(--qz-accent, #16A87A);
}
#quizRealTimeContainer.qzr-play-hd .qzr-m-bubble--error {
  background: var(--qz-error-soft, #FCEDEC);
  border-color: var(--qz-error, #E24B4A);
  color: #7F1D1D;
}
#quizRealTimeContainer.qzr-play-hd .qzr-m-bubble--error::after {
  background: var(--qz-error-soft, #FCEDEC);
  border-left-color: var(--qz-error, #E24B4A);
  border-bottom-color: var(--qz-error, #E24B4A);
}

/* ── Timer circulaire : re-teinte teal (garde la forme) ────────────────────── */
#quizRealTimeContainer.qzr-play-hd .timer-circle-svg {
  filter: none;
}
body.theme-1 #quizRealTimeContainer.qzr-play-hd .timer-circle-track {
  stroke: var(--qz-line-strong, #CDE7DC);
}
#quizRealTimeContainer.qzr-play-hd .timer-circle-progress {
  stroke: var(--qz-accent, #16A87A) !important;
}
body.theme-1 #quizRealTimeContainer.qzr-play-hd .timer-circle-wrap .timer-text {
  color: var(--qz-accent-ink, #0F6E56);
  text-shadow: none;
  font-weight: var(--qz-fw-strong, 500);
}
#quizRealTimeContainer.qzr-play-hd .timer-circle-wrap.urgent .timer-circle-progress {
  stroke: var(--qz-error, #E24B4A) !important;
}
body.theme-1 #quizRealTimeContainer.qzr-play-hd .timer-circle-wrap.urgent .timer-text {
  color: var(--qz-error, #E24B4A);
}

/* ── Objectifs (HUD) : cartes claires ──────────────────────────────────────── */
body.theme-1 #quizRealTimeContainer.qzr-play-hd .realtime-goal-hud-card {
  background: var(--qz-surface, #FFFFFF) !important;
  border: 1px solid var(--qz-line, #DCEFE8) !important;
  border-radius: var(--qz-r-card, 16px);
}

/* ── Carte question ────────────────────────────────────────────────────────── */
body.theme-1 #quizRealTimeContainer.qzr-play-hd .question-box {
  background: var(--qz-surface, #FFFFFF);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: 18px;
  padding: var(--qz-4) var(--qz-4) var(--qz-5);
  text-align: left;
  margin-bottom: var(--qz-4);
  box-shadow: none;
}
body.theme-1 #quizRealTimeContainer.qzr-play-hd .question-title {
  font-size: 1.3rem;
  font-weight: var(--qz-fw-strong, 500);
  color: var(--qz-text, #06342A);
  line-height: 1.32;
  margin: 0;
}

/* ── Tuiles réponses (.ans du mockup) ──────────────────────────────────────── */
#quizRealTimeContainer.qzr-play-hd .answers-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
body.theme-1 #quizRealTimeContainer.qzr-play-hd .answer-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--qz-surface, #FFFFFF);
  border: 2px solid var(--qz-line, #DCEFE8);
  border-radius: 14px;
  padding: var(--qz-3) var(--qz-4);
  font-size: .95rem;
  font-weight: var(--qz-fw-strong, 500);
  color: var(--qz-text, #06342A);
  text-align: left;
  transition: border-color var(--qz-dur-ui) ease, background var(--qz-dur-ui) ease, opacity var(--qz-dur-ui) ease;
}
#quizRealTimeContainer.qzr-play-hd .answer-btn > span {
  flex: 1;
  min-width: 0;
  color: var(--qz-text, #06342A);
  font-weight: var(--qz-fw-strong, 500);
  line-height: 1.3;
}
body.theme-1 #quizRealTimeContainer.qzr-play-hd .answer-key {
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--qz-accent-soft, #E6F5EF);
  color: var(--qz-accent-ink, #0F6E56);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: var(--qz-fw-strong, 500);
}
/* Gated on real hover. This rule and .selected below are the SAME accent border
   and the SAME accent-soft fill, so a hover stuck on a touch device is pixel
   for pixel a selected answer — the next question appeared to open with an
   option already chosen. */
@media (hover: hover) {
  #quizRealTimeContainer.qzr-play-hd .answer-btn:hover:not(.disabled) {
    transform: none;
    border-color: var(--qz-accent, #16A87A);
    background: var(--qz-accent-soft, #E6F5EF);
  }
}

/* Sélection (avant révélation) */
body.theme-1 #quizRealTimeContainer.qzr-play-hd .answer-btn.selected {
  border-color: var(--qz-accent, #16A87A);
  background: var(--qz-accent-soft, #E6F5EF);
}
#quizRealTimeContainer.qzr-play-hd .answer-btn.selected .answer-key {
  background: var(--qz-accent, #16A87A);
  color: #FFFFFF;
}

/* Révélation : bonne réponse (teal) */
#quizRealTimeContainer.qzr-play-hd .answer-btn.correct {
  background: var(--qz-success-bg, #ECF9F3) !important;
  border-color: var(--qz-accent, #16A87A) !important;
  animation: none !important;
}
#quizRealTimeContainer.qzr-play-hd .answer-btn.correct .answer-key {
  background: var(--qz-accent, #16A87A);
  color: #FFFFFF;
}
#quizRealTimeContainer.qzr-play-hd .answer-btn.correct::after {
  content: "\f058"; /* fa-check-circle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: auto;
  font-size: 1rem;
  color: var(--qz-accent, #16A87A);
}

/* Révélation : mauvaise réponse choisie (rouge) */
#quizRealTimeContainer.qzr-play-hd .answer-btn.wrong {
  background: var(--qz-error-bg, #FCEDEC) !important;
  border-color: var(--qz-error, #E24B4A) !important;
  opacity: 1 !important;
  animation: none !important;
}
#quizRealTimeContainer.qzr-play-hd .answer-btn.wrong .answer-key {
  background: var(--qz-error, #E24B4A);
  color: #FFFFFF;
}
#quizRealTimeContainer.qzr-play-hd .answer-btn.wrong::after {
  content: "\f057"; /* fa-times-circle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: auto;
  font-size: 1rem;
  color: var(--qz-error, #E24B4A);
}

/* Révélation : autres tuiles atténuées (dim) */
#quizRealTimeContainer.qzr-play-hd .answer-btn.disabled:not(.correct):not(.wrong):not(.selected) {
  opacity: .5;
}