/* game.css — écrans de partie en direct (host + joueur). Les variables de couleur/typo
   viennent de style.css (:root), chargé sur la même page. */

/* Fond « papier » de la direction Carton : crème + trame de points très légère, la même
   sur l'écran projeté et sur le téléphone du joueur. */
.game-body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(color-mix(in oklab, var(--trait) 9%, transparent) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

.game-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--ink);
}

.game-loading, .game-error {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  padding: 40px;
}
.game-error { color: var(--coral-dark); }

/* ---- topbar commune ---- */
.game-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
}
.game-top .brand-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 23px; letter-spacing: -0.8px; }

/* ---- lobby ---- */
/* Salon en deux colonnes (voir renderLobby) : rejoindre à gauche, les joueurs à droite.
   L'ancienne version empilait tout au centre et laissait l'écran projeté aux deux tiers vide. */
.lobby-corps { flex: 1; display: flex; gap: 34px; padding: 22px 34px 26px; min-height: 0; }
.lobby-gauche { width: 452px; flex: none; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.lobby-gauche-espace { flex: 1; min-height: 8px; }
.lobby-droite { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lobby-qr-row { display: flex; gap: 20px; align-items: center; }
.lobby-qr-aside { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lobby-qr-texte { font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.lobby-compteur { display: flex; align-items: baseline; gap: 12px; font-size: 20px; font-weight: 700; }
.lobby-compteur-num {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -1.5px;
  font-size: clamp(34px, 3.4vw, 48px); line-height: 1; color: var(--coral);
}

.lobby-pin-label { font-size: 14px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 2.2px; margin-bottom: 6px; }
.lobby-pin-box {
  background: var(--surface);
  border: 4px solid var(--trait);
  border-radius: 22px;
  padding: 18px 28px;
  box-shadow: 8px 8px 0 var(--ombre);
  transform: rotate(-1deg);
}
/* Le PIN est ce qu'on lit du fond de la salle : il prend toute la place qu'il peut, en
   clamp() pour rester lisible aussi sur un petit écran. */
.lobby-pin {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(52px, 6.4vw, 92px); line-height: 1; letter-spacing: 3px;
}

.lobby-qr-box {
  background: var(--surface);
  border: 4px solid var(--trait);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 6px 6px 0 var(--ombre);
  line-height: 0;
  transform: rotate(1.4deg);
}
.lobby-qr-box img { display: block; }
/* Bouton loupe du QR, sous la boîte plutôt que par-dessus le code (une surimpression
   directement sur le QR masquait une partie du motif — corrigé le 14/09 suite au retour d'Ané). */
.lobby-qr-zoom-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; background: var(--surface); border: 3px solid var(--trait); border-radius: 999px;
  padding: 7px 15px; box-shadow: 4px 4px 0 var(--ombre); cursor: pointer;
  font: inherit; font-weight: 700; font-size: 13.5px; color: var(--ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.lobby-qr-zoom-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ombre); }
.lobby-qr-zoom-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ombre); }

.lobby-join-link-row { display: flex; }
.lobby-join-link {
  display: inline-flex; align-items: center; gap: 11px; max-width: calc(100% - 48px);
  background: var(--surface); border: 3px solid var(--trait); border-radius: 999px; padding: 7px 18px 7px 7px;
  box-shadow: 4px 4px 0 var(--ombre); cursor: pointer; font: inherit; color: var(--ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.lobby-join-link:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ombre); }
.lobby-join-link:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ombre); }
.lobby-join-link-icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #FFFFFF;
  border: 2.5px solid var(--trait);
}
.lobby-join-link-text { font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-join-link-copy {
  flex: none; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--ink); background: var(--surface); border: 2px solid var(--trait); border-radius: 999px; padding: 2px 9px;
}
.lobby-join-link.copie .lobby-join-link-icon { background: var(--vrai, #2ecc71); }
.lobby-join-link.copie .lobby-join-link-copy { color: var(--trait); background: var(--vrai, #2ecc71); }

.lobby-players {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 13px;
  min-height: 0;
  overflow-y: auto;
}
/* Chaque joueur qui arrive est un autocollant posé sur la table : contour à l'encre,
   ombre dure, et une très légère rotation alternée pour que le mur de pastilles ne fasse
   pas grille de tableur. */
.player-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 3px solid var(--trait);
  border-radius: 999px;
  padding: 7px 16px 7px 7px;
  box-shadow: 4px 4px 0 var(--ombre);
  font-weight: 700;
  font-size: 17px;
}
.player-chip:nth-child(3n) { transform: rotate(-1.3deg); }
.player-chip:nth-child(3n+1) { transform: rotate(0.9deg); }
.player-chip:nth-child(3n+2) { transform: rotate(-0.5deg); }
.player-chip .dot { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--trait); }
.player-chip-kick {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--trait); background: var(--surface);
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; cursor: pointer; padding: 0; line-height: 1; flex: none;
  opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.player-chip:hover .player-chip-kick { opacity: 1; }
.player-chip-kick:hover { background: var(--coral); color: #FFFFFF; }

.lobby-tips {
  display: flex; align-items: center; gap: 12px;
  background: var(--gold); border: 3px solid var(--trait); border-radius: 14px;
  padding: 13px 16px; min-height: 52px;
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--trait);
  opacity: 0; transition: opacity 0.3s ease;
}
.lobby-tips.visible { opacity: 1; }
.lobby-tips svg { flex: none; }

/* Le bouton qui lance la partie est sur un écran regardé à plusieurs mètres : il est à
   l'échelle de cet écran, pas à celle d'un bouton de formulaire. */
.lobby-btn-lancer {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.5px;
  font-size: clamp(19px, 2vw, 26px); padding: 16px 34px; border-radius: 18px; border-width: 4px;
  box-shadow: 7px 7px 0 var(--ombre); gap: 12px;
}
.lobby-btn-lancer:hover { box-shadow: 8px 8px 0 var(--ombre); }
.lobby-btn-lancer:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--ombre); }
.lobby-btn-lancer:disabled { box-shadow: 7px 7px 0 var(--ombre); }

