/* Coordenadas y tamaños del lienzo lógico 1920 × 1080. El motor escala el conjunto. */
#juego-viewport{position:relative;width:100%;height:100%;overflow:hidden;background:#000}
#juego-escenario{position:absolute;width:1920px;height:1080px;transform-origin:top left;overflow:hidden;background:var(--c-fondo-1)}
.j-escena{position:absolute;inset:0;isolation:isolate;overflow:hidden;color:var(--c-texto);font:600 34px/1.4 var(--f-cuerpo)}
.j-fondo{position:absolute;inset:0;z-index:-2;background:var(--c-fondo-1)}
.j-fondo>img,.j-fondo>svg{display:block;width:100%;height:100%;object-fit:cover}
.j-escena::after{content:"";position:absolute;inset:0;background:linear-gradient(#0e152566,transparent 30%,transparent 60%,#0e152544);z-index:-1;pointer-events:none}
.j-primer-plano{position:absolute;inset:0;z-index:2;pointer-events:none}
.j-primer-plano>svg{display:block;width:100%;height:100%}
.j-personaje{position:absolute;transform-origin:center bottom;pointer-events:none}
.j-personaje>svg,.j-personaje>img{display:block;width:100%;height:auto}
.j-personaje [data-parte="cuerpo"]{animation:j-respirar 4.2s ease-in-out infinite}
.j-personaje [data-parte="ojos"]{animation:j-parpadear 6.5s infinite}
.j-hud{position:absolute;top:36px;left:60px;right:60px;display:flex;align-items:center;gap:30px;padding:22px 28px;border:2px solid var(--c-hud-2);border-radius:20px;background:#0e1525ed;box-shadow:var(--sombra);z-index:20;min-height:108px}
.j-hud__nivel{flex:1;min-width:0;font:700 30px/1.3 var(--f-titulo)}
.j-hud__nivel small{display:block;color:var(--c-texto-suave);font:500 24px/1.4 var(--f-cuerpo)}
.j-criterio{position:relative;flex:0 0 320px;height:46px;background:var(--c-fondo-3);border-radius:10px;overflow:hidden;border:1px solid var(--c-hud-2)}
.j-criterio::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#f4f1ea80}
.j-criterio__relleno{position:absolute;left:50%;display:block;height:100%;background:var(--c-acento);transition:width .4s}
.j-criterio--negativo{border-color:var(--c-riesgo,#E5484D)}
.j-criterio--negativo .j-criterio__relleno{left:auto;right:50%;background:var(--c-riesgo,#E5484D)}
.j-criterio__valor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 25px var(--f-hud);color:var(--c-texto);text-shadow:0 1px 5px #000,0 0 8px #000}
.j-pistas{display:flex;gap:12px}
.j-pista{display:flex;align-items:center;gap:8px;padding:10px 14px;border:2px solid var(--c-hud-2);border-radius:28px;background:var(--c-hud);color:var(--c-texto-suave);font:700 24px var(--f-cuerpo);opacity:.65}
.j-pista img,.j-pista svg{width:36px;height:36px}
.j-pista--hallada{opacity:1;color:var(--c-acento);border-color:var(--c-acento);box-shadow:0 0 20px #4fd1c51a}
.j-pista--hallada::after{content:"✓";font-size:22px}
.j-caja{position:absolute;left:60px;right:60px;bottom:40px;display:flex;align-items:center;gap:30px;min-height:210px;padding:30px 36px;background:#0e1525f5;border:2px solid var(--c-hud-2);border-left:6px solid var(--c-acento);border-radius:20px;box-shadow:var(--sombra);z-index:30}
.j-caja--dialogo{left:auto;min-height:0;width:auto;padding:0;border:0;background:none;box-shadow:none}
.j-caja--dialogo .j-caja__texto{display:none}
.j-caja__texto{flex:1;min-width:0;margin:0;font:600 36px/1.4 var(--f-cuerpo);text-wrap:pretty}
.j-caja .retrato{flex:0 0 270px;min-width:0;grid-template-columns:110px 1fr;gap:12px;padding:12px;background:var(--c-hud);box-shadow:none}
.j-caja .retrato__nombre{font-size:28px}.j-caja .retrato__onda{width:96px}
.j-caja__seguir,.j-fin button,.j-recompensa button,.j-resumen button{flex-shrink:0;min-height:64px;padding:16px 26px;border:2px solid var(--c-acento);background:var(--c-acento);color:var(--c-globo-texto);border-radius:12px;font:800 28px/1.25 var(--f-cuerpo);cursor:pointer}
.j-caja__seguir:hover,.j-fin button:hover{filter:brightness(1.1)}
.j-globo-pos{position:absolute;z-index:15;max-width:650px}
.j-globo-pos .globo{font-size:34px;padding:28px 34px;overflow-wrap:anywhere}
.j-globo-pos .globo--cola-izq::after,.j-globo-pos .globo--cola-der::after{top:calc(var(--cola-y,60px) - 15px);width:34px}
.j-globo-pos .globo--cola-izq::after{left:-32px}
.j-globo-pos .globo--cola-der::after{right:-32px}
.j-telefono{position:absolute;top:176px;left:710px;width:500px;height:640px;z-index:10}
.j-telefono .feed{height:100%}.j-telefono .feed__telefono{height:100%;min-height:0;border-width:8px;padding:32px 18px 20px}
.j-telefono .post__texto{font-size:30px}.j-telefono .post__meta{font-size:24px;white-space:normal}
.j-decision{position:absolute;left:90px;right:90px;bottom:44px;z-index:35}
.j-decision .decision{padding:28px 32px;border-radius:20px;background:#0e1525f5}
.j-decision .decision__pregunta{margin:0 0 24px;font-size:36px}
.j-decision .decision__opciones{gap:18px}
.j-decision .decision__opcion{min-height:112px;padding:22px 26px;font-size:30px;line-height:1.3;letter-spacing:0}
.j-chip{position:absolute;right:480px;top:158px;z-index:50;padding:12px 22px;border:2px solid var(--c-acento);background:var(--c-hud);border-radius:24px;color:var(--c-acento);font:700 28px var(--f-hud);animation:j-chip-subir 1.8s ease-out forwards;pointer-events:none}
.j-nota{position:absolute;left:360px;right:360px;bottom:288px;z-index:35;padding:24px 32px;background:var(--c-globo);color:var(--c-globo-texto);border-radius:16px;font:700 32px/1.4 var(--f-cuerpo);box-shadow:var(--sombra)}
.j-elegir{position:absolute;left:360px;right:360px;top:195px;bottom:290px;display:flex;justify-content:center;gap:40px;z-index:15}
.j-elegir__opcion{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:16px;flex:1;min-width:0;padding:26px;border:3px solid #53c6c670;border-radius:24px;background:linear-gradient(160deg,#1a2438,#12373c);color:var(--c-texto);font:700 40px var(--f-titulo);overflow:hidden;cursor:pointer;box-shadow:var(--sombra)}
.j-elegir__opcion:nth-child(2){border-color:#ba8cff70;background:linear-gradient(160deg,#1a2438,#342a4c)}
.j-elegir__opcion>svg,.j-elegir__opcion>img{height:calc(100% - 70px);max-width:100%;object-fit:contain}
.j-elegir__opcion:hover{border-color:var(--c-acento);background:var(--c-fondo-3)}
.j-elegir__opcion:nth-child(2):hover{border-color:#ba8cff}
.j-recompensa{position:absolute;inset:180px 250px 280px;display:flex;align-items:center;justify-content:center;gap:60px;z-index:15}
.j-recompensa>.tarjeta{width:350px;flex-shrink:0}.j-recompensa>.tarjeta>img,.j-recompensa>.tarjeta>svg{width:100%;height:100%;object-fit:contain}
.j-insignia{width:220px;height:220px;object-fit:contain;filter:drop-shadow(0 0 35px #4fd1c522)}
.j-insignia>img,.j-insignia>svg{width:100%;height:100%}
.j-recompensa h2{font:700 54px/1.15 var(--f-titulo);max-width:600px}.j-recompensa p{max-width:600px;font-size:34px}
.j-resumen{position:absolute;left:270px;right:270px;top:180px;bottom:285px;overflow:auto;padding:30px 40px;background:#0e1525f5;border:2px solid var(--c-hud-2);border-radius:20px;z-index:15}
.j-resumen h2{margin:0 0 24px;font:700 44px var(--f-titulo)}
.j-resumen p{margin:0 0 24px;font-size:32px}
.j-resumen__fila{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 0;border-top:1px solid var(--c-hud-2);font-size:30px;line-height:1.35}
.j-resumen__fila span:last-child{color:var(--c-acento);flex-shrink:0}
.j-fin{position:absolute;inset:220px 320px 190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;background:#0e1525ee;padding:48px;border:2px solid var(--c-hud-2);border-radius:24px;z-index:20}
.j-fin h2{font:700 64px var(--f-titulo);margin:0}.j-fin p{font-size:36px;max-width:1000px;margin:0 0 12px}
.j-fin button+button{background:transparent;color:var(--c-texto)}
.j-derrota{position:absolute;inset:148px 0 0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 60px 40px;text-align:center;background:radial-gradient(ellipse at center,#392446,#0e1525f5 75%)}
.j-derrota__ojo{width:420px;height:420px;flex-shrink:0;animation:j-ojo-crecer .8s cubic-bezier(.2,.8,.2,1) both}
.j-derrota__ojo>svg{display:block;width:100%;height:100%;animation:j-ojo-risa .32s .8s 9}
.j-derrota h2{margin:0;font:700 52px/1.2 var(--f-titulo)}
.j-derrota p{margin:0;max-width:1200px;font:600 32px/1.35 var(--f-cuerpo)}
.j-derrota .j-derrota__criterio{color:#FF999D;font-weight:800}
.j-derrota .j-derrota__cuenta{color:var(--c-texto-suave);font-size:28px}
.j-derrota button{min-height:64px;padding:16px 28px;border:2px solid var(--c-acento);border-radius:12px;background:var(--c-acento);color:var(--c-globo-texto);font:800 28px/1.25 var(--f-cuerpo);cursor:pointer}
@keyframes j-ojo-crecer{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes j-ojo-risa{25%{transform:rotate(-4deg) scale(1.035)}75%{transform:rotate(4deg) scale(.98)}}
@keyframes j-respirar{50%{transform:scaleY(1.012)}}
@keyframes j-parpadear{0%,45%,48%,100%{transform:scaleY(1)}46%,47%{transform:scaleY(.1)}}
@keyframes j-chip-subir{0%{opacity:0;transform:translateY(20px)}15%,65%{opacity:1}100%{opacity:0;transform:translateY(-55px)}}
@media(prefers-reduced-motion:reduce){.j-personaje [data-parte],.j-chip,.j-derrota__ojo,.j-derrota__ojo>svg{animation:none}.j-criterio__relleno{transition:none}}