:root{--color-background:#0a0a0a;--color-surface:#141414;--color-surface-elevated:#1a1a1a;--color-text-primary:#ffffff;--color-text-secondary:#a0a0a0;--color-text-tertiary:#666666;--color-accent:#ffd700;--color-success:#4caf50;--color-discovered:rgba(76,175,80,0.15);--color-undiscovered:rgba(255,255,255,0.03);--spacing-unit:8px;--border-radius:16px;}[data-theme="light"]{--color-background:#f0f2f5;--color-surface:#ffffff;--color-surface-elevated:#e9ecef;--color-text-primary:#1a1a1a;--color-text-secondary:#4a4a4a;--color-text-tertiary:#6b6b6b;--color-accent:#1565c0;--color-success:#2e7d32;--color-discovered:rgba(46,125,50,0.12);--color-undiscovered:rgba(0,0,0,0.04);}[data-theme="light"] .custom-select-trigger{background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);border:2px solid #c8c8c8;box-shadow:0 2px 8px rgba(0,0,0,0.1);}[data-theme="light"] .custom-select-trigger:hover{border-color:#1565c0;box-shadow:0 4px 12px rgba(21,101,192,0.15);}[data-theme="light"] .custom-options{background:linear-gradient(180deg,#ffffff 0%,#f8f9fa 100%);border:2px solid #1565c0;box-shadow:0 8px 20px rgba(0,0,0,0.15);}[data-theme="light"] .custom-option{color:#1a1a1a;border-bottom:1px solid rgba(0,0,0,0.08);}[data-theme="light"] .custom-option:hover{background:linear-gradient(90deg,rgba(21,101,192,0.15) 0%,rgba(21,101,192,0.05) 100%);}[data-theme="light"] .custom-option.selected{background:linear-gradient(90deg,rgba(21,101,192,0.2) 0%,rgba(21,101,192,0.08) 100%);color:#1565c0;}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background-color:var(--color-background);color:var(--color-text-primary);min-height:100vh;min-height:100dvh;padding:calc(var(--spacing-unit) * 3);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.container{max-width:1200px;margin:0 auto;padding-top:60px;}header{text-align:center;margin-bottom:30px;}header h1{font-size:2.5rem;font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,#ffd700,#ff8c00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}header .subtitle{color:var(--color-text-secondary);font-size:1rem;}.back-button{position:absolute;top:20px;left:80px;background:none;border:none;color:#64b5f6;font-size:14px;cursor:pointer;transition:color 0.3s;}.back-button:hover{color:#90caf9;}.collection-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}.stat-box{background:var(--color-surface);border:1px solid rgba(255,255,255,0.08);border-radius:var(--border-radius);padding:20px;text-align:center;transition:transform 0.3s ease;}.stat-box:hover{transform:translateY(-4px);}.stat-value{display:block;font-size:2rem;font-weight:700;color:var(--color-text-primary);margin-bottom:4px;}.stat-label{font-size:0.85rem;color:var(--color-text-secondary);}[data-theme="light"] .collection-stats{background:transparent !important;border:none !important;box-shadow:none !important;}[data-theme="light"] .stat-box{background:#ffffff;border:1px solid #d0d0d0;box-shadow:0 2px 8px rgba(0,0,0,0.08);}[data-theme="light"] .stat-value{color:#0a0a0a;font-weight:800;}[data-theme="light"] .stat-label{color:#2a2a2a;font-weight:600;}.progress-container{background:var(--color-surface);border-radius:12px;height:24px;margin-bottom:24px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.08);}.progress-bar{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);border-radius:12px;width:0%;transition:width 0.5s ease;}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:0.85rem;color:var(--color-text-primary);text-shadow:0 1px 2px rgba(0,0,0,0.5);}.filters{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;align-items:center;}.filter-btn{background:var(--color-surface);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:10px 20px;color:var(--color-text-secondary);font-size:14px;cursor:pointer;transition:all 0.3s ease;}.filter-btn:hover{background:var(--color-surface-elevated);color:var(--color-text-primary);}.filter-btn.active{background:var(--color-accent);color:#000;font-weight:600;border-color:var(--color-accent);}.custom-select{position:relative;min-width:180px;margin-left:auto;font-size:14px;user-select:none;}.custom-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:linear-gradient(135deg,rgba(40,40,55,0.95) 0%,rgba(25,25,40,0.95) 100%);border:2px solid rgba(255,255,255,0.12);border-radius:12px;color:var(--color-text-primary);font-weight:500;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.3);}.custom-select-trigger:hover{border-color:rgba(74,144,226,0.5);box-shadow:0 4px 20px rgba(74,144,226,0.2);}.custom-select.open .custom-select-trigger{border-color:var(--color-accent);border-radius:12px 12px 0 0;}.dropdown-arrow{transition:transform 0.3s ease;opacity:0.7;}.custom-select.open .dropdown-arrow{transform:rotate(180deg);}.custom-options{position:absolute;top:100%;left:0;right:0;background:linear-gradient(180deg,rgba(30,30,45,0.98) 0%,rgba(20,20,35,0.98) 100%);border:2px solid var(--color-accent);border-top:none;border-radius:0 0 12px 12px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all 0.3s ease;z-index:100;box-shadow:0 8px 25px rgba(0,0,0,0.4);backdrop-filter:blur(10px);}.custom-select.open .custom-options{opacity:1;visibility:visible;transform:translateY(0);}.custom-option{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;transition:all 0.2s ease;border-bottom:1px solid rgba(255,255,255,0.05);}.custom-option:last-child{border-bottom:none;}.custom-option:hover{background:linear-gradient(90deg,rgba(74,144,226,0.3) 0%,rgba(74,144,226,0.1) 100%);padding-left:20px;}.custom-option.selected{background:linear-gradient(90deg,rgba(74,144,226,0.4) 0%,rgba(74,144,226,0.15) 100%);color:var(--color-accent);font-weight:600;}.option-icon{font-size:16px;width:24px;text-align:center;}.filter-select{display:none;}.loading-container{text-align:center;padding:60px 20px;}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,0.1);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px;}@keyframes spin{to{transform:rotate(360deg);}}.login-required{text-align:center;padding:60px 20px;}.login-icon{font-size:64px;display:block;margin-bottom:16px;}.login-required h2{color:var(--color-text-primary);margin-bottom:8px;}.login-required p{color:var(--color-text-secondary);margin-bottom:24px;}.login-btn{background:linear-gradient(135deg,#4caf50,#45a049);color:white;border:none;padding:14px 32px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;}.login-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(76,175,80,0.4);}.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;}.card-item{background:var(--color-undiscovered);border:2px solid rgba(255,255,255,0.05);border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden;}.card-item:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.2);}.card-item.discovered{background:var(--color-discovered);border-color:rgba(76,175,80,0.3);}.card-item.discovered:hover{border-color:rgba(76,175,80,0.5);box-shadow:0 8px 24px rgba(76,175,80,0.2);}.card-item.undiscovered .card-image{filter:grayscale(100%) brightness(0.3);}.card-item.undiscovered .card-name{color:var(--color-text-tertiary);}.card-image{width:80px;height:80px;object-fit:contain;margin-bottom:8px;transition:transform 0.3s ease;}.card-item:hover .card-image{transform:scale(1.1);}.card-name{font-size:12px;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.card-count{position:absolute;top:8px;right:8px;background:var(--color-success);color:white;font-size:11px;font-weight:700;padding:2px 6px;border-radius:10px;min-width:20px;}.card-rarity-indicator{position:absolute;bottom:0;left:0;right:0;height:3px;}.card-rarity-indicator.common{background:#888;}.card-rarity-indicator.rare{background:#ff9800;}.card-rarity-indicator.epic{background:#9c27b0;}.card-rarity-indicator.legendary{background:#ffd700;}.card-rarity-indicator.champion{background:linear-gradient(90deg,#ff4081,#7c4dff);}.empty-state{text-align:center;padding:80px 20px;}.empty-icon{font-size:72px;display:block;margin-bottom:16px;}.empty-state h3{color:var(--color-text-primary);margin-bottom:8px;}.empty-state p{color:var(--color-text-secondary);margin-bottom:24px;}.play-btn{background:linear-gradient(135deg,var(--color-accent),#ff8c00);color:#000;border:none;padding:14px 32px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.3s ease;}.play-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,215,0,0.4);}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);z-index:1000;justify-content:center;align-items:center;padding:20px;}.modal.show{display:flex;}.modal-content{background:var(--color-surface);border-radius:20px;max-width:500px;width:100%;padding:24px;position:relative;animation:modalSlideIn 0.3s ease;border:1px solid rgba(255,255,255,0.1);}@keyframes modalSlideIn{from{opacity:0;transform:scale(0.9) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);}}.modal-close{position:absolute;top:16px;right:16px;font-size:28px;color:var(--color-text-secondary);cursor:pointer;transition:color 0.3s;line-height:1;}.modal-close:hover{color:var(--color-text-primary);}.modal-card-header{display:flex;align-items:center;gap:20px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.1);}.modal-card-image{width:100px;height:100px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,0.05);padding:8px;}.modal-card-info h2{font-size:1.5rem;margin-bottom:12px;color:var(--color-text-primary);}.modal-card-badges{display:flex;gap:8px;flex-wrap:wrap;}.badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;}.badge.rarity{background:rgba(255,215,0,0.2);color:#ffd700;}.badge.type{background:rgba(33,150,243,0.2);color:#64b5f6;}.badge.elixir{background:rgba(156,39,176,0.2);color:#ce93d8;}.modal-stats h3{color:var(--color-accent);margin-bottom:16px;font-size:1rem;}.modal-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px;}.modal-stat{text-align:center;background:rgba(255,255,255,0.03);border-radius:12px;padding:16px 8px;}.modal-stat-value{display:block;font-size:1.5rem;font-weight:700;color:var(--color-success);margin-bottom:4px;}.modal-stat-label{font-size:11px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:0.5px;}.modal-dates{background:rgba(255,255,255,0.03);border-radius:12px;padding:16px;}.modal-dates p{color:var(--color-text-secondary);font-size:13px;margin-bottom:8px;}.modal-dates p:last-child{margin-bottom:0;}.modal-dates strong{color:var(--color-text-primary);}@media (max-width:768px){header{flex-direction:column;align-items:center;}header h1{width:100%;text-align:center;padding:20px 50px;white-space:nowrap;}.back-button{display:none;}.collection-stats{grid-template-columns:repeat(2,1fr);}.stat-value{font-size:1.5rem;}.filters{flex-direction:column;align-items:stretch;}.filter-select{margin-left:0;width:100%;}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;}.card-image{width:60px;height:60px;}.modal-card-header{flex-direction:column;text-align:center;}.modal-stats-grid{grid-template-columns:1fr;}}@media (max-width:480px){.collection-stats{grid-template-columns:repeat(2,1fr);gap:8px;}.stat-box{padding:12px;}.stat-value{font-size:1.2rem;}}body.high-contrast{filter:contrast(1.2);}body.high-contrast *{border-color:rgba(255,255,255,0.3) !important;}body.no-animations,body.no-animations *{animation:none !important;transition:none !important;}body.no-animations .container,body.no-animations [style*="opacity"],body.no-animations .collection-grid,body.no-animations .modal-content{opacity:1 !important;transform:none !important;}body.performance-mode *{box-shadow:none !important;backdrop-filter:none !important;text-shadow:none !important;}body.performance-mode::before,body.performance-mode::after{display:none !important;}