/* ============ Яйца дроп ============ */
.eggs {
  padding: 22px;
  margin-bottom: 30px;
  border-radius: 26px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.eggs__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.eggs__head h1 { margin: 0 0 4px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.eggs__head p { margin: 0; }

.meadow {
  position: relative;
  height: 340px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #7fc8ff 0%, #bfe6ff 48%, #9fe07a 48.2%, #5fb84a 100%);
}
[data-theme="dark"] .meadow { background: linear-gradient(180deg, #1c2b55 0%, #3a4f8a 48%, #2f6b2e 48.2%, #1d4a1f 100%); }
.meadow__sun { position: absolute; right: 8%; top: 9%; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, #fff6b0, #ffd23f 60%, transparent 70%); filter: blur(.5px); }
[data-theme="dark"] .meadow__sun { background: radial-gradient(circle, #fffbe6, #e8e4c9 55%, transparent 70%); }
.meadow__hill { position: absolute; left: -10%; right: -10%; top: 40%; height: 60px; border-radius: 50%; background: color-mix(in srgb, #5fb84a 70%, #000); opacity: .35; }
.meadow__hint {
  position: absolute; left: 50%; top: 14%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
}
.meadow__hint:empty { display: none; }

/* Заяц с лукошком */
.bunny { position: absolute; left: -120px; top: 30%; display: flex; align-items: flex-end; font-size: 64px; line-height: 1; z-index: 3; pointer-events: none; }
.bunny__body { transform: scaleX(-1); display: inline-block; }
.bunny__basket { font-size: 38px; margin-left: -18px; margin-bottom: 4px; }
.bunny.is-run { animation: bunnyRun var(--run, 1.6s) linear forwards; }
.bunny.is-run .bunny__body, .bunny.is-run .bunny__basket { animation: hop .32s ease-in-out infinite; }
@keyframes bunnyRun { from { left: -120px; } to { left: calc(100% + 40px); } }
@keyframes hop { 50% { transform: translateY(-14px) scaleX(-1); } }
.bunny.is-run .bunny__basket { animation-name: hopBasket; }
@keyframes hopBasket { 50% { transform: translateY(-14px) rotate(-8deg); } }

/* Яйца на поляне */
.meadow__eggs { position: absolute; inset: 0; }
.megg { position: absolute; width: 64px; height: 80px; margin: -40px 0 0 -32px; z-index: 2; }
.egg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .3)); }
.megg--idle { animation: idleWobble 2.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes idleWobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(0); } }
.megg.is-drop { opacity: 0; animation: eggDrop .6s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: var(--drop); }
@keyframes eggDrop { 0% { opacity: 0; transform: translateY(-120px) scale(.6) rotate(-30deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.megg.is-spin { opacity: 1; animation: eggSpin var(--spin) ease-in-out infinite; }
@keyframes eggSpin { 0%, 100% { transform: rotate(-18deg) translateY(0); } 50% { transform: rotate(18deg) translateY(-8px); } }
.megg.is-dim { opacity: .35; filter: grayscale(.6); transition: opacity .4s, filter .4s; }

/* Раскол */
.megg.is-crack { z-index: 4; animation: eggPop .5s cubic-bezier(.2, 1.4, .4, 1) forwards; opacity: 1; }
@keyframes eggPop { to { transform: scale(1.25); } }
.megg.is-crack .egg__top { transform-origin: 20% 70%; animation: shellOff .55s ease-out .15s forwards; }
@keyframes shellOff { to { transform: translate(-18px, -38px) rotate(-55deg); opacity: 0; } }
.megg.is-crack .egg { filter: drop-shadow(0 0 14px var(--r, #fff)); }
.megg__prize {
  position: absolute; left: 50%; top: -6px;
  transform: translate(-50%, 30px) scale(.3);
  opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none;
}
.megg.is-crack .megg__prize { animation: prizeUp .55s cubic-bezier(.2, 1.4, .4, 1) .35s forwards; }
@keyframes prizeUp { to { transform: translate(-50%, -30px) scale(1); opacity: 1; } }
.megg__prize img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 10px var(--r, #fff)); }
.megg__prize b { display: flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; white-space: nowrap; }
.megg__prize .coin { color: #fff; width: 14px; height: 14px; }
.egg__spark { animation: spark 1.2s ease-in-out infinite; transform-origin: 83px 28px; }
@keyframes spark { 50% { transform: scale(.4); opacity: .4; } }

.eggs__controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.eggs__controls .counts { margin-top: 0; }
.eggs__controls .btn--open { margin: 0; }
.eggs__controls #eggsAction { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Что внутри */
.egg-groups { display: flex; flex-direction: column; gap: 18px; }
.egg-group__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 17px; }
.egg-group__head b { color: var(--r); }
.egg--icon { width: 28px; height: 34px; }

@media (max-width: 760px) {
  .eggs { padding: 14px; }
  .meadow { height: 280px; }
  .megg { width: 48px; height: 60px; margin: -30px 0 0 -24px; }
  .megg__prize img { width: 42px; height: 42px; }
  .bunny { font-size: 48px; }
  .bunny__basket { font-size: 28px; }
  .eggs__controls .btn--open { width: 100%; }
}

/* Выбор яйца */
.megg.is-pick { opacity: 1; cursor: pointer; animation: pickBob 1.3s ease-in-out infinite; animation-delay: calc(var(--spin) * -2); }
@keyframes pickBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.megg.is-pick:hover .egg { filter: drop-shadow(0 0 12px #fff) drop-shadow(0 8px 6px rgba(0, 0, 0, .3)); }
.megg.is-pick:hover { z-index: 3; }
.meadow__auto {
  position: absolute; left: 50%; bottom: 12px;
  transform: translateX(-50%);
  z-index: 5;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-weight: 800; font-size: 13px;
  border: 1px solid rgba(255, 255, 255, .25);
}
.meadow__auto:hover { background: rgba(0, 0, 0, .6); }
.meadow__auto:disabled { opacity: .5; }