.lobby-bottom { display: flex; flex: none; }

/* ---- sélecteur d'avatar (formulaire de jointure) ---- */
.avatar-picker-wrap { width: 100%; max-width: 300px; }
.avatar-picker-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--ink-soft); margin-bottom: 8px; text-align: center;
}
.avatar-picker {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  max-height: 176px; overflow-y: auto; padding: 8px;
  background: var(--surface); border: 3px solid var(--trait); border-radius: 15px;
}
.avatar-picker-item {
  border: none; background: transparent; padding: 2px; border-radius: 999px; cursor: pointer;
  display: flex; line-height: 0;
}
.avatar-picker-item svg { width: 100%; height: auto; border-radius: 999px; transition: transform 0.12s ease; }
.avatar-picker-item:hover svg { transform: scale(1.08); }
.avatar-picker-item.selected svg { outline: 3px solid var(--trait); outline-offset: 2px; }

/* Petite pastille d'avatar affichée dans un badge de joueur (lobby, classement) — la même
   image que le sélecteur, juste redimensionnée par le conteneur. */
.avatar-mini { flex: none; display: inline-block; }
.avatar-mini svg { display: block; width: 100%; height: 100%; }

/* ---- sélecteur d'équipe (formulaire de jointure, mode équipes facultatif) ---- */
.team-picker-wrap { width: 100%; max-width: 300px; }
/* Le bloc entier disparaît quand le quiz n'a pas le mode équipes (voir join.js). */
.team-picker-wrap[hidden] { display: none; }
.team-picker-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--ink-soft); margin-bottom: 8px; text-align: center;
}
.team-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.team-picker-item {
  display: flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px;
  border: 2.5px solid var(--trait); background: var(--surface); color: var(--ink);
  font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer;
}
.team-picker-item svg { flex: none; }
.team-picker-item.selected { background: var(--trait); color: var(--bg); }

/* Petite pastille ronde signalant l'équipe d'un joueur (bandeau joueur, lobby, classement). */
.team-dot { flex: none; width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 2px solid var(--trait); }

/* ---- classement par équipe (écran final animateur) ---- */
.equipe-classement { margin: 20px 40px 0; }
.equipe-classement-titre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -0.4px; text-align: center; margin-bottom: 12px; }
.equipe-row {
  display: flex; align-items: center; gap: 12px; background: var(--surface); border: 3px solid var(--trait);
  border-radius: 12px; padding: 9px 15px; margin-bottom: 9px; box-shadow: 4px 4px 0 var(--ombre);
}
.equipe-row .rang { font-weight: 800; width: 20px; text-align: center; }
.equipe-row .nom { flex: 1; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.equipe-row .score { font-weight: 800; }

.join-empty { text-align: center; color: var(--ink-soft); font-weight: 600; padding: 40px; }

/* ---- question (host) ---- */
/* Taille du texte projeté (16/09) — voir les deux loupes dans la barre du haut de host.js.
   Toutes les tailles de l'écran ANIMATEUR passent par ce facteur ; celles du joueur n'y
   touchent pas, son téléphone est à trente centimètres de ses yeux. Le réglage est posé sur
   <html> et mémorisé par appareil, comme le thème et la langue. */
:root { --echelle-projection: 1; }

.qh-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 40px 0; }
.qh-pill { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 3px solid var(--trait); border-radius: 999px; padding: 6px 15px; box-shadow: 4px 4px 0 var(--ombre); font-weight: 800; font-size: 14px; white-space: nowrap; }
.qh-pill .soft { color: var(--ink-soft); font-weight: 600; }
.qh-pill-joueurs svg { flex: none; }

.qh-progress-info { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qh-dots { display: flex; align-items: center; gap: 5px; }
.qh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--trait); transition: background 0.2s, width 0.2s, height 0.2s; }
.qh-dot.done { background: var(--teal); }
.qh-dot.current { width: 13px; height: 13px; background: var(--coral); }

.qh-timerbar { display: flex; align-items: center; gap: 18px; padding: 18px 40px 0; }
.qh-timer-num {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: calc(52px * var(--echelle-projection)); line-height: 1;
  letter-spacing: -1.5px; color: var(--ink); min-width: calc(74px * var(--echelle-projection));
  text-align: center; transition: color 0.2s;
}
.qh-timer-num.low { color: var(--coral-dark); }
.qh-timer-num.low { animation: qh-timer-pulse 0.6s ease-in-out infinite; }
@keyframes qh-timer-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.qh-timer-track { flex: 1; height: 18px; background: var(--surface); border: 3px solid var(--trait); border-radius: 999px; overflow: hidden; }
.qh-timer-fill { height: 100%; background: var(--teal); border-radius: 999px 0 0 999px; transition: width 0.2s linear, background 0.2s; }
.qh-timer-fill.low { background: var(--coral); }
#btn-reveler { flex: none; white-space: nowrap; }

