/* Zone de jeu Bonto : consigne, rangee de gobelets retournes, balle,
   verdict, bouton logo et confettis. Tout est DOM : la pose, les echanges
   et la levee des gobelets sont des transitions CSS, pas de canvas. */
.bt-jeu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 96px 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; }
.bt-jeu[hidden] { display: none; }
.bt-consigne { margin: 0; color: #ffffff; font-weight: 900; font-size: clamp(15px, 4.2vw, 22px); text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.bt-etat { margin: 0; color: var(--jeu-hud-texte); font-weight: 900; font-size: clamp(18px, 5vw, 28px); letter-spacing: .06em; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.bt-consigne[hidden], .bt-etat[hidden] { display: none; }
.bt-hote { position: relative; width: min(94vw, 560px); }
.bt-logo { max-height: 44px; max-width: 50vw; object-fit: contain; }
.bt-logo[hidden] { display: none; }
.bt-fete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* La scene garde de la place au-dessus des gobelets pour les lever. */
.bt-scene { position: relative; width: 100%; aspect-ratio: 2 / 1; }
.bt-balle { position: absolute; bottom: 4%; width: calc(var(--bt-largeur, 28%) * .42); height: auto; transform: translateX(-50%); z-index: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); pointer-events: none; }
.bt-balle[hidden] { display: none; }
.bt-gobelet { position: absolute; bottom: 0; width: var(--bt-largeur, 28%); border: none; padding: 0; margin: 0; background: transparent; z-index: 2; transform: translateX(-50%); transition: left var(--bt-duree, 420ms) ease-in-out, transform .38s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bt-gobelet img { display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); }
.bt-gobelet:disabled { cursor: default; }
.bt-gobelet:focus-visible { outline: 3px solid #ffffff; outline-offset: 6px; border-radius: 12px; }
/* Logo imprime sur le gobelet : pose au milieu de la paroi, jamais
   retourne meme si le gobelet l est. */
.bt-gobelet .bt-logo-gobelet { position: absolute; left: 50%; top: 52%; width: 46%; max-height: 38%; object-fit: contain; transform: translate(-50%, -50%); filter: none; }

.bt-gobelet.bt-leve { transform: translateX(-50%) translateY(-62%); }
.bt-gobelet.bt-devant { transform: translateX(-50%) translateY(5%) scale(1.07); z-index: 4; }
.bt-gobelet.bt-derriere { transform: translateX(-50%) translateY(-7%) scale(.92); z-index: 3; }
/* Pendant le melange, la profondeur suit la duree de l echange : a .38s elle trainait derriere les echanges rapides. */
.bt-scene.bt-melange .bt-gobelet { transition: left var(--bt-duree, 250ms) ease-in-out, transform calc(var(--bt-duree, 250ms) / 2) ease; }
.bt-scene.bt-choix .bt-gobelet { cursor: pointer; animation: bt-appel 1.4s ease-in-out infinite; }
.bt-scene.bt-choix .bt-gobelet:nth-of-type(2n) { animation-delay: .2s; }
.bt-gobelet.bt-choisi img { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .85)) drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); }

@keyframes bt-appel { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4%); } }

/* Mouvement reduit : pas d appel en boucle, les echanges restent (c est
   le jeu) mais sans arc devant / derriere. */
@media (prefers-reduced-motion: reduce) {
  .bt-scene.bt-choix .bt-gobelet { animation: none; }
  .bt-gobelet.bt-devant, .bt-gobelet.bt-derriere { transform: translateX(-50%); }
}