.badges-page{min-height:100vh;background:linear-gradient(135deg,#0f172a,#1e293b);padding:2rem 0;color:#e2e8f0}.badges-container{max-width:1200px;margin:0 auto;padding:0 1rem}.page-empty,.page-error,.page-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a,#1e293b)}.loading-text{font-size:1.25rem;color:#94a3b8}.empty-content,.error-content{text-align:center}.empty-title,.error-title{font-size:1.25rem;color:#ef4444;margin-bottom:1rem}.empty-title{color:#94a3b8}.empty-message,.error-message{color:#64748b;margin-bottom:1rem}.retry-button{padding:.5rem 1rem;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;border-radius:.5rem;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px 0 rgba(59,130,246,.4)}.retry-button:hover{background:linear-gradient(135deg,#1d4ed8,#1e40af);transform:translateY(-1px);box-shadow:0 6px 20px 0 rgba(59,130,246,.6)}.page-header{text-align:center;margin-bottom:2rem}.page-title{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#60a5fa,#a78bfa 50%,#f472b6);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem;text-shadow:0 0 30px rgba(96,165,250,.3)}.page-description{font-size:1.125rem;color:#94a3b8;max-width:42rem;margin:0 auto;line-height:1.6}.category-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.category-button{padding:.5rem 1rem;border-radius:.5rem;border:1px solid #475569;background:linear-gradient(135deg,#1e293b,#334155);color:#cbd5e1;cursor:pointer;transition:all .3s;text-transform:capitalize;backdrop-filter:blur(10px)}.category-button:hover{background:linear-gradient(135deg,#334155,#475569);border-color:#60a5fa;color:#e2e8f0;transform:translateY(-1px);box-shadow:0 4px 12px rgba(96,165,250,.2)}.category-button.active{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border-color:#60a5fa;box-shadow:0 4px 14px rgba(59,130,246,.4)}.badges-grid-container{position:relative;max-width:80rem;margin:0 auto}.badges-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;padding:1rem}@media (min-width:640px){.badges-grid{grid-template-columns:repeat(8,1fr)}}@media (min-width:768px){.badges-grid{grid-template-columns:repeat(10,1fr)}}@media (min-width:1024px){.badges-grid{grid-template-columns:repeat(12,1fr)}}.badge-container,.badge-item{position:relative}.badge-container{width:4rem;height:4rem;cursor:pointer;transition:all .2s;transform-origin:center}.badge-container:hover{transform:scale(1.05)}.badge-container.hovered{transform:scale(1.1);z-index:10}.badge-image-wrapper{width:100%;height:100%;background:radial-gradient(circle,#1e293b 0,#0f172a 100%);border-radius:50%;box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.1);border:2px solid #334155;overflow:hidden;transition:all .3s;backdrop-filter:blur(10px)}.badge-container:hover .badge-image-wrapper{border-color:#60a5fa;box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 20px rgba(96,165,250,.3),inset 0 1px 0 hsla(0,0%,100%,.2)}.badge-image{width:100%;height:100%;object-fit:contain;padding:.25rem}.badge-glow{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .3s;box-shadow:0 0 30px currentColor}.badge-container:hover .badge-glow{opacity:.4}.badge-tier{position:absolute;top:-.25rem;right:-.25rem;width:1.25rem;height:1.25rem;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;font-size:.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 4px 12px rgba(59,130,246,.4),0 0 10px rgba(59,130,246,.3);border:1px solid #60a5fa}.badge-rarity-dot{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:50%;border:2px solid #0f172a;box-shadow:0 0 10px rgba(0,0,0,.5),0 0 5px currentColor}.badge-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:.5rem;z-index:20}.tooltip-content{background:linear-gradient(135deg,#0f172a,#1e293b);color:#e2e8f0;font-size:.75rem;padding:.75rem;border-radius:.5rem;box-shadow:0 20px 25px -5px rgba(0,0,0,.3),0 0 15px rgba(96,165,250,.2);white-space:nowrap;max-width:12rem;border:1px solid #334155;backdrop-filter:blur(10px)}.tooltip-title{font-weight:600;color:#f1f5f9}.tooltip-rarity{color:#cbd5e1}.tooltip-category{color:#94a3b8;font-size:.75rem}.tooltip-arrow{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #0f172a}.badges-legend{margin-top:2rem;flex-wrap:wrap;justify-content:center;gap:1.5rem;font-size:.875rem;color:#cbd5e1}.badges-legend,.legend-item{display:flex;align-items:center}.legend-item{gap:.5rem}.legend-item.tiered-legend{margin-left:1rem}.legend-dot{width:.75rem;height:.75rem;border-radius:50%;box-shadow:0 0 8px currentColor}.common-dot{background-color:#10b981}.uncommon-dot{background-color:#fffb00}.rare-dot{background-color:#ef4444}.legendary-dot{background-color:#8b5cf6}.legend-tier{width:1rem;height:1rem;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;font-size:.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 0 8px rgba(59,130,246,.4)}.badges-stats{margin-top:2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;text-align:center}@media (min-width:768px){.badges-stats{grid-template-columns:repeat(4,1fr)}}.stat-card{background:linear-gradient(135deg,#1e293b,#334155);padding:1rem;border-radius:.5rem;box-shadow:0 8px 32px rgba(0,0,0,.2),inset 0 1px 0 hsla(0,0%,100%,.1);border:1px solid #475569;backdrop-filter:blur(10px);transition:all .3s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.3),0 0 20px rgba(96,165,250,.1),inset 0 1px 0 hsla(0,0%,100%,.2)}.stat-value{font-size:2rem;font-weight:700;margin-bottom:.5rem;text-shadow:0 0 10px currentColor}.total-color{color:#60a5fa}.categories-color{color:#34d399}.legendary-color{color:#a78bfa}.tiered-color{color:#fbbf24}.stat-label{color:#94a3b8}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}.modal-content{background:linear-gradient(135deg,#0f172a,#1e293b);border-radius:.75rem;max-width:32rem;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px -12px rgba(0,0,0,.5),0 0 30px rgba(96,165,250,.2);border:1px solid #334155;&.rare{background:linear-gradient(135deg,#931c1c,#1e293b)}&.uncommon{background:linear-gradient(135deg,#838326,#1e293b)}&.common{background:linear-gradient(135deg,#388438,#1e293b)}}.modal-header{padding:1.5rem;text-align:center}.modal-close-container{display:flex;justify-content:flex-end;margin-bottom:1rem}.modal-close{color:#64748b;font-size:2rem;line-height:1;background:none;border:none;cursor:pointer;transition:all .2s}.modal-close:hover{color:#cbd5e1;transform:scale(1.1)}.modal-badge-container{width:11rem;height:11rem;margin:0 auto;position:relative}.modal-badge-image{width:100%;height:100%;background:radial-gradient(circle,#1e293b 0,#0f172a 100%);border-radius:50%;box-shadow:0 20px 25px -5px rgba(0,0,0,.3),0 0 20px rgba(96,165,250,.2),inset 0 1px 0 hsla(0,0%,100%,.1);border:4px solid #334155;overflow:hidden;backdrop-filter:blur(10px)}.modal-badge-img{width:100%;height:100%;object-fit:contain;padding:.5rem}.modal-badge-tier{position:absolute;top:-.5rem;right:-.5rem;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;font-size:.875rem;padding:.25rem .75rem;border-radius:9999px;font-weight:700;box-shadow:0 4px 12px rgba(59,130,246,.4),0 0 10px rgba(59,130,246,.3);border:1px solid #60a5fa}.modal-title{font-size:2rem;font-weight:700;background:linear-gradient(135deg,#60a5fa,#a78bfa 50%,#f472b6);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2rem;text-shadow:0 0 20px rgba(96,165,250,.3)}.modal-rarity{display:inline-flex;align-items:center;gap:.5rem}.modal-rarity-dot{width:.75rem;height:.75rem;border-radius:50%;box-shadow:0 0 8px currentColor}.modal-rarity-text{font-size:.875rem;font-weight:500;color:#94a3b8}.modal-body{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.modal-section{padding:1rem;border-radius:.5rem;border:1px solid #334155;background:rgba(30,41,59,.5);backdrop-filter:blur(10px)}.quote-section{background:rgba(59,130,246,.1);border-left:4px solid;border-color:#60a5fa}.requirements-section{background:rgba(52,211,153,.1);border-color:#34d399}.category-section{background:rgba(167,139,250,.1);border-color:#a78bfa}.details-section{background:rgba(71,85,105,.3);border-color:#475569}.section-title{font-weight:600;color:#f1f5f9;margin-top:.5rem}.quote-section .section-title{color:#93c5fd}.requirements-section .section-title{color:#6ee7b7}.category-section .section-title{color:#c4b5fd}.section-text{color:#cbd5e1;line-height:1.6}.quote-text{color:#dbeafe;font-style:italic}.requirements-section .section-text{color:#d1fae5}.category-section .section-text{color:#e9d5ff}.details-list{font-size:.875rem;color:#94a3b8;display:flex;flex-direction:column;gap:.25rem}.details-list p{margin:0}.details-list strong{color:#e2e8f0}.modal-footer{padding:1.5rem;border-top:1px solid #334155}.modal-footer-button{width:100%;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;padding:.75rem 1rem;border-radius:.5rem;border:none;cursor:pointer;transition:all .3s;font-weight:500;box-shadow:0 4px 14px rgba(59,130,246,.4)}.modal-footer-button:hover{background:linear-gradient(135deg,#1d4ed8,#1e40af);transform:translateY(-1px);box-shadow:0 6px 20px rgba(59,130,246,.6)}@media (max-width:640px){.badges-page{padding:1rem 0}.page-title{font-size:2rem}.page-description{font-size:1rem}.badges-grid{gap:.5rem;padding:.5rem}.category-filters{margin-bottom:1rem}.category-button{padding:.375rem .75rem;font-size:.875rem}.badges-legend{gap:1rem;font-size:.75rem}.modal-content{margin:.5rem;max-height:95vh}.modal-body,.modal-footer,.modal-header{padding:1rem}.modal-title{font-size:1.5rem}}@media (max-width:480px){.badges-grid{grid-template-columns:repeat(4,1fr)}.tooltip-content{font-size:.625rem;padding:.5rem;max-width:8rem}.badges-stats{grid-template-columns:repeat(2,1fr)}.stat-value{font-size:1.5rem}}.loading-text{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.badge-container{transition:all .3s cubic-bezier(.4,0,.2,1)}.badge-container:hover{transform:scale(1.05) translateY(-2px)}.badge-container.hovered{transform:scale(1.1) translateY(-4px)}.badge-container:focus,.category-button:focus,.modal-close:focus,.modal-footer-button:focus,.retry-button:focus{outline:2px solid #60a5fa;outline-offset:2px}.badge-container:focus{border-radius:50%}@media print{.modal-overlay{display:none}.badges-page{background:#fff!important;color:#000!important}.badge-container.hovered,.badge-container:hover{transform:none}.badge-glow{display:none}.page-title{color:#000!important;-webkit-text-fill-color:#000!important}}