. */ .reward-overlay{ position:fixed;inset:0;z-index:1000; display:flex;align-items:center;justify-content:center;padding:20px; background:rgba(8,6,2,.55); animation:reward-fade-in .25s ease both; } @keyframes reward-fade-in{from{opacity:0}to{opacity:1}} .reward-modal{ position:relative; width:320px;max-width:100%; background:var(--surface); border:.5px solid var(--border); border-radius:18px; padding:30px 24px 24px; text-align:center; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.35); animation:reward-pop .5s cubic-bezier(.2,1.5,.4,1) both; } @keyframes reward-pop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}} /* Aspa de cierre arriba a la derecha (enlace real a la pantalla actual). */ .reward-close{ position:absolute;top:10px;right:12px;z-index:5; width:26px;height:26px;line-height:24px; border-radius:8px; font-size:16px;font-weight:500;text-align:center;text-decoration:none; color:var(--text2);background:transparent;border:.5px solid transparent; } .reward-close:hover{background:var(--surface3);color:var(--text)} /* Corona de rayos que gira detrás del icono. */ .reward-rays{ position:absolute;top:24px;left:50%; width:200px;height:200px;margin-left:-100px;z-index:1; background:repeating-conic-gradient(from 0deg, rgba(250,199,117,.32) 0deg 11deg, transparent 11deg 30deg); border-radius:50%; animation:reward-spin 9s linear infinite; -webkit-mask:radial-gradient(circle,transparent 30px,#000 34px); mask:radial-gradient(circle,transparent 30px,#000 34px); pointer-events:none; } @keyframes reward-spin{to{transform:rotate(360deg)}} /* Contenedor del icono pixel-art (cofre o planta). */ .reward-icon{ position:relative;z-index:3; height:130px;display:flex;align-items:flex-end;justify-content:center; } .reward-icon svg{display:block} /* Textos de la modal. */ .reward-eyebrow{ position:relative;z-index:3; font-size:11px;letter-spacing:1.5px;text-transform:uppercase; color:var(--warn);margin:0 0 4px;font-weight:600; animation:reward-text .4s .35s both; } .reward-title{ position:relative;z-index:3; font-size:19px;font-weight:500;margin:0 0 4px;color:var(--text); animation:reward-text .4s .45s both; } .reward-sub{ position:relative;z-index:3; font-size:14px;margin:0;color:var(--text2);font-weight:500; animation:reward-text .4s .55s both; } @keyframes reward-text{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .reward-cta{ position:relative;z-index:3; margin-top:20px;width:100%; animation:reward-text .4s .65s both; } /* Capa donde app.js inyecta las partículas de los fuegos artificiales. */ .reward-fx{position:absolute;inset:0;z-index:4;pointer-events:none} .reward-fx .spark{position:absolute;top:46%;left:50%;width:7px;height:7px;border-radius:1px} /* ----- Animación del cofre (cerrado, balanceándose) ----- */ .reward-chest-bob{ transform-box:fill-box;transform-origin:50% 100%; animation:reward-bob 1.6s .5s ease-in-out infinite; } @keyframes reward-bob{ 0%,100%{transform:translateY(0) scale(1,1)} 25%{transform:translateY(-4px) scale(.98,1.04)} 55%{transform:translateY(0) scale(1.03,.97)} } .reward-chest-glow{ transform-box:fill-box;transform-origin:50% 100%;opacity:0; animation:reward-glow 1.4s .6s ease-in-out infinite alternate; } @keyframes reward-glow{ from{opacity:.5;transform:scaleY(.8)} to{opacity:1;transform:scaleY(1.2)} } .reward-chest-coins rect{opacity:0;animation:reward-coinfly 1.1s .5s ease-out infinite} .reward-chest-coins rect:nth-child(2){animation-delay:.85s} .reward-chest-coins rect:nth-child(3){animation-delay:.4s} @keyframes reward-coinfly{ 0%{transform:translateY(2px);opacity:0} 20%{opacity:1}70%{opacity:1} 100%{transform:translateY(-7px);opacity:0} } /* ----- Animación de la planta solar (sol naciente + panel desplegándose) ----- */ .reward-sun-rise{ transform-box:fill-box;transform-origin:50% 100%; animation:reward-sunrise 1s .4s cubic-bezier(.3,1.3,.5,1) both; } @keyframes reward-sunrise{ 0%{transform:translateY(10px) scale(.4);opacity:0} 100%{transform:translateY(0) scale(1);opacity:1} } .reward-panel-grow{ transform-box:fill-box;transform-origin:50% 100%; animation:reward-panel .7s .3s cubic-bezier(.3,1.4,.5,1) both; } @keyframes reward-panel{ 0%{transform:scaleY(0);opacity:0} 100%{transform:scaleY(1);opacity:1} } /* Respeto a prefers-reduced-motion: sin movimiento, pero el icono queda en su estado final y legible (el brillo del cofre se mantiene encendido). */ @media(prefers-reduced-motion:reduce){ .reward-overlay,.reward-modal,.reward-rays, .reward-chest-bob,.reward-chest-glow,.reward-chest-coins rect, .reward-sun-rise,.reward-panel-grow, .reward-eyebrow,.reward-title,.reward-sub,.reward-cta{animation:none} .reward-chest-glow{opacity:1} }