/* Zone de jeu Verseuse : consigne, scène (bécher qui s'incline au-dessus,
   flacon en dessous, liquide derrière le verre), niveau en chiffres et bouton
   à maintenir, sous le HUD commun du socle. Le bécher est une suite de huit
   images, le flacon une image translucide : le liquide est un simple bloc de
   couleur posé derrière lui, et sa hauteur suit le niveau calculé sur
   l'horloge. Les trois calques se placent en pourcentage de la scène
   (assets/js/versee/rendu.js, versee.COMPOSITION), donc tout suit la taille
   de l'écran sans recalage. */
.vs-jeu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 92px 12px max(10px, env(safe-area-inset-bottom)); box-sizing: border-box; z-index: 1; background-color: var(--fond, #111111); background-size: cover; background-position: center; }
.vs-jeu[hidden] { display: none; }
.vs-consigne { margin: 0; color: #ffffff; font-weight: 900; font-size: clamp(14px, 4vw, 20px); text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.vs-consigne[hidden] { display: none; }
.vs-logo { max-height: 40px; max-width: 50vw; object-fit: contain; }
.vs-logo[hidden] { display: none; }
/* La scène est haute et étroite : c est la hauteur disponible qui la
   dimensionne, la largeur suit le rapport posé par le rendu. */
.vs-hote { display: flex; justify-content: center; flex: 0 1 auto; min-height: 0; }
.vs-hote[hidden] { display: none; }
.vs-fete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

.vs-bloc { display: flex; flex-direction: column; align-items: center; min-height: 0; }
.vs-scene { position: relative; height: min(54vh, 520px); max-width: 86vw; }
.vs-becher { position: absolute; top: 0; object-fit: contain; z-index: 3; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.vs-flacon { position: absolute; left: 0; width: 100%; object-fit: contain; z-index: 2; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
/* Le liquide passe derrière le flacon : le verre est translucide, la couleur
   se voit au travers et prend sa teinte. */
.vs-liquide { position: absolute; z-index: 1; border-radius: 4px 4px 12px 12px; }
/* Le trait à viser, par-dessus tout le reste. */
.vs-cible { position: absolute; z-index: 4; height: 0; border-top: 3px dashed #ffffff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.vs-cible[hidden] { display: none; }
/* Le niveau en chiffres : c est lui que le joueur lit pour viser, le trait
   seul ne suffit pas sur un petit écran. */
.vs-niveau { margin: 6px 0 0; color: #ffffff; font-weight: 900; font-variant-numeric: tabular-nums; font-size: clamp(16px, 4.6vw, 22px); text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }

/* Verdict : la couleur du niveau dit tout de suite ce qui s est passé. */
.vs-bloc .vs-scene.vs-reussi + .vs-niveau { color: #7ae2b0; }
.vs-bloc .vs-scene.vs-rate + .vs-niveau { color: #ffb4a8; }
.vs-bloc .vs-scene.vs-deborde + .vs-niveau { color: #ff8d7a; animation: vs-secousse .4s ease-out; }
.vs-scene.vs-arrete .vs-flacon { animation: vs-pose .35s ease-out; }

.vs-bouton { border: none; border-radius: 999px; padding: 16px 34px; background: var(--jeu-bouton-fond); color: var(--jeu-bouton-texte); font-family: inherit; font-weight: 900; font-size: clamp(14px, 4vw, 18px); letter-spacing: .06em; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; }
.vs-bouton:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }
.vs-bouton[hidden] { display: none; }
.vs-jeu .vs-bouton:active { transform: translateY(2px); }

@keyframes vs-secousse { 0% { transform: translateX(0); } 25% { transform: translateX(-6px); } 55% { transform: translateX(5px); } 100% { transform: translateX(0); } }
@keyframes vs-pose { 0% { transform: translateY(-3px); } 100% { transform: translateY(0); } }

/* Mouvement réduit : plus de secousse ni de pose. Le bécher continue de
   s incliner, c est la lecture du jeu, pas une décoration. */
@media (prefers-reduced-motion: reduce) {
  .vs-bloc .vs-scene.vs-deborde + .vs-niveau, .vs-scene.vs-arrete .vs-flacon { animation: none; }
}