/* Fin anticipée (16/09) : tout le monde a répondu, il reste 5 s pour le joker Repêchage.
   Le compteur saute de 25 à 5 — sans ce bandeau, ça se lit comme un bug plutôt que comme
   une règle du jeu. Aplat or, donc encre figée : dans les thèmes sombres, --trait s'éclaircit
   et on aurait du jaune pâle sur du jaune (même raison que --encre-sur-aplat partout ailleurs). */
.qh-bandeau {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 16px 40px 0; padding: 10px 22px;
  background: var(--gold); color: var(--encre-sur-aplat);
  border: 3px solid var(--trait); border-radius: 999px; box-shadow: 4px 4px 0 var(--ombre);
  transform: rotate(-0.3deg); font-weight: 700; font-size: 17px;
}
.qh-bandeau strong { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.3px; }
.qh-bandeau svg { flex: none; }
/* La pastille du compte passe en aplat plein quand il est complet : l'animateur voit d'un
   coup d'œil que ce n'est plus « on attend » mais « on y est ». */
.qh-pill-joueurs.complet { background: var(--teal); color: var(--encre-sur-aplat); }

/* Partie en pause (16/09) : le compteur ne descend plus. Il ne suffit pas d'arrêter le
   javascript — un chiffre immobile ressemble à un écran planté — donc il grisonne, et le
   bandeau ci-dessous dit pourquoi. Teinte neutre à dessein : ni l'or de la fin anticipée,
   ni le corail de l'urgence, puisque justement il n'y a plus d'urgence. */
.qh-timer-num.gele { color: var(--ink-soft); animation: none; }
.qh-timer-fill.gele { background: var(--border); }
.qh-bandeau-pause { background: var(--panel); color: var(--ink); }
/* Le bouton Pause devient « Reprendre » : même bouton, action inverse, donc on le repeint
   en vert plutôt que d'en ajouter un second que l'animateur devrait chercher. */
#btn-pause.btn-reprendre { background: var(--vrai); color: #FFFFFF; }
/* Les deux loupes A− / A+ collées, comme une seule commande à deux moitiés. */
.taille-projection { display: flex; gap: 6px; }
.taille-projection .btn:disabled { opacity: 0.4; cursor: default; }

/* La question est posée sur une « carte » en papier, légèrement de travers : c'est l'élément
   le plus regardé de l'écran projeté, il doit se détacher franchement du fond. */
.qh-question {
  text-align: center; margin: 20px 60px 0; padding: 20px 34px;
  background: var(--surface); border: 4px solid var(--trait); border-radius: 20px;
  box-shadow: 8px 8px 0 var(--ombre); transform: rotate(-0.4deg);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -1px;
  font-size: clamp(calc(26px * var(--echelle-projection)), calc(3.2vw * var(--echelle-projection)), calc(46px * var(--echelle-projection)));
  line-height: 1.12; text-wrap: balance;
}

.qh-media { position: relative; display: flex; justify-content: center; padding: 14px 60px 0; }
.qh-media img,
.qh-media video { max-height: 220px; max-width: 100%; border: 4px solid var(--trait); border-radius: 16px; box-shadow: 6px 6px 0 var(--ombre); }
/* Une vidéo garde ses proportions : l'étirer sur toute la largeur ajoutait deux bandes
   noires de part et d'autre, très visibles au vidéoprojecteur. Elle a ses propres contrôles
   et sa bande-son, donc pas de bouton loupe (voir host.js). */
.qh-media-video video {
  background: var(--trait);
  /* Hauteur fixée + aspect-ratio plutôt que la taille naturelle : tant que les métadonnées
     du fichier ne sont pas chargées, un <video> mesure 300×150 par défaut et s'afficherait
     minuscule sur l'écran projeté. */
  width: auto; height: 210px; aspect-ratio: 16 / 9; object-fit: contain;
}
/* Un peu moins haut qu'une image à la même place : la barre de contrôles est DANS la
   vidéo, donc à hauteur égale il reste moins de place pour les tuiles de réponse. */
.game-screen.has-media .qh-media-video video { height: 40vh; }

.qh-zoom-btn {
  position: absolute; top: 14px; right: calc(60px + 14px); width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); color: var(--ink); border: 3px solid var(--trait); display: flex; align-items: center;
  justify-content: center; cursor: pointer; box-shadow: 3px 3px 0 var(--ombre);
}
.qh-zoom-btn:hover { background: var(--gold); }
.qh-zoom-overlay {
  position: fixed; inset: 0; background: color-mix(in oklab, var(--trait) 88%, transparent); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out;
}
.qh-zoom-overlay img { max-width: 92vw; max-height: 92vh; border: 5px solid var(--surface); border-radius: 12px; }

.qh-answers { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; padding: 28px 60px 32px; }
.qh-answers-2 { grid-template-rows: 1fr; }
/* Police agrandie par défaut (sans image) : les tuiles remplissent tout l'espace restant,
   il y a largement la place pour un texte plus lisible sur un écran regardé à distance. */
.qh-answer {
  display: flex; align-items: center; gap: 18px; border: 4px solid var(--trait); border-radius: 18px;
  padding: 0 26px; box-shadow: 6px 6px 0 var(--ombre); color: #FFFFFF;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.5px;
  font-size: calc(30px * var(--echelle-projection));
}

/* Avec une image : les tuiles n'ont plus besoin de tout l'espace vertical restant — on leur
   laisse juste une hauteur confortable (flex: none plutôt que flex: 1) et on rend la place
   libérée à l'image, qui elle grandit nettement (jusqu'à ~46% de la hauteur d'écran). */
