/* css/historia.css — HISTORIA ANIMADA de bienvenida (core/historia.js). Reglas comunes; las escenas
   de cada sección van en su CSS (irregulares.css · islas-patron.css · recompensas.css). */
.ci-ov{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(circle at 50% 35%,rgba(124,58,237,.55),rgba(30,27,75,.88));backdrop-filter:blur(6px)}
.ci-ov.on{display:flex;animation:appear .3s ease}
.ci-card{position:relative;width:min(560px,100%);display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:22px 20px 18px;border-radius:28px;background:var(--surface);box-shadow:0 24px 60px rgba(10,6,32,.45);text-align:center}
.ci-saltar{position:absolute;z-index:3;top:12px;right:14px;min-height:40px;padding:6px 14px;border:0;border-radius:99px;
  background:#F1EEFE;color:var(--purple);font-weight:800;font-size:.85rem;cursor:pointer}
.ci-escena{position:relative;width:100%;height:clamp(200px,42vw,260px);display:grid;place-items:center;overflow:hidden;
  border-radius:22px;background:radial-gradient(circle at 50% 60%,#FFF7E6 0%,#F3EEFF 70%)}
.ci-txt{margin:0;color:var(--deep);font-size:clamp(1.02rem,3.4vw,1.2rem);font-weight:700;line-height:1.45;min-height:3.2em;animation:ciTxt .45s ease}
.ci-txt b{color:var(--purple)}
.ci-pie{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.ci-puntos{display:flex;gap:8px}
.ci-puntos i{width:10px;height:10px;border-radius:50%;background:#E5E3F2;transition:background .3s,transform .3s}
.ci-puntos i.hecho{background:var(--purple-light)} .ci-puntos i.ahora{background:var(--purple);transform:scale(1.3)}
.ci-ok{width:auto;min-width:220px;min-height:52px;animation:ipPop .35s ease}
.ci-ok[hidden]{display:none!important}   /* .btn pone display: sin esto, se veía antes de la última escena */
.ci-chispa{position:absolute;left:var(--x);top:var(--y);color:#F5B400;font-style:normal;font-size:1rem;opacity:0;animation:ciChispa 2.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes ciCae{from{transform:translateY(-220px)}to{transform:translateY(0)}}
@keyframes ciPop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ciTxt{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ciLatido{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(124,58,237,0))}50%{transform:scale(1.06);filter:drop-shadow(0 0 14px rgba(124,58,237,.6))}}
@keyframes ciChispa{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){ .ci-chispa,.ci-txt,.ci-ok{animation:none!important;opacity:1} }

/* ═══ escenas de la HISTORIA de INICIO (screens/vocab.js historiaInicio) ═══ */
.ini-nodo{flex:0 0 auto;aspect-ratio:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#2FB574;box-shadow:0 5px 0 #1F7A4E;
  animation:ciPop .4s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * .3s)}
.ini-nodo img{width:30px;height:30px;filter:brightness(0) invert(1)}
.ini-nodo.es-isla{background:var(--purple);box-shadow:0 5px 0 var(--purple-hover)}
.ini-nodo.grande{width:84px;height:84px;max-height:84px;animation:ciPop .4s both,ciLatido 1.6s .6s ease-in-out infinite}
.ini-nodo.grande img{width:44px;height:44px}
.ini-mapa{position:relative;display:flex;align-items:center;gap:4px;padding-top:48px}
.ini-camino{width:clamp(14px,4vw,26px);height:6px;border-radius:99px;background:#D9D3F2}
.ini-avatar{position:absolute;top:0;left:4px;width:48px;height:48px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 10px rgba(30,27,75,.3);
  animation:iniSalta 3.2s .9s ease-in-out forwards}
.ini-cartas{display:flex;gap:clamp(4px,1.5vw,10px)}
.ini-carta{display:flex;flex-direction:column;align-items:center;gap:4px;animation:ciPop .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * .35s)}
.ini-carta img{width:clamp(52px,13vw,76px);height:clamp(52px,13vw,76px);border-radius:14px;object-fit:contain;background:#fff;box-shadow:0 4px 10px rgba(30,27,75,.15)}
.ini-carta b{color:#08A256;font-weight:900;font-size:.95rem}
.ini-tres{display:flex;gap:clamp(12px,4vw,28px)}
.ini-paso{display:flex;flex-direction:column;align-items:center;gap:6px;animation:ciPop .45s both;animation-delay:calc(var(--i) * .9s)}
.ini-paso b{color:var(--deep);font-weight:900}
.ini-isla{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.ini-frase{display:flex;gap:8px}
.ini-frase span{padding:6px 14px;border-radius:99px;font-weight:900;font-size:1.15rem;animation:ciPop .4s both}
.ini-frase .g{background:#EEEAFB;color:var(--deep);animation-delay:.9s}
.ini-frase .v{background:#E7F7EE;color:#08A256;text-decoration:underline;text-underline-offset:3px;animation-delay:1.4s}
.ini-frase .v+.v{animation-delay:1.9s}
.ini-cofre{position:relative;width:130px;height:130px}
.ini-cofre svg{width:100%;height:100%}
.ini-cofre-cerrado,.ini-cofre-abierto{position:absolute;inset:0}
.ini-cofre-cerrado{animation:irr-tiembla .25s ease-in-out 5 .4s,iniFuera .1s 1.8s forwards}
.ini-cofre-abierto{opacity:0;animation:iniDentro .3s 1.8s forwards}
.ini-gema{position:absolute;left:50%;top:40%;width:32px;height:32px;opacity:0;animation:iniGema 1s ease-out forwards;animation-delay:calc(2s + var(--i) * .15s)}
.ini-gema:nth-of-type(1){--x:-80px}.ini-gema:nth-of-type(2){--x:-40px}.ini-gema:nth-of-type(3){--x:0px}.ini-gema:nth-of-type(4){--x:40px}.ini-gema:nth-of-type(5){--x:80px}
@keyframes iniSalta{0%{transform:translate(0,0)}12%{transform:translate(0,-14px)}24%{transform:translate(calc(56px + 4px + clamp(14px,4vw,26px)),0)}
  36%{transform:translate(calc(56px + 4px + clamp(14px,4vw,26px)),-14px)}48%,100%{transform:translate(calc(2 * (60px + clamp(14px,4vw,26px))),0)}}
@keyframes iniFuera{to{opacity:0}}
@keyframes iniDentro{to{opacity:1}}
@keyframes iniGema{0%{opacity:0;transform:translate(-50%,0) scale(.4)}30%{opacity:1}100%{opacity:1;transform:translate(calc(-50% + var(--x)),-90px) scale(1)}}
@media (prefers-reduced-motion:reduce){ .ini-nodo,.ini-avatar,.ini-carta,.ini-paso,.ini-frase span,.ini-cofre-cerrado,.ini-gema{animation:none!important}
  .ini-cofre-abierto,.ini-gema{opacity:1} }