/* Zone de jeu Quiz : colonne HUD / question / bouton son, sous le HUD
   commun (manche, score) du socle. L enonce, l image facultative et les
   reponses sont des boutons DOM ; la bonne reponse et le mauvais choix se
   colorent apres la reponse. */
.qz-jeu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 96px 12px max(10px, env(safe-area-inset-bottom)); box-sizing: border-box; z-index: 1; background-color: var(--fond, #111111); }
.qz-jeu[hidden] { display: none; }
.qz-hud { display: flex; justify-content: space-between; width: min(94vw, 560px); margin-bottom: 8px; color: var(--jeu-hud-texte); font-weight: 900; font-size: clamp(13px, 3.6vw, 18px); letter-spacing: .04em; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.qz-zone { position: relative; flex: 1 1 auto; min-height: 0; width: min(94vw, 560px); display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; }
/* Sous le classement, HUD, question et bouton son sont masques mais le fond reste. */
.qz-hud[hidden], .qz-zone[hidden], .qz-son[hidden] { display: none; }
.qz-image { width: 100%; max-height: 34vh; object-fit: contain; border-radius: 12px; }
.qz-image[hidden] { display: none; }
.qz-enonce { margin: 0; color: #ffffff; font-weight: 900; font-size: clamp(17px, 4.8vw, 24px); line-height: 1.25; text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.qz-reponses { display: flex; flex-direction: column; gap: 10px; }
.qz-reponse { border: none; border-radius: 12px; padding: 14px 16px; background: var(--jeu-bouton-fond); color: var(--jeu-bouton-texte); font-family: inherit; font-weight: 800; font-size: clamp(14px, 3.8vw, 18px); line-height: 1.2; text-align: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.qz-reponse:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.qz-reponse[aria-disabled="true"] { cursor: default; }
.qz-reponse.bonne { background: #2bb673; color: #ffffff; }
.qz-reponse.mauvaise { background: #c0392b; color: #ffffff; }
/* Sous les reponses, jamais par-dessus : au moment du resultat, la bonne
   reponse en vert doit rester visible. */
.qz-message { align-self: center; max-width: 100%; padding: 10px 18px; border-radius: 12px; background: var(--jeu-voile); color: #fff; font-weight: 900; font-size: clamp(14px, 3.6vw, 20px); text-align: center; pointer-events: none; }
.qz-message[hidden] { display: none; }
.qz-son { margin-top: 12px; border: none; border-radius: 999px; width: 44px; height: 44px; background: var(--jeu-bouton-fond); color: var(--jeu-bouton-texte); font-size: 20px; cursor: pointer; }
.qz-son[aria-pressed="false"] { opacity: .55; }
@media (min-height: 900px) { .qz-jeu { padding-top: 120px; } }