@import url("https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap");.badge-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem;animation:fadeIn .15s ease-out}.badge-modal-container{background-color:#fff;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);max-width:28rem;width:80%;max-height:90vh;overflow-y:auto;animation:scaleIn .15s ease-out}.badge-modal-header{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem;p{font-size:.875rem;color:#6b7280;margin-top:.25rem}}.badge-modal-title{font-family:Rock Salt,cursive;text-align:center;font-weight:700;font-style:normal;font-size:1.25rem;color:#111827;margin:0}.badge-modal-tier{font-size:.5rem;font-weight:500;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;padding:.1rem .3rem;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border:1px solid #d1d5db;box-shadow:0 1px 2px rgba(0,0,0,.05);position:relative;overflow:hidden;transform:skew(-8deg);&.enhanced-shimmer:before{animation:enhanced-shimmer 2s infinite;width:150%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.6),rgba(255,215,0,.4),hsla(0,0%,100%,.8),transparent)}}.badge-modal-content{padding:1.5rem}.badge-modal-icon-section{display:flex;flex-direction:column;align-items:center}.badge-modal-icon{width:6rem;height:6rem;z-index:10;animation:badgeIconPulse 2s ease-in-out infinite}.badge-modal-icon:focus,.badge-modal-icon:hover{animation:none}.badge-modal-icon img{width:100%;height:100%;object-fit:contain;transition:all .5s ease-in-out;&:focus,&:hover{transform:scale(3)}}@keyframes badgeIconPulse{0%{transform:scale(1)}50%{transform:scale(1.07)}to{transform:scale(1)}}.badge-modal-rarity{padding:.5rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;transform:translateY(-15px);z-index:0;&.legendary{background-color:#f3e8ff;color:#7c3aed}&.rare{background-color:#fef2f2;color:#dc2626}&.uncommon{background-color:#fefce8;color:#ca8a04}&.common{background-color:#f0fdf4;color:#16a34a}}.badge-modal-description-section{margin-bottom:1.5rem;text-align:center}.badge-modal-description-title{font-weight:600;color:#111827;margin:0 0 .5rem}.badge-modal-description-text{color:#374151;line-height:1.625;margin:0}.badge-modal-achievement-box{margin-top:1rem;padding:.75rem;background-color:#eff6ff;border-radius:.5rem}.badge-modal-achievement-text{font-size:.875rem;margin:0}.badge-modal-detail-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;&:last-child{margin-bottom:0}}.badge-modal-detail-label{color:#4b5563}.badge-modal-detail-value{font-weight:500;color:#111827;&.expiring{color:#ca8a04}}.badge-modal-warning-box{margin-top:1rem;padding:.75rem;background-color:#fefce8;border:1px solid #fde047;border-radius:.5rem}.badge-modal-warning-text{color:#a16207;font-size:.675rem;margin:0}.badge-modal-footer{padding:1rem 1.5rem;background-color:#f9fafb;border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}.badge-modal-footer-btn{width:100%;background-color:#0f0;color:#000;padding:.5rem 1rem;border-radius:.5rem;border:none;cursor:pointer;transition:all .15s ease-in-out;font-weight:500;&:hover{filter:saturate(60%)}}.common{.badge-modal-title{color:#00a400}.badge-modal-achievement-box,.badge-modal-footer-btn{background-color:#0f0;color:#000}}.uncommon{.badge-modal-title{color:#abab41}.badge-modal-achievement-box,.badge-modal-footer-btn{background-color:#e4e400;color:#000}}.rare{.badge-modal-title{color:red}.badge-modal-achievement-box,.badge-modal-footer-btn{background-color:#ad0000;color:#fff}}.shimmer:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),transparent);animation:shimmer 2s infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{left:-100%}to{left:100%}}@keyframes enhanced-shimmer{0%{left:-200%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),rgba(255,215,0,.2),hsla(0,0%,100%,.4),transparent)}50%{left:0;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),rgba(255,215,0,.3),hsla(0,0%,100%,.5),transparent)}to{left:200%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),rgba(255,215,0,.2),hsla(0,0%,100%,.4),transparent)}}@media (max-width:640px){.badge-modal-overlay{padding:.5rem}.badge-modal-icon{width:5rem;height:5rem}.badge-modal-badge-title{font-size:1.25rem}.badge-modal-content,.badge-modal-header{padding:1rem}.badge-modal-footer{padding:.75rem 1rem}}