/* Zone du jeu Casse l oeuf : consigne, grille d oeufs, marteau, verdict,
   logo et confettis. Tout est DOM : chaque oeuf est dessine deux fois et
   decoupe (clip-path) en chapeau et en base ; les coups, la fissure et
   l ouverture sont des animations CSS. */
.oe-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; }
.oe-jeu[hidden] { display: none; }
.oe-consigne { margin: 0; min-height: 1.3em; color: #ffffff; font-weight: 900; font-size: clamp(16px, 4.6vw, 24px); text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.oe-etat { margin: 0; color: var(--jeu-hud-texte); font-weight: 900; font-size: clamp(20px, 6vw, 32px); letter-spacing: .06em; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.oe-consigne[hidden], .oe-etat[hidden] { display: none; }
.oe-hote { position: relative; width: min(92vw, 440px); }
.oe-logo { max-height: 44px; max-width: 50vw; object-fit: contain; }
.oe-logo[hidden] { display: none; }
.oe-fete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

.oe-scene { display: grid; grid-template-columns: repeat(var(--oe-colonnes, 3), 1fr); gap: clamp(10px, 3.5vw, 20px) clamp(14px, 6vw, 34px); justify-items: center; }
.oe-oeuf { position: relative; width: 100%; max-width: 130px; aspect-ratio: 100 / 130; border: none; padding: 0; margin: 0; background: transparent; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  opacity: 0; transform: translateY(18px) scale(.7); transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1), filter .3s ease; transition-delay: calc(var(--oe-i, 0) * 40ms); }
.oe-scene.oe-pret .oe-oeuf { opacity: 1; transform: none; }
.oe-oeuf:disabled { cursor: default; }
.oe-oeuf:focus-visible { outline: 3px solid #ffffff; outline-offset: 6px; border-radius: 40%; }
.oe-coque { position: absolute; inset: 0; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.oe-haut, .oe-bas { position: absolute; inset: 0; }
.oe-haut { z-index: 3; transform-origin: 70% 48%; transition: transform .6s cubic-bezier(.2, .7, .3, 1), opacity .6s ease .15s; }
.oe-bas { z-index: 1; }
.oe-dessin, .oe-dessin svg, .oe-haut img, .oe-bas img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.oe-logo-oeuf { position: absolute; left: 50%; top: 72%; width: 44%; max-height: 22%; object-fit: contain; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }

/* Fissure : le trait s allonge avec --oe-fissure (0 a 1). */
.oe-fissure { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.oe-fissure path { fill: none; stroke: #1f1d4d; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--oe-fissure, 0) * 100); transition: stroke-dashoffset .12s ease-out; }

/* Interieur de l oeuf, visible une fois le chapeau parti. */
.oe-interieur { position: absolute; left: 12%; right: 12%; top: 41%; height: 13%; border-radius: 50%; background: radial-gradient(ellipse at 50% 70%, #fff4d8 0 45%, #f0d89e 75%); box-shadow: inset 0 3px 0 rgba(31, 29, 77, .5); z-index: 2; opacity: 0; transition: opacity .2s ease; }

/* Grille en jeu : on touche, les autres s effacent. */
.oe-scene.oe-choix .oe-oeuf { cursor: pointer; animation: oe-appel 1.6s ease-in-out infinite; animation-delay: calc(var(--oe-i, 0) * 120ms); }
.oe-scene.oe-choix .oe-oeuf:hover { filter: brightness(1.08); }
.oe-scene.oe-joue .oe-oeuf:not(.oe-choisi) { opacity: .35; transform: scale(.9); transition-delay: 0s; }
.oe-oeuf.oe-choisi { z-index: 5; transform: scale(1.12); transition-delay: 0s; }

.oe-oeuf.oe-secoue .oe-coque { animation: oe-secousse .26s ease; }
.oe-oeuf.oe-ouvert .oe-haut { transform: translate(40%, -95%) rotate(38deg); opacity: 0; }
.oe-oeuf.oe-ouvert .oe-fissure { opacity: 0; }
.oe-oeuf.oe-ouvert .oe-interieur { opacity: 1; }

/* Marteau : pose en haut a droite de l oeuf choisi, pivot sur le manche. */
.oe-marteau { position: absolute; right: -38%; top: -42%; width: 52%; z-index: 6; transform-origin: 50% 95%; transform: rotate(35deg); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.oe-marteau svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.oe-marteau.oe-frappe { animation: oe-coup var(--oe-coup, 420ms) cubic-bezier(.5, 0, .5, 1); }
.oe-marteau.oe-attente { animation: oe-attente .7s ease-in-out infinite; }
.oe-marteau.oe-range { opacity: 0; transform: rotate(60deg) translate(30%, -20%); }

/* Contenu : le lot monte de l oeuf, ou une bouffee s en echappe. */
.oe-contenu { position: absolute; left: 50%; top: 46%; width: 115%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translate(-50%, -20%) scale(.2); opacity: 0; pointer-events: none; }
.oe-contenu.oe-gagne, .oe-contenu.oe-vide { animation: oe-sortie .7s cubic-bezier(.3, 1.5, .5, 1) .15s forwards; }
.oe-lot-image { width: 70%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }
.oe-lot-image svg { display: block; width: 100%; height: 100%; }
.oe-lot-libelle { max-width: 100%; padding: 4px 8px; border-radius: 10px; background: #ffffff; color: #1f1d4d; font-weight: 900; font-size: clamp(11px, 3vw, 15px); line-height: 1.15; text-align: center; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.oe-contenu.oe-vide::before { content: ''; width: 60%; aspect-ratio: 1.4; border-radius: 50%; background: radial-gradient(circle at 35% 55%, rgba(255, 255, 255, .9) 0 22%, transparent 23%), radial-gradient(circle at 62% 45%, rgba(255, 255, 255, .85) 0 26%, transparent 27%), radial-gradient(circle at 50% 70%, rgba(255, 255, 255, .8) 0 24%, transparent 25%); }

@keyframes oe-appel { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes oe-secousse { 0%, 100% { transform: none; } 25% { transform: translateX(-4%) rotate(-3deg); } 60% { transform: translateX(3%) rotate(2deg); } }
@keyframes oe-coup { 0% { transform: rotate(35deg); } 40% { transform: rotate(70deg); } 62% { transform: rotate(-25deg); } 100% { transform: rotate(35deg); } }
@keyframes oe-attente { 0%, 100% { transform: rotate(35deg); } 50% { transform: rotate(50deg); } }
@keyframes oe-sortie { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.2); } 100% { opacity: 1; transform: translate(-50%, -105%) scale(1); } }

/* Mouvement reduit : pas d appel en boucle ni de secousse ; le coup et
   l ouverture restent (c est le jeu). */
@media (prefers-reduced-motion: reduce) {
  .oe-scene.oe-choix .oe-oeuf { animation: none; }
  .oe-oeuf.oe-secoue .oe-coque { animation: none; }
  .oe-oeuf { transition-duration: .01s; transition-delay: 0s; }
}