/* ===== LOGIN DIDÁCTICO · minijuegos (Deliryus) ===== */
@keyframes ljfall{0%{transform:translateY(-10vh) rotate(0);opacity:1}100%{transform:translateY(105vh) rotate(540deg);opacity:.85}}
.lj-conf{position:absolute;top:0;pointer-events:none;animation:ljfall linear forwards;z-index:3}

/* --- puzzle de collage --- */
.lj-pz{display:grid;margin:0 auto;border:2px solid var(--ink);box-sizing:content-box;touch-action:none;user-select:none;background:var(--ink);gap:2px;transition:gap .4s,border-color .4s}
.lj-pz.listo{gap:0;border-color:var(--coral)}
.lj-pz-t{background-repeat:no-repeat;cursor:grab;position:relative}
.lj-pz-t.sel{outline:4px solid var(--coral);outline-offset:-4px}
.lj-pz-t.drag{z-index:5;opacity:.85;cursor:grabbing;pointer-events:none;box-shadow:6px 6px 0 rgba(35,35,35,.35)}
.lj-ref{display:block;margin:10px auto 0;border:1px solid var(--ink);height:56px;width:auto}

/* --- ventanas del edificio --- */
.lj-edif{width:min(270px,76vw);margin:0 auto;border:2px solid var(--ink);background:var(--paper-deep);box-shadow:6px 6px 0 rgba(35,35,35,.25)}
.lj-techo{height:16px;background:var(--ink);clip-path:polygon(0 100%,6% 0,94% 0,100% 100%)}
.lj-vent{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
.lj-win{aspect-ratio:3/4;border:2px solid var(--ink);background:#3b4a55;cursor:pointer;position:relative;transition:background .2s,box-shadow .2s}
.lj-win::before,.lj-win::after{content:"";position:absolute;background:var(--ink);opacity:.55}
.lj-win::before{left:50%;top:0;bottom:0;width:2px}
.lj-win::after{top:50%;left:0;right:0;height:2px}
.lj-win.on{background:#f6c85a;box-shadow:0 0 14px 2px rgba(246,200,90,.75)}
.lj-win.vec{outline:3px dashed var(--coral);outline-offset:2px}

/* --- escena "Habita el espacio" --- */
.lj-esc{position:relative;margin:0 auto;user-select:none}
.lj-esc-img{position:relative;border:2px solid var(--ink);box-sizing:border-box;background-size:100% 100%;cursor:pointer;overflow:hidden;box-shadow:6px 6px 0 rgba(35,35,35,.25)}
.lj-zona{position:absolute;border:2px dashed var(--coral);border-radius:50%;opacity:0;pointer-events:none;transition:opacity .4s;background:rgba(224,83,61,.14)}
.lj-esc-img.pista .lj-zona{opacity:1;animation:ljzona 1.4s ease-in-out infinite}
@keyframes ljzona{0%,100%{transform:scale(.92)}50%{transform:scale(1.06)}}
.lj-bandeja{display:flex;justify-content:center;gap:26px;height:78px;margin-top:6px;border-bottom:2px solid var(--ink);box-sizing:border-box}
.lj-slot{width:34px;height:100%}

.lj-fig{position:absolute;z-index:4;cursor:pointer}
.lj-fig-in{width:100%;height:100%;position:relative;transform-origin:50% 100%}
.lj-fig-in::before{content:"";position:absolute;left:8%;right:-14%;bottom:-3%;height:7%;border-radius:50%;background:rgba(35,35,35,.28);filter:blur(2px);z-index:-1}
.lj-fig img{display:block;width:100%;height:100%;object-fit:contain;transform:scaleX(var(--fx,1));pointer-events:none;-webkit-user-drag:none}
.lj-fig.camina .lj-fig-in{animation:ljcam .42s ease-in-out infinite}
@keyframes ljcam{0%,100%{transform:translateY(0) rotate(-2.4deg)}25%{transform:translateY(-3.5%) rotate(0)}50%{transform:translateY(0) rotate(2.4deg)}75%{transform:translateY(-3.5%) rotate(0)}}
.lj-arb.camina .lj-fig-in{animation:ljhop .36s ease-in-out infinite}
@keyframes ljhop{0%,100%{transform:scale(1.06,.92)}50%{transform:translateY(-9%) scale(.94,1.06)}}
.lj-fig.brota .lj-fig-in{animation:ljbrota .65s ease-out}
@keyframes ljbrota{0%{transform:scale(.55)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
.lj-fig.sel{filter:drop-shadow(0 0 0 var(--coral)) drop-shadow(0 0 5px var(--coral))}
.lj-fig.sel .lj-fig-in{animation:ljsel .9s ease-in-out infinite}
@keyframes ljsel{0%,100%{transform:translateY(0)}50%{transform:translateY(-8%)}}
.lj-fig.duda .lj-fig-in{animation:ljduda .9s ease-in-out}
@keyframes ljduda{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.lj-duda{position:absolute;left:50%;top:-34%;transform:translateX(-50%);font:700 16px var(--font-display);background:var(--paper);border:2px solid var(--ink);padding:0 6px;pointer-events:none}
.lj-fig.salta .lj-fig-in{animation:ljsalto .6s ease-in-out 6;animation-delay:var(--d,0s)}
@keyframes ljsalto{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-22%) rotate(-5deg)}50%{transform:translateY(-42%) rotate(0)}75%{transform:translateY(-22%) rotate(5deg)}}