.badge-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s ease}.badge-modal-overlay.show{opacity:1}.badge-modal-content{position:relative;background:linear-gradient(135deg,#1a1a2e 0,#16213e 100%);border-radius:24px;padding:60px 40px 40px;max-width:500px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.5);border:2px solid rgba(255,255,255,0.1);transform:scale(0.7) translateY(50px);opacity:0;transition:all .4s cubic-bezier(0.34,1.56,0.64,1)}.badge-modal-overlay.show .badge-modal-content{transform:scale(1) translateY(0);opacity:1}.confetti-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;border-radius:24px}.confetti{position:absolute;width:10px;height:10px;top:-10px;opacity:0;animation:confetti-fall linear infinite}@keyframes confetti-fall{0%{top:-10%;opacity:1;transform:rotate(0deg)}100%{top:110%;opacity:0;transform:rotate(720deg)}}.badge-icon-container{position:relative;display:inline-block;margin-bottom:30px}.badge-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;background:radial-gradient(circle,rgba(255,215,0,0.3) 0,transparent 70%);border-radius:50%;animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.8}}.badge-icon{font-size:100px;color:#FFD700;filter:drop-shadow(0 0 20px rgba(255,215,0,0.6));animation:badge-bounce .6s cubic-bezier(0.34,1.56,0.64,1);position:relative;z-index:2}@keyframes badge-bounce{0%{transform:scale(0) rotate(-180deg)}60%{transform:scale(1.2) rotate(20deg)}100%{transform:scale(1) rotate(0deg)}}.badge-info{animation:fade-in-up .6s ease .2s backwards}@keyframes fade-in-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.badge-title{font-size:28px;font-weight:700;color:#FFD700;margin-bottom:15px;text-transform:uppercase;letter-spacing:2px;text-shadow:0 2px 10px rgba(255,215,0,0.3)}.badge-name{font-size:32px;font-weight:800;color:#fff;margin-bottom:15px;text-shadow:0 2px 10px rgba(0,0,0,0.5)}.badge-description{font-size:16px;color:rgba(255,255,255,0.8);margin-bottom:25px;line-height:1.6}.badge-details{display:flex;justify-content:center;gap:20px;margin-top:20px}.badge-rarity,.badge-xp{padding:8px 20px;border-radius:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1px}.badge-rarity{background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05));color:#fff;border:1px solid rgba(255,255,255,0.2)}.badge-xp{background:linear-gradient(135deg,#FFD700,#FFA500);color:#1a1a2e;font-weight:700;box-shadow:0 4px 15px rgba(255,215,0,0.3)}.rarity-común .badge-icon{color:#A0A0A0;filter:drop-shadow(0 0 15px rgba(160,160,160,0.5))}.rarity-rara .badge-icon{color:#4A90E2;filter:drop-shadow(0 0 20px rgba(74,144,226,0.6))}.rarity-épica .badge-icon{color:#9B59B6;filter:drop-shadow(0 0 25px rgba(155,89,182,0.7))}.rarity-legendaria .badge-icon{color:#FFD700;filter:drop-shadow(0 0 30px rgba(255,215,0,0.8));animation:badge-bounce .6s cubic-bezier(0.34,1.56,0.64,1),legendary-shine 3s ease-in-out infinite}@keyframes legendary-shine{0%,100%{filter:drop-shadow(0 0 30px rgba(255,215,0,0.8)) hue-rotate(0deg)}50%{filter:drop-shadow(0 0 40px rgba(255,215,0,1)) hue-rotate(20deg)}}.badge-close-btn{position:absolute;top:15px;right:15px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:18px}.badge-close-btn:hover{background:rgba(255,255,255,0.2);transform:rotate(90deg)}@media(max-width:600px){.badge-modal-content{padding:40px 25px 30px;width:95%}.badge-icon{font-size:80px}.badge-title{font-size:22px}.badge-name{font-size:26px}.badge-description{font-size:14px}.badge-details{flex-direction:column;gap:10px}}@keyframes sparkle{0%,100%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}.badge-icon-container::before,.badge-icon-container::after{content:'✨';position:absolute;font-size:30px;animation:sparkle 2s ease-in-out infinite}.badge-icon-container::before{top:-10px;left:-10px;animation-delay:0s}.badge-icon-container::after{bottom:-10px;right:-10px;animation-delay:1s}