.game-screen.has-media .qh-media { flex: 1; align-items: center; }
.game-screen.has-media .qh-media img,
.game-screen.has-media .qh-media video { max-height: 46vh; }
.game-screen.has-media .qh-answers { flex: none; padding: 14px 60px 24px; gap: 12px; }
.game-screen.has-media .qh-answer { min-height: 64px; padding: 0 22px; font-size: 18px; }
.game-screen.has-media .qh-answer svg { width: 22px; height: 22px; }

.qh-libre-info {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--ink-soft); font-weight: 700; font-size: 19px; padding: 20px 60px; text-align: center;
}

.qh-ordre-hint { text-align: center; color: var(--ink-soft); font-weight: 700; padding: 10px 0 4px; }
.qh-ordre-list { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 12px 80px 32px; max-width: 640px; margin: 0 auto; width: 100%; }
.qh-ordre-item { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 3px solid var(--trait); border-radius: 13px; box-shadow: 4px 4px 0 var(--ombre); padding: 13px 17px; font-weight: 700; font-size: 18px; }
.qh-ordre-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--trait); border: 2.5px solid var(--trait); font-weight: 800; font-size: 14px; flex: none; }

/* ---- question (joueur) ---- */
.qp-top { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 10px; }
.qp-top-row { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-soft); }
.qp-timer-num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -1px; color: var(--ink); text-transform: none; min-width: 32px; text-align: right; transition: color 0.2s; }
.qp-timer-num.low { color: var(--coral-dark); }

/* Bandeau permanent du joueur : qui je suis, où j'en suis, combien j'ai. */
.qp-moi {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 3px solid var(--trait); border-radius: 16px;
  box-shadow: 4px 4px 0 var(--ombre); padding: 8px 14px 8px 8px;
}
.qp-moi-avatar { flex: none; width: 40px; height: 40px; }
.qp-moi-initiale {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--coral); color: #FFFFFF;
  border: 2.5px solid var(--trait); display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px;
}
.qp-moi-ident { flex: 1; min-width: 0; }
.qp-moi-pseudo { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-moi-rang { font-size: 12.5px; color: var(--ink-soft); }
.qp-moi-score { flex: none; text-align: right; }
.qp-moi-score-num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: -1px; }
.qp-moi-score-label { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft); }
.qp-progress-track { flex: 1; min-width: 0; height: 14px; background: var(--surface); border: 3px solid var(--trait); border-radius: 999px; overflow: hidden; }
.qp-progress-bar { height: 100%; background: var(--teal); border-radius: 999px 0 0 999px; transition: width 0.2s linear, background 0.2s; }
/* Même code couleur que l'écran animateur (.qh-timer-fill.low), qui n'existait que là-bas :
   le téléphone ne signalait rien du tout quand le temps devenait court. */
.qp-progress-bar.low { background: var(--coral); }

.qp-status { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.6px; font-size: 21px; padding: 4px 16px 6px; line-height: 1.22; text-wrap: pretty; }
/* Deuxième ligne du statut, en Space Grotesk et plus douce : c'est l'explication, pas le titre. */
.qp-sous-status { padding: 0 16px 8px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
/* Le pendant côté joueur du bandeau de pause : son compteur se fige lui aussi, et sans un
   mot il rechargerait sa page en pleine question en croyant à une panne. */
.qp-bandeau-pause {
  margin: 0 16px 8px; padding: 8px 16px; text-align: center;
  background: var(--panel); color: var(--ink);
  border: 3px solid var(--trait); border-radius: 999px; box-shadow: 3px 3px 0 var(--ombre);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 14px;
}

/* Jokers (50/50, Malus, Repêchage) : petits boutons pilule centrés, discrets mais bien
   visibles — chacun disparaît (voir join.js) dès qu'il est utilisé ou qu'une réponse a été
   donnée. Le bouton "?" à côté de chacun déplie/replie son explication au clic (un title=""
   seul ne s'affiche pas au toucher sur mobile, donc il faut un vrai bouton plutôt qu'un
   survol). Plusieurs jokers peuvent cohabiter sur la même ligne, qui passe à la ligne suivante
   si besoin (.qp-joker-row en flex-wrap). Le Malus est bordé en rouge plutôt qu'en doré,
   pour bien le distinguer visuellement comme le seul joker "offensif" envers les autres. */
.qp-joker-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 0 0 6px; }
.qp-joker-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.qp-joker-row-inner { display: flex; align-items: center; gap: 6px; }
/* L'encre est figée, pas --trait : sur un aplat doré, --trait s'éclaircit dans les thèmes
   sombres et le libellé passait en cyan sur jaune dans le thème Néon — illisible (repéré le
   16/09 en vérifiant la fenêtre de fin anticipée). Même raison que --encre-sur-aplat ailleurs. */
.qp-joker-btn {
  border: 3px solid var(--trait); background: var(--gold); color: var(--encre-sur-aplat); cursor: pointer;
  border-radius: 999px; padding: 9px 17px; box-shadow: 3px 3px 0 var(--ombre);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; gap: 7px;
}
.qp-joker-btn-malus { background: var(--faux); color: #FFFFFF; }
.qp-joker-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ombre); }
.qp-joker-btn:disabled { opacity: 0.5; cursor: default; }
/* Pendant la fenêtre de fin anticipée, le Repêchage est la SEULE chose à faire de ces cinq
   secondes : un anneau d'encre suffit à le sortir de la page, sans changer sa couleur ni sa
   place (le joueur l'a déjà repéré, on ne le déplace pas sous son doigt). */
