/* Zone de jeu Piñata : consigne, compteur de coups, piñata suspendue,
   bouton logo et confettis. Tout est DOM : les coups et la casse sont des
   animations CSS, il n y a pas de canvas de jeu. */
.pn-jeu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; 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; }
.pn-jeu[hidden] { display: none; }
.pn-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); }
.pn-coups { margin: 0; color: var(--jeu-hud-texte); font-weight: 900; font-size: clamp(13px, 3.6vw, 18px); letter-spacing: .06em; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.pn-coups[hidden] { display: none; }
.pn-consigne[hidden] { display: none; }
.pn-hote { position: relative; flex: 0 1 auto; width: min(86vw, 420px); }
.pn-logo { max-height: 44px; max-width: 50vw; object-fit: contain; }
.pn-logo[hidden] { display: none; }
.pn-fete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

.pn-scene { position: relative; display: flex; flex-direction: column; align-items: center; }
/* La corde descend du haut de l ecran : la pinata pend, elle ne flotte pas. */
.pn-corde { width: 3px; height: clamp(28px, 8vh, 72px); background: rgba(255, 255, 255, .7); border-radius: 2px; }
.pn-pinata { border: none; padding: 0; margin: 0; background: transparent; width: min(72vw, 320px); cursor: pointer; transform-origin: 50% -12%; animation: pn-balance 3.2s ease-in-out infinite; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pn-pinata:focus-visible { outline: 3px solid #ffffff; outline-offset: 6px; border-radius: 16px; }
.pn-pinata:disabled { cursor: default; }
.pn-pinata img, .pn-pinata .pn-dessin, .pn-pinata svg { display: block; width: 100%; height: auto; }
.pn-dessin { display: block; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .4)); }

/* Les fissures apparaissent une a une, au rythme des coups portes. */
.pn-fissure { opacity: 0; }
.pn-scene[data-fissures="1"] .pn-fissure:nth-child(1),
.pn-scene[data-fissures="2"] .pn-fissure:nth-child(-n+2),
.pn-scene[data-fissures="3"] .pn-fissure { opacity: 1; }

.pn-scene.pn-coup .pn-pinata { animation: pn-secousse .4s ease-out; }
.pn-scene.pn-cassee .pn-pinata { animation: pn-casse .5s ease-in forwards; }
.pn-scene.pn-cassee .pn-corde { opacity: .35; }

/* Le lot apparait a la place de la pinata, pas sous le vide qu elle
   laisse : la piece cassee s efface en meme temps. */
.pn-butin { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 14px; background: var(--jeu-voile); color: #ffffff; font-weight: 900; font-size: clamp(15px, 4.2vw, 22px); text-align: center; max-width: 100%; box-sizing: border-box; transform: translate(-50%, -50%); animation: pn-butin-entre .4s ease-out both; }
.pn-butin[hidden] { display: none; }
.pn-butin img { max-height: 28vh; max-width: 100%; border-radius: 10px; }

.pn-bonbons { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.pn-bonbon { position: absolute; top: 46%; width: 12px; height: 12px; border-radius: 3px; animation: pn-chute 1.1s ease-in forwards; }

@keyframes pn-balance { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes pn-secousse { 0% { transform: rotate(0) translateX(0); } 20% { transform: rotate(-9deg) translateX(-8px); } 45% { transform: rotate(7deg) translateX(7px); } 70% { transform: rotate(-4deg) translateX(-3px); } 100% { transform: rotate(0) translateX(0); } }
@keyframes pn-casse { 0% { transform: rotate(0) scale(1); opacity: 1; } 35% { transform: rotate(-14deg) scale(1.08); } 100% { transform: rotate(10deg) scale(.6) translateY(40px); opacity: 0; } }
@keyframes pn-chute { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(42vh) rotate(420deg); opacity: 0; } }
@keyframes pn-butin-entre { 0% { transform: translate(-50%, -50%) scale(.8); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* Mouvement reduit : la pinata ne balance plus et la casse se joue en
   fondu, le jeu reste jouable. */
@media (prefers-reduced-motion: reduce) {
  .pn-pinata { animation: none; }
  .pn-scene.pn-coup .pn-pinata { animation: none; opacity: .72; }
  .pn-scene.pn-cassee .pn-pinata { animation: pn-fondu .3s ease-out forwards; }
  .pn-bonbon { display: none; }
  .pn-butin { animation: none; }
  @keyframes pn-fondu { to { opacity: 0; } }
}