@layer components{.badge-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;backdrop-filter:blur(4px);z-index:10001;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}.badge-modal{background:linear-gradient(135deg,#2c5aa0,#1e3a5f);border-radius:20px;box-shadow:0 20px 60px #00000040,0 0 0 1px #fff3;max-width:500px;width:90%;max-height:90vh;overflow:hidden;position:relative;transform-origin:center}.badge-modal-content{padding:2.5rem 2rem 2rem;text-align:center;color:#fff;position:relative;z-index:10}.badge-modal-content>*{position:relative;z-index:20}.badge-visual-container{margin-bottom:2rem;position:relative;z-index:30}.badge-shield{position:relative;display:inline-block;font-size:4rem;line-height:1;border-radius:50%;padding:1rem;transition:all .3s ease;transform:scale(0);animation:badge-entrance 1.2s cubic-bezier(.68,-.55,.265,1.55) .3s forwards}.badge-shield:before{content:"";position:absolute;inset:-15px;background:radial-gradient(circle,rgb(74 144 226 / 40%) 0%,rgb(74 144 226 / 10%) 50%,transparent 70%);border-radius:50%;animation:pulse-glow 2s ease-in-out infinite;z-index:-1}.badge-shield-emoji{display:block;position:relative;z-index:3;filter:drop-shadow(0 2px 4px rgb(0 0 0 / 30%));animation:shield-glow 3s ease-in-out infinite}.badge-category-emoji{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:2.2rem;z-index:4;animation:category-entrance .8s cubic-bezier(.68,-.55,.265,1.55) .8s forwards;filter:drop-shadow(0 1px 3px rgb(0 0 0 / 40%))}.badge-sidekick-emoji{position:absolute;top:-.5rem;right:-.5rem;font-size:1.4rem;z-index:5;transform:scale(0) rotate(-180deg);animation:sidekick-bounce 1s cubic-bezier(.68,-.55,.265,1.55) 1.2s forwards;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 30%))}.badge-glow-low{box-shadow:0 0 20px #4a90e266,0 0 40px #4a90e233;animation:pulseGentleGlow 3s ease-in-out infinite}.badge-glow-medium{box-shadow:0 0 30px #e74c3c7f,0 0 60px #e74c3c4d,0 0 90px #e74c3c1a;animation:pulseMediumGlow 2.5s ease-in-out infinite}.badge-glow-high{box-shadow:0 0 40px #f1c40f99,0 0 80px #f1c40f66,0 0 120px #f1c40f33;animation:pulseIntenseGlow 2s ease-in-out infinite,shimmerEffect 4s linear infinite}.badge-glow-brilliant{box-shadow:0 0 50px #8a2be2b3,0 0 100px #8a2be27f,0 0 150px #8a2be24d;animation:pulseBrilliantGlow 1.8s ease-in-out infinite,shimmerEffect 3s linear infinite}.badge-glow-radiant{box-shadow:0 0 60px #32cd32cc,0 0 120px #32cd3299,0 0 180px #32cd3266;animation:pulseRadiantGlow 1.6s ease-in-out infinite,shimmerEffect 2.5s linear infinite}.badge-glow-transcendent{box-shadow:0 0 70px #ff1493e5,0 0 140px #ff1493b3,0 0 210px #ff14937f;animation:pulseTranscendentGlow 1.4s ease-in-out infinite,shimmerEffect 2s linear infinite}.badge-glow-legendary{box-shadow:0 0 80px #ff8c00,0 0 160px #ff8c00cc,0 0 240px #ff8c0099;animation:pulseLegendaryGlow 1.2s ease-in-out infinite,shimmerEffect 1.8s linear infinite}.badge-glow-mythic{box-shadow:0 0 90px indigo,0 0 180px #4b0082cc,0 0 270px #4b008299,0 0 360px #4b008266;animation:pulseMythicGlow 1s ease-in-out infinite,shimmerEffect 1.5s linear infinite}.badge-glow-cosmic{box-shadow:0 0 100px #0ff,0 0 200px #00ffffe5,0 0 300px #00ffffb3,0 0 400px #00ffff7f;animation:pulseCosmicGlow .8s ease-in-out infinite,shimmerEffect 1.2s linear infinite}.badge-glow-divine{box-shadow:0 0 120px gold,0 0 240px #ffd700e5,0 0 360px #ffd700cc,0 0 480px #ffd70099,0 0 600px #ffd70066;animation:pulseDivineGlow .6s ease-in-out infinite,shimmerEffect 1s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulseGentleGlow{0%,to{box-shadow:0 0 20px #4a90e266,0 0 40px #4a90e233}50%{box-shadow:0 0 25px #4a90e27f,0 0 50px #4a90e24d}}@keyframes pulseMediumGlow{0%,to{box-shadow:0 0 30px #e74c3c7f,0 0 60px #e74c3c4d,0 0 90px #e74c3c1a}50%{box-shadow:0 0 35px #e74c3c99,0 0 70px #e74c3c66,0 0 105px #e74c3c33}}@keyframes pulseIntenseGlow{0%,to{box-shadow:0 0 40px #f1c40f99,0 0 80px #f1c40f66,0 0 120px #f1c40f33}50%{box-shadow:0 0 50px #f1c40fcc,0 0 100px #f1c40f99,0 0 150px #f1c40f4d}}@keyframes pulseBrilliantGlow{0%,to{box-shadow:0 0 50px #8a2be2b3,0 0 100px #8a2be27f,0 0 150px #8a2be24d}50%{box-shadow:0 0 60px #8a2be2e5,0 0 120px #8a2be2b3,0 0 180px #8a2be27f}}@keyframes pulseRadiantGlow{0%,to{box-shadow:0 0 60px #32cd32cc,0 0 120px #32cd3299,0 0 180px #32cd3266}50%{box-shadow:0 0 70px #32cd32,0 0 140px #32cd32cc,0 0 210px #32cd3299}}@keyframes pulseTranscendentGlow{0%,to{box-shadow:0 0 70px #ff1493e5,0 0 140px #ff1493b3,0 0 210px #ff14937f}50%{box-shadow:0 0 80px #ff1493,0 0 160px #ff1493e5,0 0 240px #ff1493b3}}@keyframes pulseLegendaryGlow{0%,to{box-shadow:0 0 80px #ff8c00,0 0 160px #ff8c00cc,0 0 240px #ff8c0099}50%{box-shadow:0 0 90px #ff8c00,0 0 180px #ff8c00,0 0 270px #ff8c00cc}}@keyframes pulseMythicGlow{0%,to{box-shadow:0 0 90px indigo,0 0 180px #4b0082cc,0 0 270px #4b008299,0 0 360px #4b008266}50%{box-shadow:0 0 100px indigo,0 0 200px indigo,0 0 300px #4b0082cc,0 0 400px #4b008299}}@keyframes pulseCosmicGlow{0%,to{box-shadow:0 0 100px #0ff,0 0 200px #00ffffe5,0 0 300px #00ffffb3,0 0 400px #00ffff7f}50%{box-shadow:0 0 120px #0ff,0 0 240px #0ff,0 0 360px #00ffffe5,0 0 480px #00ffffb3}}@keyframes pulseDivineGlow{0%,to{box-shadow:0 0 120px gold,0 0 240px #ffd700e5,0 0 360px #ffd700cc,0 0 480px #ffd70099,0 0 600px #ffd70066}50%{box-shadow:0 0 140px gold,0 0 280px gold,0 0 420px gold,0 0 560px #ffd700cc,0 0 700px #ffd70099}}.badge-glow-brilliant:before,.badge-glow-radiant:before,.badge-glow-transcendent:before,.badge-glow-legendary:before,.badge-glow-mythic:before,.badge-glow-cosmic:before,.badge-glow-divine:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,transparent,rgb(255 255 255 / 40%),transparent);background-size:200% 200%;border-radius:inherit;z-index:-1;animation:shimmerEffect 1s linear infinite}.particles-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:0}.floating-particle{position:absolute;background:radial-gradient(circle,#fffc,#fff3);border-radius:50%;animation:float-up linear infinite}@keyframes float-up{0%{transform:translateY(100vh) translate(0) scale(0);opacity:0}10%{opacity:1;transform:translateY(90vh) translate(0) scale(1)}90%{opacity:.8;transform:translateY(10vh) translate(var(--drift)) scale(.5)}to{transform:translateY(-10vh) translate(var(--drift)) scale(0);opacity:0}}@keyframes badge-entrance{0%{transform:scale(0) rotate(-180deg);opacity:0}60%{transform:scale(1.15) rotate(20deg)}80%{transform:scale(.95) rotate(-10deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes shield-glow{0%,to{filter:drop-shadow(0 2px 4px rgb(0 0 0 / 30%))}50%{filter:drop-shadow(0 2px 8px rgb(74 144 226 / 60%)) drop-shadow(0 0 15px rgb(74 144 226 / 40%))}}@keyframes category-entrance{0%{transform:translate(-50%,-50%) scale(0) rotate(90deg);opacity:0}60%{transform:translate(-50%,-50%) scale(1.1) rotate(-10deg)}to{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}}@keyframes sidekick-bounce{0%{transform:scale(0) rotate(-180deg);opacity:0}50%{transform:scale(1.3) rotate(10deg)}70%{transform:scale(.9) rotate(-5deg)}85%{transform:scale(1.1) rotate(2deg)}to{transform:scale(1) rotate(0);opacity:1}}.badge-quote{font-size:1.1rem;font-style:italic;line-height:1.6;margin:0 0 1.5rem;color:#ffffffe5!important;max-width:400px;margin-left:auto;margin-right:auto;min-height:3rem;display:block;word-wrap:break-word;overflow:hidden;white-space:nowrap;width:0;animation:typewriter 1.5s steps(30) 1.2s forwards,blink-cursor .6s step-end 1.2s 2;border-right:2px solid rgb(255 255 255 / 80%)}@keyframes typewriter{0%{width:0}to{width:100%}}@keyframes blink-cursor{0%,50%{border-right-color:#fffc}51%,to{border-right-color:transparent}}.badge-title{font-size:2rem;font-weight:700;margin:0 0 1rem;background:linear-gradient(135deg,#fff,#e0e0e0);background-clip:text;-webkit-text-fill-color:transparent;transform:translateY(30px);opacity:0;animation:text-slide-up .5s ease-out .8s forwards}.badge-reason{transform:translateY(20px);opacity:0;animation:text-slide-up .5s ease-out 2.8s forwards;color:#ffffffe5!important;font-size:1rem;line-height:1.5;margin-bottom:.5rem}.badge-timestamp{transform:translateY(20px);opacity:0;animation:text-slide-up .5s ease-out 3s forwards;color:#ffffffe5!important;font-size:.9rem;line-height:1.4}@keyframes text-slide-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.badge-text-content{margin-bottom:2rem}.badge-modal-footer{margin-top:2rem}.badge-close-btn{background:linear-gradient(135deg,#fff,#f8f9fa);color:#4a90e2;border:2px solid rgb(255 255 255 / 30%);padding:.75rem 2rem;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0000001a;min-width:160px}.badge-close-btn:hover{background:linear-gradient(135deg,#f8f9fa,#e9ecef);color:#357abd;box-shadow:0 6px 20px #00000026;transform:translateY(-2px);border-color:#ffffff7f}.badge-close-btn:active{transform:translateY(0);box-shadow:0 2px 8px #4a90e266}@media (width <= 768px){.badge-modal{width:95%;margin:var(--container-padding);border-radius:15px}.badge-modal-content{padding:calc(var(--container-padding) * 1.25) var(--container-padding) var(--container-padding)}.badge-shield{font-size:3.5rem;padding:calc(var(--container-padding) * .5)}.badge-category-emoji{font-size:2rem}.badge-sidekick-emoji{font-size:1.25rem;top:-.25rem;right:-.25rem}.badge-title{font-size:calc(1.75rem * var(--font-scale))}.badge-quote{font-size:calc(1rem * var(--font-scale));max-width:100%;margin:0 0 1rem;padding:0 calc(var(--container-padding) * .3);min-height:2.5rem;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}.badge-close-btn{padding:calc(var(--container-padding) * .4) calc(var(--container-padding) * .9);font-size:calc(.95rem * var(--font-scale));min-width:140px}}@media (width <= 480px){.badge-modal{width:90%;max-width:none;border-radius:15px;max-height:85vh;margin:calc(var(--container-padding) * 1.1) auto}.badge-modal-content{padding:calc(var(--container-padding) * .8) var(--container-padding) var(--container-padding);display:flex;flex-direction:column;justify-content:flex-start}.badge-shield{font-size:calc(3rem * var(--font-scale))}.badge-category-emoji{font-size:calc(1.75rem * var(--font-scale))}.badge-title{font-size:calc(1.5rem * var(--font-scale))}.badge-quote{font-size:calc(.95rem * var(--font-scale));padding:0 calc(var(--container-padding) * .15);min-height:2.25rem;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}}@media (width <= 360px){.badge-modal{width:85%;margin:calc(var(--container-padding) * .8) auto;max-height:80vh}.badge-modal-content{padding:calc(var(--container-padding) * .7) calc(var(--container-padding) * .4) calc(var(--container-padding) * .4)}.badge-shield{font-size:calc(2.5rem * var(--font-scale))}.badge-title{font-size:calc(1.35rem * var(--font-scale))}.badge-quote{font-size:calc(.9rem * var(--font-scale));padding:0 calc(var(--container-padding) * .15);min-height:2rem;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}.badge-close-btn{padding:calc(var(--container-padding) * .3) calc(var(--container-padding) * .7);font-size:calc(.9rem * var(--font-scale));min-width:120px}}.no-motion .badge-modal-backdrop,.no-motion .badge-shield,.no-motion .badge-close-btn{animation:none!important;transition:none!important}.no-motion .badge-glow-low,.no-motion .badge-glow-medium,.no-motion .badge-glow-high,.no-motion .badge-glow-brilliant,.no-motion .badge-glow-radiant,.no-motion .badge-glow-transcendent,.no-motion .badge-glow-legendary,.no-motion .badge-glow-mythic,.no-motion .badge-glow-cosmic,.no-motion .badge-glow-divine{animation:none!important}.no-motion .badge-glow-high:before,.no-motion .badge-glow-brilliant:before,.no-motion .badge-glow-radiant:before,.no-motion .badge-glow-transcendent:before,.no-motion .badge-glow-legendary:before,.no-motion .badge-glow-mythic:before,.no-motion .badge-glow-cosmic:before,.no-motion .badge-glow-divine:before{animation:none!important}.badge-close-btn:focus{outline:2px solid #fff;outline-offset:2px}.high-contrast-border .badge-modal{border:2px solid #fff;background:#000}.high-contrast-border .badge-title{color:#fff;-webkit-text-fill-color:#fff}.high-contrast-border .badge-quote,.high-contrast-border .badge-reason,.high-contrast-border .badge-timestamp{color:#ffffffe5}.emoji-bubbles-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;border-radius:0}.emoji-bubbles-container .bubbling-emoji{position:absolute;opacity:0;z-index:1;animation:bubble-up linear infinite;filter:blur(.5px);bottom:0;left:50%;pointer-events:none}.emoji-bubbles-container .bubbling-emoji.category{font-size:1.5rem}.emoji-bubbles-container .bubbling-emoji.sidekick{font-size:1.2rem}@keyframes bubble-up{0%{transform:translateY(0) translate(-50%) scale(.2) rotate(0);opacity:0}10%{opacity:.4;transform:translateY(-20px) translate(calc(-50% + var(--drift-x, 0px))) scale(.4) rotate(15deg)}25%{opacity:.7;transform:translateY(-50px) translate(calc(-50% + var(--drift-x, 0px) * 1.2)) scale(.6) rotate(-10deg)}50%{opacity:.8;transform:translateY(-90px) translate(calc(-50% + var(--drift-x, 0px) * 1.5)) scale(.9) rotate(20deg)}75%{opacity:.6;transform:translateY(-130px) translate(calc(-50% + var(--drift-x, 0px) * 1.2)) scale(.7) rotate(-15deg)}90%{opacity:.3;transform:translateY(-160px) translate(calc(-50% + var(--drift-x, 0px) * .8)) scale(.4) rotate(10deg)}to{transform:translateY(-180px) translate(calc(-50% + var(--drift-x, 0px) * .5)) scale(.2) rotate(0);opacity:0}}body.dark-mode .badge-modal-overlay{background:#000c}body.dark-mode .badge-modal{background:var(--theme-bg-secondary);border:1px solid var(--theme-border);box-shadow:0 20px 40px #0000007f}body.dark-mode .badge-modal-header{background:var(--theme-bg-primary);border-bottom:1px solid var(--theme-border)}body.dark-mode .badge-modal-title{color:var(--theme-text-primary)}body.dark-mode .badge-modal-close{color:var(--theme-text-secondary);background:var(--theme-bg-secondary);border:1px solid var(--theme-border)}body.dark-mode .badge-modal-close:hover{color:var(--theme-text-primary);background:var(--theme-bg-primary);border-color:var(--theme-border-hover)}body.dark-mode .badge-modal-content{background:var(--theme-bg-secondary)}body.dark-mode .badge-display{background:var(--theme-bg-primary);border:1px solid var(--theme-border)}body.dark-mode .badge-name{color:var(--theme-text-primary)}body.dark-mode .badge-description{color:var(--theme-text-secondary)}body.dark-mode .badge-tier{color:var(--theme-text-muted)}body.dark-mode .badge-requirements{background:var(--theme-bg-primary);border:1px solid var(--theme-border)}body.dark-mode .requirement-item{color:var(--theme-text-secondary);border-bottom:1px solid var(--theme-border)}body.dark-mode .requirement-item.completed{color:var(--color-success)}body.dark-mode .requirement-item.incomplete{color:var(--theme-text-muted)}body.dark-mode .badge-collection{background:var(--theme-bg-primary)}body.dark-mode .badge-item{background:var(--theme-bg-secondary);border:1px solid var(--theme-border);color:var(--theme-text-primary)}body.dark-mode .badge-item:hover{border-color:var(--theme-border-hover);box-shadow:0 4px 12px var(--theme-shadow-hover)}body.dark-mode .badge-item.earned{border-color:var(--color-success);box-shadow:0 0 8px #4caf504d}body.dark-mode .badge-item.locked{opacity:.5;filter:grayscale(1)}body.dark-mode .badge-category-section{background:var(--theme-bg-secondary);border:1px solid var(--theme-border)}body.dark-mode .badge-category-header{color:var(--theme-text-primary);border-bottom:1px solid var(--theme-border)}body.dark-mode .badge-progress{background:var(--theme-bg-primary);border:1px solid var(--theme-border)}body.dark-mode .progress-bar{background:var(--theme-bg-secondary)}body.dark-mode .progress-fill{background:var(--color-primary)}body.dark-mode .progress-text{color:var(--theme-text-primary)}body.dark-mode .badge-filters{background:var(--theme-bg-primary);border-bottom:1px solid var(--theme-border)}body.dark-mode .filter-tab{background:var(--theme-bg-secondary);color:var(--theme-text-secondary);border:1px solid var(--theme-border)}body.dark-mode .filter-tab.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}body.dark-mode .filter-tab:hover:not(.active){background:var(--theme-bg-primary);color:var(--theme-text-primary);border-color:var(--theme-border-hover)}body.dark-mode .badge-tooltip{background:var(--theme-bg-primary);color:var(--theme-text-primary);border:1px solid var(--theme-border);box-shadow:0 4px 12px var(--theme-shadow-hover)}body.dark-mode .badge-tooltip:after{border-top-color:var(--theme-bg-primary)}body.dark-mode .particles-container{opacity:.7}body.dark-mode .floating-particle{opacity:.5}}