.qp-joker-btn.urgent { outline: 4px solid var(--trait); outline-offset: 4px; box-shadow: 6px 6px 0 var(--ombre); }
.qp-joker-info-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--trait);
  background: var(--surface); color: var(--ink); cursor: pointer; font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
}
.qp-joker-info-btn:active { transform: scale(0.94); }
.qp-joker-hint {
  font-size: 12px; font-weight: 600; color: var(--ink); background: var(--surface);
  border: 2px solid var(--trait); border-radius: 10px; padding: 4px 11px; text-align: center;
  max-width: 260px;
}

.qp-grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: repeat(2, minmax(0,1fr)); gap: 14px; padding: 12px 22px 26px; }
.qp-grid-2 { grid-template-rows: 1fr; }
/* Un seul mot très long (nom d'espèce, URL) sortait visuellement de la tuile. */
.qp-button, .qh-answer, .ar-salon-titre { min-width: 0; overflow-wrap: anywhere; }
.qp-button {
  border: 3.5px solid var(--trait); border-radius: 18px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 7px; cursor: pointer; padding: 12px 10px; color: #FFFFFF;
  box-shadow: 5px 5px 0 var(--ombre);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.3px;
  font-size: 17px; text-align: center; transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.qp-button:active:not(:disabled) { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ombre); }
.qp-button:disabled { cursor: default; opacity: 0.45; }
.qp-button.chosen { outline: 5px solid var(--trait); outline-offset: 4px; opacity: 1 !important; }
/* Réponse éliminée par le joker 50/50 : nettement plus estompée qu'un simple bouton désactivé
   (déjà répondu), pour bien montrer que c'est une réponse écartée plutôt qu'un état normal. */
.qp-button.eliminee { opacity: 0.22 !important; filter: grayscale(0.5); }

/* ---- question (joueur) — réponse libre ---- */
.qp-libre-form { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.qp-libre-input {
  width: 100%; max-width: 320px; text-align: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 21px; border: 3.5px solid var(--trait); border-radius: 14px; padding: 14px;
  background: var(--surface); color: var(--ink);
}
.qp-libre-input:focus { box-shadow: 5px 5px 0 var(--ombre); }

/* ---- question (joueur) — remise dans l'ordre ---- */
.qp-ordre-list { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 12px 22px 10px; max-width: 480px; margin: 0 auto; width: 100%; }
.qp-ordre-item {
  display: flex; align-items: center; gap: 14px; background: var(--surface); border: 3px solid var(--trait);
  border-radius: 13px; box-shadow: 4px 4px 0 var(--ombre); padding: 13px 15px; min-height: 52px;
  font-weight: 700; font-size: 16px; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--ink);
}
.qp-ordre-item.choisi { background: var(--gold); }
.qp-ordre-badge {
  width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--trait);
  color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: none;
}
.qp-ordre-item.choisi .qp-ordre-badge { background: var(--trait); color: var(--bg); }
.qp-ordre-actions { display: flex; justify-content: center; gap: 12px; padding: 6px 0 20px; }

/* « Valider » : vert, et seulement quand tout est rangé. Tant que l'ordre est incomplet il
   reste gris et plein — un bouton simplement estompé se lit « en panne », un bouton gris se
   lit « pas encore ». Le vert est celui des bonnes réponses du jeu, donc déjà appris.
   `--vrai` est clair dans les sept thèmes (60 à 80 %) : l'encre posée dessus est la sombre. */
.qp-ordre-valider { background: var(--vrai); color: var(--encre-sur-aplat); min-width: 130px; justify-content: center; }
.qp-ordre-valider:disabled {
  background: var(--panel); color: var(--ink-soft); opacity: 1;
  box-shadow: 4px 4px 0 var(--border); border-color: var(--border);
}

.qp-result-banner { text-align: center; padding: 40px 24px; }
.qp-result-banner.correct { color: var(--teal-dark); }
/* Remise dans l'ordre à moitié juste : ni le vert des bonnes réponses, ni le rouge des
   ratées — l'or, qui dit « des points, mais pas tous ». */
.qp-result-banner.partiel, .ar-perso.partiel { color: var(--gold-dark); }
.qp-ordre-detail { font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-top: 6px; }
.qp-result-banner.incorrect { color: var(--coral-dark); }
.qp-result-banner .big { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -1px; font-size: 36px; margin-bottom: 8px; }

.qp-serie-bonus {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 15px;
  border-radius: 999px;
  background: var(--gold);
  border: 2.5px solid var(--trait);
  color: var(--trait);
  font-weight: 800;
  font-size: 14px;
  box-shadow: 3px 3px 0 var(--ombre);
}

/* ---- classement / podium ---- */
/* Écran final : podium + reste du classement doivent tenir sur un écran projeté sans
   déborder, même à dix joueurs. Tout est donc dimensionné en proportion de la hauteur. */
.lb-title { text-align: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -1.2px; font-size: clamp(26px, 3.4vh, 38px); margin: clamp(12px, 2.4vh, 30px) 0 6px; }
.lb-subtitle { text-align: center; color: var(--ink-soft); font-weight: 700; margin-bottom: 10px; }

/* Les trois marches posent sur un vrai sol : sans cette ligne, des blocs à bord ouvert en
   bas donnaient l'impression d'être coupés par le classement qui suit. */
