/* Zone de jeu Plinko : consigne, planche (toile : plots, bille, cadeaux),
   bouton de lâcher, sous le HUD commun du socle. La planche est dessinée
   sur une toile à chaque image ; le lot révélé est posé en DOM par-dessus. */
.pk-jeu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; 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; }
.pk-jeu[hidden] { display: none; }
.pk-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); }
.pk-consigne[hidden] { display: none; }
.pk-logo { max-height: 40px; max-width: 50vw; object-fit: contain; }
.pk-logo[hidden] { display: none; }
/* L hote prend la place restante ; la planche s y inscrit (voir rendu.js). */
.pk-hote { position: relative; flex: 1 1 auto; min-height: 0; width: min(94vw, 460px); display: flex; align-items: center; justify-content: center; }
.pk-hote[hidden] { display: none; }
.pk-fete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

.pk-scene { position: relative; border-radius: 5%/3.5%; box-shadow: 0 10px 22px rgba(0, 0, 0, .45); }
/* Toucher la planche lâche la bille : la page ne doit pas défiler avec le doigt. */
.pk-scene.pk-attente { touch-action: none; cursor: pointer; }
.pk-toile { display: block; width: 100%; height: 100%; }
.pk-calque { position: absolute; inset: 0; pointer-events: none; }

/* Le lot sorti du cadeau : il monte de la case et grossit. */
.pk-revele { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 38%; transform: translateX(-50%); animation: pk-sort .5s cubic-bezier(.2, 1.4, .5, 1) both; }
.pk-revele-image { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.pk-revele-signe { font-size: clamp(38px, 12vw, 64px); line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.pk-revele-libelle { max-width: 180%; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #ffffff; font-weight: 900; font-size: clamp(12px, 3.6vw, 16px); line-height: 1.15; text-align: center; white-space: normal; }
.pk-revele-libelle:empty { display: none; }
.pk-revele-gagne .pk-revele-libelle { background: var(--jeu-bouton-fond, #ff842b); color: var(--jeu-bouton-texte, #ffffff); }
.pk-scene.pk-verdict-gagne { animation: pk-secousse .42s ease-out; }
.pk-scene.pk-verdict-perdu { animation: pk-affaisse .3s ease-out; }

.pk-bouton { border: none; border-radius: 999px; padding: 14px 38px; background: var(--jeu-bouton-fond); color: var(--jeu-bouton-texte); font-family: inherit; font-weight: 900; font-size: clamp(15px, 4.4vw, 20px); letter-spacing: .08em; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pk-bouton:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }
/* Le bouton garde sa place une fois masqué : sinon la planche, centrée dans
   la zone, sauterait au moment du lâcher. */
.pk-bouton[hidden] { display: block; visibility: hidden; }

@keyframes pk-sort { from { opacity: 0; translate: 0 40%; scale: .4; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes pk-secousse { 0%, 100% { translate: 0 0; } 20% { translate: -1.6% .6%; } 45% { translate: 1.3% -.5%; } 70% { translate: -.7% .2%; } }
@keyframes pk-affaisse { 0%, 100% { translate: 0 0; } 40% { translate: 0 1.2%; } }

/* Mouvement réduit : pas de secousse ni de sortie rebondie ; la chute et
   l ouverture du cadeau, elles, restent — c est le jeu. */
@media (prefers-reduced-motion: reduce) {
  .pk-revele, .pk-scene.pk-verdict-gagne, .pk-scene.pk-verdict-perdu { animation: none; }
}