/* L'éclosion d'un œuf mystère (js/eclosion.js) : une scène plein écran au-dessus du jeu, l'œuf en pixels sur son socle,
   la boîte de texte en bas comme dans les jeux Pokémon. */
.eclosion {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px;
  background: radial-gradient(circle at 50% 42%, #FFF6E5 0, #FFE3A8 32%, #F2B866 62%, #C9773A 100%);
  animation: eclosion-entree 0.35s ease-out;
  cursor: pointer;
}
.eclosion.sortie { opacity: 0; transition: opacity 0.25s; }
@keyframes eclosion-entree { from { opacity: 0; } }

.eclosion-scene { position: relative; width: min(360px, 90vw); height: 300px; }
/* Des rayons qui tournent doucement derrière l'œuf. */
.eclosion-halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.5) 0 10deg, rgba(255, 255, 255, 0) 10deg 30deg);
  border-radius: 50%;
  mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  animation: eclosion-rayons 18s linear infinite;
}
@keyframes eclosion-rayons { to { transform: rotate(360deg); } }
.eclosion-socle { position: absolute; left: 50%; bottom: 34px; width: 200px; height: 40px; margin-left: -100px; background: radial-gradient(ellipse, rgba(28, 27, 46, 0.32), rgba(28, 27, 46, 0) 70%); }

.eclosion-oeuf {
  position: absolute;
  left: 50%;
  bottom: 52px;
  width: 160px;
  height: 160px;
  margin-left: -80px;
  image-rendering: pixelated;
  transform-origin: 50% 92%;
}
/* Le balancement, de plus en plus nerveux. */
.eclosion-oeuf.tremble { animation: eclosion-tremble 0.5s ease-in-out; }
.eclosion-oeuf.tremble-fort { animation: eclosion-tremble 0.28s ease-in-out 2; }
@keyframes eclosion-tremble {
  20% { transform: rotate(-12deg); }
  45% { transform: rotate(10deg); }
  70% { transform: rotate(-6deg); }
  90% { transform: rotate(3deg); }
}
.eclos .eclosion-oeuf { animation: eclosion-disparait 0.2s forwards; }
@keyframes eclosion-disparait { to { opacity: 0; transform: scale(1.25); } }

.eclosion-pokemon { position: absolute; left: 50%; bottom: 52px; width: 0; height: 0; opacity: 0; }
.eclosion-pokemon .sprite { position: absolute; background-repeat: no-repeat; image-rendering: pixelated; }
.eclosion-pokemon .sprite.portrait-seul { left: -60px; top: -120px; }
.eclosion-pokemon .portrait.grand { width: 120px; height: 120px; border: 4px solid var(--da-encre, #1C1B2E); border-radius: 50%; background: #fff; }
.eclos .eclosion-pokemon { animation: eclosion-apparait 0.6s 0.25s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
@keyframes eclosion-apparait {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: none; }
}

/* L'éclair blanc, puis les coquilles qui s'envolent. */
.eclosion-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.eclos .eclosion-flash { animation: eclosion-flash 0.7s ease-out; }
@keyframes eclosion-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.eclosion-eclats { position: absolute; left: 50%; bottom: 120px; }
.eclosion-eclats i {
  position: absolute;
  width: 18px;
  height: 14px;
  margin: -7px 0 0 -9px;
  background: #FFEFB5;
  border: 3px solid #313131;
  clip-path: polygon(0 30%, 40% 0, 100% 20%, 80% 100%, 20% 85%);
  animation: eclosion-eclat 0.9s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
.eclosion-eclats i.vert { background: #73C58C; }
@keyframes eclosion-eclat {
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; }
}

.eclosion-bas { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(560px, 100%); cursor: default; }
.eclosion-texte {
  width: 100%;
  min-height: 82px;
  padding: 14px 18px;
  background: #fff;
  border: 4px solid var(--da-encre, #1C1B2E);
  border-radius: 16px;
  box-shadow: 0 5px 0 var(--da-encre, #1C1B2E);
  color: var(--da-encre, #1C1B2E);
  font: 700 20px var(--da-titres, sans-serif);
}
.eclosion-texte p { margin: 0 0 6px; }
.eclosion-texte .petit { font-size: 14px; font-weight: 600; }
.eclosion-bas .actions { justify-content: center; margin: 0; }
.eclosion-bas button { min-width: 160px; }

@media (max-width: 520px) {
  .eclosion-scene { height: 260px; }
  .eclosion-texte { font-size: 17px; min-height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .eclosion-halo { animation: none; }
}