.lb-podium {
  display: flex; align-items: flex-end; justify-content: center; gap: 24px;
  margin: clamp(8px, 1.8vh, 20px) auto 0; flex: none;
  width: 100%; max-width: 560px; border-bottom: 4px solid var(--trait);
}
.lb-podium-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lb-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; border: 3px solid var(--trait); box-shadow: 4px 4px 0 var(--ombre); }
.lb-podium-block { width: 150px; background: var(--surface); border: 4px solid var(--trait); border-bottom: none; border-radius: 16px 16px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 34px; color: var(--ink); }

.lb-rest { display: flex; flex-direction: column; gap: 8px; margin: clamp(10px, 2vh, 26px) auto 0; width: 100%; max-width: 640px; padding: 0 20px; min-height: 0; overflow-y: auto; }
.lb-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 3px solid var(--trait); border-radius: 13px; padding: 9px 17px; box-shadow: 4px 4px 0 var(--ombre); font-weight: 700; }
.lb-row .rank { color: var(--ink-soft); width: 22px; }
.lb-row .name { flex: 1; }
.lb-row .score { color: var(--ink); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 17px; }
.lb-serie-badge { font-size: 13px; font-weight: 700; white-space: nowrap; }
.lb-row-avatar { flex: none; }

.lb-actions { display: flex; justify-content: center; gap: 12px; padding: clamp(14px, 2.4vh, 30px); flex: none; }

/* ---- confettis (fin de partie) ---- */
.confetti-zone { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 50; }
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  animation-name: confetti-chute;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes confetti-chute {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--derive), 105vh) rotate(var(--rotation)); opacity: 0.85; }
}

/* ---- réactions en direct ---- */

/* Barre du joueur : toujours visible pendant la partie, hors du flux de #screen pour
   survivre à chaque changement d'écran (innerHTML= complet à chaque état). */
.reaction-bar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 3px solid var(--trait);
  padding: 5px 8px;
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ombre);
  z-index: 400;
}
/* Cible tactile d'au moins 44px : c'est le minimum confortable sur un téléphone, et la
   barre de réactions est le seul endroit où on tape sans viser. */
.reaction-btn {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.reaction-btn:hover { transform: scale(1.15); }
.reaction-btn:active,
.reaction-btn.envoye { transform: scale(0.85); opacity: 0.5; }
.reaction-btn:disabled { cursor: default; }

/* Surimpression côté animateur : chaque réaction reçue monte et s'efface, sans jamais
   intercepter de clic (pointer-events: none) ni pousser le contenu du jeu. */
.reaction-overlay { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 480; }
.reaction-float {
  position: absolute;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  animation: reaction-monte 2.4s ease-out forwards;
}
.reaction-float-emoji { font-size: 34px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); }
.reaction-float-pseudo {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--trait);
  padding: 1px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
@keyframes reaction-monte {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-320px) translateX(var(--derive, 0px)); opacity: 0; }
}

@media (max-width: 1000px) {
  .lobby-corps { flex-direction: column; gap: 22px; padding: 18px 20px 22px; }
  .lobby-gauche { width: auto; }
  .lobby-gauche-espace { display: none; }
  .lobby-pin-box, .lobby-qr-box { transform: none; }
}

@media (max-width: 720px) {
  .qh-answers { grid-template-columns: 1fr; padding: 16px 20px; }
  .qh-question { padding: 8px 20px 0; font-size: 24px; }
  .qh-timerbar { padding: 16px 20px 0; flex-wrap: wrap; }
  #btn-reveler { font-size: 12px; padding: 6px 10px; }
  .lb-podium { gap: 10px; }
  .lb-podium-block { width: 100px; }
  .game-screen.has-media .qh-media img { max-height: 32vh; }
  .game-screen.has-media .qh-answers { padding: 10px 20px 16px; }
  .game-screen.has-media .qh-answer { min-height: 52px; font-size: 16px; }
}

/* La barre de réactions est en position fixe (voir join.js) : sans réserve de place, elle se
   posait par-dessus les deux tuiles de réponse du bas — exactement le même défaut que les
   jokers puis le bouton du QR avant elle. Tout écran joueur qui va jusqu'en bas garde donc
   la hauteur de la barre libre en dessous. */
body.avec-reactions .qp-grid,
body.avec-reactions .qp-ordre-list,
body.avec-reactions .qp-libre-form,
body.avec-reactions .qp-ordre-actions,
body.avec-reactions .qp-joker-row,
/* Les deux écrans pleine hauteur du mode Arène : sans cette réserve, la barre de réactions
   (position: fixed, en bas) recouvrait le bouton « Démarrer » et le bas du classement.
   C'est la cinquième fois que ce piège se présente dans ce projet — jokers, bouton du QR,
   tuiles de réponse, puis ici : tout écran qui va jusqu'en bas doit être listé ici. */
body.avec-reactions .ar-salon,
body.avec-reactions .ar-resultats { padding-bottom: 100px; }

/* ======================================================================
   Mode Arène (15/09) — chacun sur son écran, pas d'écran projeté.
   Cet écran porte tout : salle d'attente, question, média, bonne réponse
   et classement. Il doit tenir aussi bien sur un téléphone que sur un PC
   avec Discord ouvert à côté, d'où les deux colonnes au-dessus de 900 px.
   ====================================================================== */

/* ---- salle d'attente ---- */

.ar-salon {
  flex: 1; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 26px; max-width: 620px; width: 100%; margin: 0 auto;
}
.ar-salon-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ar-salon-titre {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px;
  letter-spacing: -0.8px; line-height: 1.15; flex: 1; min-width: 0; text-wrap: pretty;
}

