/* Instalar la app: oferta, pasos de iPhone, animación del huevito y aviso de versión nueva. Mismos tokens que juego.css. */
.inst-back{position:fixed;inset:0;z-index:80;background:rgba(40,25,80,.45);display:flex;align-items:flex-end;justify-content:center}
.inst-sheet{box-sizing:border-box;width:100%;max-width:480px;background:var(--panel);border-radius:28px 28px 0 0;text-align:center;
  padding:18px max(18px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));animation:slideUp .3s ease-out}
@media (min-width:700px){.inst-back{align-items:center}.inst-sheet{border-radius:28px}}
.inst-egg{width:110px;height:110px;margin:0 auto}
.inst-egg svg{width:100%;height:100%}
.inst-kicker{display:block;font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--accent)}
.inst-sheet h3{margin:4px 0 6px;font-size:26px;font-weight:900;text-wrap:balance}
.inst-lead{margin:0 0 12px;font-size:16px;color:var(--ink-soft);font-weight:700;text-wrap:balance}
.inst-list{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left}
.inst-list li{background:var(--panel-2);border-radius:14px;padding:9px 12px;font-size:15px}
.inst-steps{margin:0 0 6px;padding:0;list-style:none;counter-reset:p;display:flex;flex-direction:column;gap:8px;text-align:left}
.inst-steps li{counter-increment:p;display:flex;align-items:center;gap:10px;background:var(--panel-2);border-radius:14px;padding:10px 12px;font-size:16px}
.inst-steps li::before{content:counter(p);flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center}
.inst-steps li span{flex:1}
.inst-steps li i{font-style:normal;font-size:22px}
.ios-share{animation:bob 1.2s ease-in-out infinite}

.installing{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  background:radial-gradient(circle at 50% 35%,#fff6fb,#e9e0ff 55%,#c6efe0);padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px));overflow:hidden}
.installing h2{margin:0;font-size:30px;font-weight:900}
.inst-sky i{position:absolute;width:10px;height:10px;border-radius:50%;background:#ffd23f;box-shadow:0 0 12px #ffd23f;animation:twinkle 1.6s ease-in-out infinite}
.inst-sky i:nth-child(1){top:12%;left:14%}.inst-sky i:nth-child(2){top:20%;right:16%;animation-delay:-.4s}
.inst-sky i:nth-child(3){top:62%;left:8%;animation-delay:-.8s}.inst-sky i:nth-child(4){top:70%;right:10%;animation-delay:-1.2s}
.inst-sky i:nth-child(5){top:40%;left:22%;animation-delay:-.2s;background:#ff9ecb;box-shadow:0 0 12px #ff9ecb}.inst-sky i:nth-child(6){top:34%;right:24%;animation-delay:-1s;background:#7cc8ff;box-shadow:0 0 12px #7cc8ff}
.inst-stage{position:relative;width:min(62vw,40vh,300px);aspect-ratio:1}
.inst-bigegg,.inst-born{position:absolute;inset:0}
.inst-bigegg svg,.inst-born svg{width:100%;height:100%}
.inst-bigegg svg{animation:eggshake .5s ease-in-out infinite;transform-origin:50% 95%}
.inst-bigegg.pop svg{animation:eggpop .45s ease-in forwards}
.inst-born svg{animation:hop .6s ease-out 3}
.inst-phrase{margin:0;min-height:1.4em;font-size:19px;font-weight:700;color:var(--ink-soft)}
.inst-progress{display:flex;align-items:center;gap:10px;width:min(80vw,360px)}
.inst-bar{flex:1;height:16px;border-radius:99px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 2px var(--line)}
.inst-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff5c8a,#7b5cff);border-radius:inherit;transition:width .1s linear}
.inst-progress b{font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}
.inst-done{width:min(86vw,360px)}
.inst-done p{margin:0 0 6px;font-size:19px;font-weight:900}
.inst-done .inst-hint{font-size:14px;font-weight:700;color:var(--ink-soft);margin-top:10px}

.update-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:85;display:flex;align-items:center;gap:12px;
  background:var(--ink);color:#fff;border-radius:99px;padding:8px 8px 8px 16px;font-weight:700;font-size:15px;box-shadow:0 6px 18px rgba(58,42,94,.3);white-space:nowrap;max-width:calc(100% - 32px)}
.update-bar button{border:0;border-radius:99px;background:#ffd23f;color:var(--ink);font-weight:900;font-size:15px;padding:8px 14px}

@keyframes eggshake{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
@keyframes eggpop{to{transform:scale(1.35);opacity:0;filter:brightness(2.5)}}
@media (prefers-reduced-motion:reduce){.inst-bigegg svg,.inst-born svg,.inst-sky i,.ios-share{animation:none}}