/* egg-open.css — сцена «тап-яйцо» (egg-open.js). Двигаются только transform/opacity — без перерисовки на слабых андроидах. */
body.eo-open{ overflow: hidden; }
.eo{ position: fixed; inset: 0; z-index: calc(var(--z-modal, 20001) + 20); background: #0b0f22;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: manipulation; animation: eoIn .25s ease-out; }
@keyframes eoIn{ from{ opacity: 0; } }
.eo-sc{ --eo-c: #b0b0b0; position: absolute; inset: 0; overflow: hidden; color: #fff; }
.eo-bg{ position: absolute; inset: 0; transition: background .35s;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--eo-c) 62%, #0d1126) 0%, color-mix(in srgb, var(--eo-c) 18%, #0d1126) 45%, #0b0f22 78%); }
.eo-rays{ position: absolute; left: 50%; top: 46%; width: 680px; height: 680px; margin: -340px 0 0 -340px; opacity: var(--eo-ray, .2);
  background: repeating-conic-gradient(color-mix(in srgb, var(--eo-c) 80%, #fff) 0 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 60%); mask-image: radial-gradient(circle, #000 8%, transparent 60%);
  will-change: transform; animation: eoSpin var(--eo-spd, 16s) linear infinite; transition: opacity .35s; }
@keyframes eoSpin{ to{ transform: rotate(360deg); } }
.eo-cv{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.eo-ttl{ position: absolute; top: calc(env(safe-area-inset-top, 0px) + 22px); left: 0; right: 0; text-align: center; font-weight: 900; font-size: 20px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }

/* свечение — отдельный слой за яйцом (вместо drop-shadow, который пришлось бы перерисовывать при тряске) */
.eo-glow{ position: absolute; left: 50%; top: 46%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--eo-c) 75%, #fff) 0%, color-mix(in srgb, var(--eo-c) 35%, transparent) 38%, transparent 68%);
  will-change: transform, opacity; animation: eoPulse 1.6s ease-in-out infinite; }
@keyframes eoPulse{ 50%{ transform: scale(1.12); opacity: .7; } }

.eo-egg{ position: absolute; left: 50%; top: 46%; width: 180px; height: 200px; margin: -100px 0 0 -90px; border: 0; background: none; padding: 0; cursor: pointer; }
.eo-in{ display: block; width: 100%; height: 100%; will-change: transform; }
.eo-in img{ display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; will-change: transform; }
.eo-egg.tr .eo-in{ animation: eoTremble var(--eo-trs, .12s) linear infinite; }
@keyframes eoTremble{ 0%{ transform: translate(0,0) rotate(0); } 25%{ transform: translate(var(--eo-tra), -1px) rotate(1deg); } 50%{ transform: translate(0,1px) rotate(0); } 75%{ transform: translate(calc(var(--eo-tra) * -1), -1px) rotate(-1deg); } }
.eo-egg.bump img{ animation: eoBump .3s ease-out; }
@keyframes eoBump{ 35%{ transform: scale(.9, 1.08); } 70%{ transform: scale(1.05, .96); } }
.eo-egg.up img{ animation: eoUp .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes eoUp{ 0%{ transform: scale(.8); } 40%{ transform: scale(1.28) rotate(-6deg); } 100%{ transform: scale(1); } }
.eo-sc.shake{ animation: eoShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes eoShake{ 10%,90%{ transform: translate(-2px,1px); } 20%,80%{ transform: translate(4px,-2px); } 30%,50%,70%{ transform: translate(-7px,3px); } 40%,60%{ transform: translate(7px,-3px); } }

.eo-lab, .eo-rar{ position: absolute; left: 0; right: 0; text-align: center; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; pointer-events: none;
  color: #fff; -webkit-text-stroke: 2px var(--eo-c); paint-order: stroke fill; text-shadow: 0 0 18px var(--eo-c), 0 4px 0 rgba(0,0,0,.35); }
.eo-lab{ top: calc(46% + 112px); font-size: 30px; }
.eo-rar{ top: calc(44% - 132px); font-size: 22px; }
.slam{ animation: eoSlam .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes eoSlam{ 0%{ transform: scale(2.6) rotate(-8deg); opacity: 0; } 60%{ opacity: 1; } 100%{ transform: scale(1) rotate(0); } }

.eo-hint{ position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 116px); text-align: center; font-weight: 900; font-size: 15px; opacity: .85; animation: eoBlink 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes eoBlink{ 50%{ opacity: .4; } }
.eo-taps{ position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); display: flex; justify-content: center; gap: 9px; pointer-events: none; }
.eo-taps i{ width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background .2s, box-shadow .2s; }
.eo-taps i.on{ background: #fff; box-shadow: 0 0 10px var(--eo-c); }
.eo-skip{ position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); padding: 10px 20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.28); color: #c9cde4; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.eo-flash{ position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.eo-flash.on{ animation: eoFlash .5s ease-out; }
@keyframes eoFlash{ 0%{ opacity: .85; } 100%{ opacity: 0; } }

/* голубь: сначала силуэт, потом «проявляется» */
.eo-pg{ position: absolute; left: 50%; top: 44%; width: 190px; height: 190px; margin: -95px 0 0 -95px; pointer-events: none; }
.eo-pg img{ width: 100%; height: 100%; object-fit: contain; filter: brightness(0); transition: filter .45s; animation: eoPop .6s cubic-bezier(.2,1.6,.4,1); }
.eo-pg.lit img{ filter: none; }
@keyframes eoPop{ from{ transform: scale(.3); opacity: 0; } }
.eo-name{ position: absolute; left: 12px; right: 12px; top: calc(44% + 104px); text-align: center; font-size: 25px; font-weight: 900; text-shadow: 0 2px 10px rgba(0,0,0,.6); animation: eoIn .4s ease-out; }
.eo-name small{ display: block; margin-top: 6px; font-size: 14px; font-weight: 800; color: #ffd35a; text-shadow: none; }
.eo-row{ position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); display: flex; gap: 10px; max-width: 420px; margin: 0 auto; animation: eoIn .4s ease-out; }
.eo-btn{ flex: 1; height: 54px; border: 0; border-radius: 16px; font: inherit; font-size: 17px; font-weight: 900; color: #fff; cursor: pointer; }
.eo-btn.no{ background: rgba(255,255,255,.12); }
.eo-btn.go{ background: linear-gradient(180deg, #34d46e, #1fa750); box-shadow: 0 4px 14px rgba(31,167,80,.35); }
.eo-btn:active, .eo-skip:active{ transform: scale(.96); }
.eo-skip:active{ transform: translateX(-50%) scale(.96); }

@media (max-height: 600px){
  .eo-egg{ width: 150px; height: 168px; margin: -84px 0 0 -75px; }
  .eo-lab{ top: calc(46% + 92px); font-size: 26px; }
  .eo-pg{ width: 160px; height: 160px; margin: -80px 0 0 -80px; }
  .eo-name{ top: calc(44% + 86px); font-size: 22px; }
  .eo-rar{ top: calc(44% - 112px); }
}
@media (prefers-reduced-motion: reduce){ .eo-rays, .eo-glow, .eo-hint, .eo-egg.tr .eo-in{ animation: none; } }