.ar-lien-label, .ar-joueurs-label {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--ink-soft); margin-top: 8px;
}
/* Le lien est l'élément principal de cette salle : à distance, c'est LE geste — le copier
   et le coller dans Discord. Il remplace le PIN géant et le QR du mode Plateau, qui
   n'auraient aucun sens ici (personne n'est dans la pièce pour scanner quoi que ce soit). */
.ar-lien {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface); border: 3px solid var(--trait); border-radius: 15px;
  padding: 14px 15px; box-shadow: 4px 4px 0 var(--ombre);
  font-family: inherit; color: var(--ink); cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.ar-lien:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ombre); }
.ar-lien:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ombre); }
.ar-lien-texte {
  flex: 1; min-width: 0; font-weight: 700; font-size: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-lien-copier {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  border: 2.5px solid var(--trait); border-radius: 999px; padding: 4px 11px;
}
.ar-lien-copier.ok { background: var(--vrai); color: var(--surface); border-color: var(--vrai); }
.ar-lien-pin { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.ar-lien-pin b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; letter-spacing: 1px; color: var(--ink); }

.ar-joueurs { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-joueur {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 2.5px solid var(--trait); border-radius: 999px;
  padding: 5px 13px 5px 6px; font-weight: 700; font-size: 14px;
  box-shadow: 3px 3px 0 var(--ombre);
}
.ar-joueur .avatar-mini { width: 26px; height: 26px; }
.ar-joueur-initiale {
  width: 26px; height: 26px; border-radius: 50%; background: var(--panel);
  border: 2px solid var(--trait); display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800;
}
.ar-salon-vide { color: var(--ink-soft); font-weight: 600; font-size: 14px; }

.ar-demarrer { margin-top: auto; justify-content: center; min-height: 54px; font-size: 17px; border-radius: 15px; }
.ar-attente-org {
  margin-top: auto; text-align: center; color: var(--ink-soft); font-weight: 700;
  font-size: 14px; padding: 16px 0 4px;
}

/* ---- pastille de mode + son petit menu (salon Arène et salon projeté) ---- */

.ar-mode-wrap { position: relative; flex: none; }
.ar-mode-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--gold); color: var(--trait);
  border: 2.5px solid var(--trait); border-radius: 999px; padding: 6px 12px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ombre);
}
.ar-mode-chip.fige { background: var(--panel); color: var(--ink-soft); border-color: var(--border); box-shadow: none; cursor: default; }
.ar-mode-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 292px;
  background: var(--surface); border: 3px solid var(--trait); border-radius: 15px;
  box-shadow: 5px 5px 0 var(--ombre); overflow: hidden; text-align: left;
}
/* Même piège que pour .home-actions et le menu des thèmes : une classe qui pose un display
   l'emporte sur le display:none par défaut de [hidden]. D'où cette règle explicite. */
.ar-mode-menu[hidden] { display: none; }
.ar-mode-menu-haut { top: auto; bottom: calc(100% + 8px); }
.ar-mode-menu-label {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--ink-soft); padding: 12px 15px 8px;
}
.ar-mode-option {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: none; border-top: 2.5px solid var(--border);
  padding: 11px 15px; font-family: inherit; color: var(--ink); cursor: pointer;
}
.ar-mode-option:hover { background: var(--panel); }
.ar-mode-option.active { background: var(--trait); color: var(--bg); border-top-color: var(--trait); }
.ar-mode-option span { flex: 1; min-width: 0; }
.ar-mode-option b { display: block; font-weight: 800; font-size: 14.5px; }
.ar-mode-option em { display: block; font-style: normal; font-size: 12px; font-weight: 600; opacity: 0.75; }
.ar-mode-menu-pied {
  border-top: 2.5px solid var(--border); background: var(--panel);
  padding: 10px 15px; font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.45;
}

/* ---- média de la question sur l'écran du joueur (Arène uniquement) ---- */

.qp-media { display: flex; justify-content: center; padding: 4px 14px 8px; }
.qp-media img, .qp-media video {
  max-height: 30vh; max-width: 100%; border: 3px solid var(--trait);
  border-radius: 14px; box-shadow: 4px 4px 0 var(--ombre);
}
.qp-media-video video { width: auto; height: 26vh; aspect-ratio: 16 / 9; object-fit: contain; background: var(--trait); }
/* En Arène la question est sur CET écran : elle mérite la taille d'un énoncé, pas celle
   d'une ligne de statut. */
.qp-status-arene {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(19px, 5vw, 26px); letter-spacing: -0.5px; line-height: 1.2;
  color: var(--ink); padding: 10px 16px 6px; text-wrap: pretty;
}

/* ---- résultats et fin de partie ---- */

.ar-resultats {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px 24px; max-width: 620px; width: 100%; margin: 0 auto; overflow-y: auto;
}
.ar-bonne-label, .ar-lb-titre {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--ink-soft); margin-top: 6px;
}
.ar-bonne-tuile {
  display: flex; align-items: center; gap: 12px;
  border: 3px solid var(--trait); border-radius: 14px; padding: 13px 16px;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 19px;
  letter-spacing: -0.4px; box-shadow: 4px 4px 0 var(--ombre);
}
.ar-bonne-libre {
  background: var(--vrai); color: var(--surface); border: 3px solid var(--trait);
  border-radius: 14px; padding: 13px 16px; font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 19px; box-shadow: 4px 4px 0 var(--ombre);
}
.ar-perso {
  border: 3px solid var(--trait); border-radius: 14px; padding: 12px 16px; margin-top: 4px;
  box-shadow: 4px 4px 0 var(--ombre);
}
.ar-perso.correct { background: var(--vrai); color: var(--surface); }
.ar-perso.incorrect { background: var(--surface); }
.ar-perso-verdict { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.5px; }
.ar-perso-gain { font-weight: 700; font-size: 14px; }

