/*
 * La Quest en live (ECL-14) : la scene du joueur (`.ql-*`) et celle du
 * projecteur (`.qh-*`).
 *
 * Les jetons du design system du socle et rien d'autre — navy pour la
 * structure, primary pour l'action, semantiques pour les ETATS seulement. Le
 * jaune de la marque reste au [AI] du logo. Aucun !important : tout se joue a la
 * specificite.
 *
 * Deux contraintes de forme dictent le reste :
 *  - le joueur tient un TELEPHONE : une seule question a la fois, des cibles
 *    d'au moins 48 px, du texte qui ne demande pas de zoomer ;
 *  - l'animateur branche un VIDEOPROJECTEUR : une salle lit a cinq metres, donc
 *    des titres qui grandissent avec la fenetre (`clamp`) et un contraste franc.
 *
 * Quand une scene est ouverte, la coquille disparait : un jeu en salle n'a pas
 * de barre laterale, et un invite sans compte n'a rien a y voir.
 */

body[data-stage] .shell {
  display: none;
}

/* --------------------------------------------------------------------------
 * La scene du joueur
 * -------------------------------------------------------------------------- */

.ql-stage,
.qh-stage {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
}

.ql-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}

.ql-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.ql-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ql-title {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.25;
}

.ql-lead,
.ql-hint {
  margin: 0;
  color: var(--text-muted);
}

.ql-hint {
  font-size: 0.9rem;
}

.ql-me {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.ql-stars {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
}

.ql-notice {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  font-size: 0.9rem;
}

/* Une panne se DIT : couleur semantique, reservee a cet ETAT. */
.ql-error {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
}

.ql-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ql-field .input {
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}

.ql-anchor {
  display: none;
}

.ql-exit {
  align-self: flex-start;
}

/* Une cible se touche au doigt : 48 px, jamais moins. */
.ql-big {
  min-height: 52px;
  font-size: 1.05rem;
}

.ql-spinner {
  width: 36px;
  height: 36px;
  margin: var(--space-4) auto;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ql-turn 900ms linear infinite;
}

@keyframes ql-turn {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ql-spinner { animation-duration: 4s; }
}

.ql-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ql-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 56px;
  padding: var(--space-4);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.ql-choice:hover {
  border-color: var(--primary);
}

.ql-choice[data-selected='yes'] {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.ql-choice-title {
  font-weight: 600;
}

.ql-choice-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.ql-choice-tag {
  align-self: flex-start;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.8rem;
}

.ql-pillar {
  margin: var(--space-3) 0 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.ql-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ql-board-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.ql-board-row[data-me='yes'] {
  background: var(--primary-soft);
  font-weight: 600;
}

.ql-board-rank {
  min-width: 2ch;
  color: var(--text-muted);
}

.ql-board-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ql-board-tag {
  padding: 0 var(--space-2);
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ql-board-score {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * La console de l'animateur (dans la coquille)
 * -------------------------------------------------------------------------- */

.qh-console {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.qh-check {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.qh-code-label {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.qh-code {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--primary);
}

.qh-link {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-muted);
}

.qh-players {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qh-player {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}

.qh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
 * La scene du projecteur — une salle lit a cinq metres
 * -------------------------------------------------------------------------- */

.qh-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 100vh;
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.qh-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1rem;
}

.qh-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.qh-step,
.qh-phase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.qh-phase {
  color: var(--primary);
  font-weight: 600;
}

.qh-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
}

.qh-title {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.15;
}

.qh-sub {
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--text-muted);
}

.qh-text {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  line-height: 1.5;
}

.qh-note {
  margin: 0;
  color: var(--text-muted);
}

.qh-video {
  width: 100%;
  max-height: 62vh;
  border-radius: var(--radius);
  background: var(--navy);
}

.qh-code-big {
  font-size: clamp(3rem, 12vw, 9rem);
}

.qh-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.qh-choice {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.qh-choice-title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
}

.qh-choice-desc {
  margin: 0;
  color: var(--text-muted);
}

/* La reponse optimale : un ETAT « bonne reponse », donc la couleur du succes. */
.qh-optimal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-left: 4px solid var(--success);
  border-radius: var(--radius-sm);
  background: var(--success-soft);
}

.qh-best {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 600;
  color: var(--success);
}

.qh-enablers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qh-enabler {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}

.qh-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qh-board-row {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
}

.qh-board-rank {
  min-width: 2ch;
  color: var(--text-muted);
}

.qh-board-name {
  flex: 1 1 auto;
}

.qh-board-score {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--primary);
}

.qh-next {
  align-self: flex-end;
  min-height: 56px;
  padding: 0 var(--space-6);
  font-size: 1.15rem;
}

.qh-quit {
  margin-left: var(--space-3);
}

@media (max-width: 720px) {
  .qh-wrap { padding: var(--space-4); }
  .qh-next { align-self: stretch; }
}