/* ================= Surprise Egg ================= */
.game-egg { justify-content: center; gap: 2vmin; }
.game-egg .egg-dots .pop-dot { background: #fff; }
.game-egg .egg-dots .pop-dot.on { background: #ff6fb5; }

.egg-scene { position: relative; width: min(74vmin, 94vw); height: min(66vmin, 72vh); }

.egg-wrap {
  position: absolute; left: 50%; bottom: 17%; width: 36vmin; height: 47vmin; margin-left: -18vmin;
  z-index: 2; cursor: pointer; touch-action: none; transform-origin: 50% 95%;
  animation: popIn .6s var(--pop) backwards, eggRock 2.6s ease-in-out .6s infinite, eggHop 4.5s ease-in-out 1s infinite;
}
@keyframes eggRock { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes eggHop {
  0%, 80%, 100% { translate: 0 0; }
  85% { translate: 0 -4vmin; }
  90% { translate: 0 0; }
  94% { translate: 0 -1.5vmin; }
}
.egg-inner { width: 100%; height: 100%; transform-origin: 50% 100%; }
.egg-inner.egg-squash { animation: eggSquash .45s var(--pop); }
@keyframes eggSquash {
  0% { transform: scale(1); }
  25% { transform: scale(1.14, .84); }
  55% { transform: scale(.93, 1.08) rotate(-3deg); }
  80% { transform: scale(1.03, .97) rotate(2deg); }
  100% { transform: scale(1); }
}
.egg-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 1vmin 0 rgba(0, 0, 0, .1)); }

.egg-cracks > * { opacity: 0; transition: opacity .12s; }
.crack-1 .c1, .crack-2 .c2, .crack-3 .c3 { opacity: 1; }

.egg-wrap.egg-shaking { animation: none; }
.egg-shaking .egg-inner { animation: eggShake .08s linear infinite alternate; }
@keyframes eggShake {
  from { transform: rotate(-6deg) scale(1.02); }
  to { transform: rotate(6deg) scale(1.06, .98); }
}

.egg-wrap.egg-open { animation: none; cursor: default; }
.egg-top, .egg-bottom { transform-box: fill-box; transform-origin: 50% 100%; }
.egg-open .egg-top {
  transform: translate(-30%, -120%) rotate(-70deg); opacity: 0;
  transition: transform .8s cubic-bezier(.2, .9, .3, 1), opacity .5s .45s;
}
.egg-open .egg-bottom { animation: eggBottom .6s var(--pop); }
@keyframes eggBottom { 0% { transform: scale(1.1, .85); } 60% { transform: scale(.95, 1.05); } 100% { transform: none; } }
.egg-open .egg-cracks { opacity: 0; }

.egg-surprise {
  position: absolute; left: 50%; bottom: 30%; width: 34vmin; height: 34vmin; margin-left: -17vmin;
  z-index: 1; transform: scale(0); pointer-events: none;
}
.egg-surprise .emoji { font-size: 28vmin; }
.egg-surprise.show { z-index: 4; animation: eggPrize .9s var(--pop) forwards; }
.egg-surprise.show .emoji { animation: eggPrizeIdle 1s ease-in-out .9s infinite alternate; }
@keyframes eggPrize {
  0% { transform: translateY(40%) scale(.2) rotate(-20deg); }
  55% { transform: translateY(-45%) scale(1.3, 1.15) rotate(8deg); }
  75% { transform: translateY(-22%) scale(.95, 1.08); }
  100% { transform: translateY(-28%) scale(1); }
}
@keyframes eggPrizeIdle {
  from { transform: rotate(-8deg) scale(1); }
  to { transform: rotate(8deg) scale(1.06, .96); }
}

.egg-rays {
  position: absolute; left: 50%; top: 42%; width: 90vmin; height: 90vmin; margin: -45vmin 0 0 -45vmin;
  border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 214, 90, .55) 0 10deg, transparent 10deg 22deg);
  mask: radial-gradient(circle, #000 20%, transparent 68%);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%);
}
.egg-rays.show { animation: eggRaysIn .6s var(--pop) forwards, spin 7s linear infinite; }
@keyframes eggRaysIn { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }

.egg-flash {
  position: absolute; left: 50%; top: 50%; width: 120vmin; height: 120vmin; margin: -60vmin 0 0 -60vmin; z-index: 5;
  border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0 20%, rgba(255, 255, 255, 0) 60%);
  animation: eggFlash .55s ease-out forwards;
}
@keyframes eggFlash { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }

.egg-nest {
  position: absolute; left: 50%; bottom: 3%; width: 56vmin; height: 21vmin; margin-left: -28vmin;
  z-index: 3; pointer-events: none; animation: popIn .6s var(--pop) .1s backwards;
}

.egg-hint {
  position: absolute; left: 62%; top: 40%; z-index: 6; font-size: 11vmin; pointer-events: none;
  animation: eggHint 1.1s ease-in-out 1.2s infinite, fadeIn .3s 1.2s backwards;
}
@keyframes eggHint {
  0%, 100% { transform: translate(0, 0) rotate(-15deg); }
  40% { transform: translate(-3vmin, -3vmin) rotate(-25deg) scale(.9); }
  55% { transform: translate(-3vmin, -3vmin) rotate(-25deg) scale(.8); }
}

/* Phones / tablets in portrait: vmin is the narrow width, so size the scene from vw instead. */
@media (orientation: portrait) {
  .egg-scene { width: 94vw; height: min(62vh, 150vw); }
  .egg-wrap { width: 50vw; height: 65vw; margin-left: -25vw; }
  .egg-nest { width: 78vw; height: 29vw; margin-left: -39vw; }
  .egg-surprise { width: 46vw; height: 46vw; margin-left: -23vw; }
  .egg-surprise .emoji { font-size: 38vw; }
  .egg-hint { font-size: 14vw; left: 66%; }
}