.ar-lb { display: flex; flex-direction: column; gap: 6px; }
.ar-lb-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 2.5px solid var(--trait); border-radius: 12px;
  padding: 8px 13px; font-weight: 700; font-size: 14.5px;
}
/* Sa propre ligne, mise en avant : en Arène le classement est sur l'écran de chacun, il faut
   s'y retrouver d'un coup d'œil sans chercher son pseudo. */
.ar-lb-row.moi { background: var(--gold); box-shadow: 3px 3px 0 var(--ombre); }
.ar-lb-rang { width: 22px; flex: none; text-align: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; color: var(--ink-soft); }
.ar-lb-row.moi .ar-lb-rang { color: var(--trait); }
.ar-lb-row .avatar-mini { width: 26px; height: 26px; flex: none; }
.ar-lb-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-lb-nb { color: var(--ink-soft); font-weight: 600; }
.ar-lb-pts { flex: none; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; }

.ar-suite { text-align: center; font-weight: 700; font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; }
.ar-suivant { justify-content: center; min-height: 48px; margin-top: 6px; }
.ar-fin-titre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -1px; text-align: center; }
.ar-fin-moi { text-align: center; font-weight: 700; font-size: 15px; color: var(--ink-soft); margin-bottom: 6px; }
.ar-fin-actions { display: flex; gap: 10px; margin-top: 16px; }
.ar-fin-actions .btn { flex: 1; justify-content: center; min-height: 48px; text-decoration: none; }

/* ---- réactions des autres, en Arène ---- */

.ar-reaction-flottante {
  position: fixed; bottom: 104px; z-index: 90; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  animation: ar-monte 2.4s ease-out forwards;
}
.ar-reaction-emoji { font-size: 30px; line-height: 1; }
.ar-reaction-pseudo { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
@keyframes ar-monte {
  0% { opacity: 0; transform: translateY(10px) scale(0.8); }
  15% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-120px) scale(1); }
}

/* ---- sur PC : une colonne cadrée plutôt qu'un écran étiré ---- */

@media (min-width: 900px) {
  .ar-salon, .ar-resultats { max-width: 760px; }
  /* Sur un grand écran, coller le bouton tout en bas laisse un vide de 400 px au milieu :
     on garde le salon groupé en haut. */
  .ar-demarrer, .ar-attente-org { margin-top: 26px; }
  .ar-salon { justify-content: flex-start; }
  .qp-media img, .qp-media video { max-height: 38vh; }
  .qp-media-video video { height: 34vh; }
  /* Beaucoup joueront depuis leur PC, Discord ouvert à côté. Sans cadrage, les tuiles de
     réponse s'étirent sur 1920 px et le regard fait des allers-retours inutiles entre
     l'énoncé et les réponses. On garde donc une colonne, simplement bornée.
     Le cadrage valait d'abord pour l'Arène ; il vaut en réalité pour les deux modes (15/09) :
     rien n'empêche un joueur de rejoindre une partie Plateau depuis un ordinateur, et
     l'écran pensé pour un téléphone y laissait l'énoncé seul dans le coin en haut à gauche
     et le champ de réponse perdu au milieu du vide. */
  .game-screen .qp-top,
  .game-screen .qp-status,
  .game-screen .qp-status-arene,
  .game-screen .qp-media,
  .game-screen .qp-joker-row,
  .game-screen .qp-grid,
  .game-screen .qp-libre-form,
  .game-screen .qp-ordre-list,
  .game-screen .qp-ordre-actions {
    max-width: 860px; width: 100%; margin-left: auto; margin-right: auto;
  }
  .game-screen .qp-status-arene { font-size: 30px; text-align: center; }
  .game-screen .qp-grid { min-height: 300px; }
  /* L'énoncé se met au milieu de la colonne, à la taille qu'il mérite : posé en haut à
     gauche d'un écran de 2 000 px, il se lisait comme une note oubliée. */
  .game-screen .qp-status { font-size: 28px; text-align: center; padding: 10px 16px 14px; }
  /* Le formulaire de réponse libre occupait toute la hauteur restante et centrait son champ
     à 400 px sous la question. Il remonte se placer juste en dessous. */
  .game-screen .qp-libre-form { flex: none; padding-top: 18px; }
  /* Même raison pour la remise dans l'ordre : la liste s'étirait sur toute la hauteur et
     laissait « Valider » trois cents pixels sous ce qu'il valide. */
  .game-screen .qp-ordre-list { flex: none; }
}

/* ---- sortir d'une partie (bouton « ← » de la barre du haut) ---- */
/* Même dessin que le retour de l'éditeur, pour qu'il se reconnaisse d'un écran à l'autre. */
.game-retour {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px; border: 3px solid var(--trait);
  background: var(--surface); color: var(--ink); cursor: pointer; padding: 0;
}
.game-retour:hover { background: var(--panel); }
.game-retour:active { transform: translate(1px, 1px); }
/* Dans le bandeau du joueur, le bouton de sortie est plus petit : il partage la ligne avec
   l'avatar, le pseudo et le score. */
.qp-moi .game-retour { width: 32px; height: 32px; border-width: 2.5px; }