:root{--font-primary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-display: "Space Grotesk", "Inter", sans-serif;--accent-primary: #6c5ce7;--accent-secondary: #a29bfe;--accent-tertiary: #fd79a8;--accent-success: #00cec9;--accent-warning: #fdcb6e;--gradient-primary: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);--gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-card: linear-gradient(145deg, rgba(108, 92, 231, .08) 0%, rgba(253, 121, 168, .05) 100%);--gradient-glow: radial-gradient(circle at 50% 0%, rgba(108, 92, 231, .15) 0%, transparent 60%);--glass-bg: rgba(255, 255, 255, .06);--glass-border: rgba(255, 255, 255, .1);--glass-blur: blur(20px);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.175, .885, .32, 1.275);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 24px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .16);--shadow-glow: 0 0 40px rgba(108, 92, 231, .3);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-primary);overflow-x:hidden;min-height:100vh}form{width:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#6c5ce74d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#6c5ce780}::selection{background:#6c5ce74d;color:inherit}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #6c5ce733}50%{box-shadow:0 0 40px #6c5ce766}}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes slideInStagger{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes breathe{0%,to{opacity:.6}50%{opacity:1}}.navbar{position:sticky;top:0;z-index:100;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);transition:background var(--transition-smooth);padding:8px 20px}.navbar:before{content:"";position:absolute;inset:0;background:var(--gradient-glow);opacity:.5;pointer-events:none}.navbar-logo{transition:var(--transition-smooth);filter:drop-shadow(0 0 8px rgba(108,92,231,.3))}.navbar-logo:hover{transform:scale(1.08) rotate(-2deg);filter:drop-shadow(0 0 16px rgba(108,92,231,.5))}.search-container{position:relative;transition:var(--transition-smooth)}.search-container input:focus,.search-container input:active{transform:none!important}.search-container input::placeholder{font-style:italic;opacity:.5}.color-mode-toggle{position:relative;overflow:hidden;border-radius:var(--radius-xl);transition:var(--transition-spring)!important}.color-mode-toggle:hover{transform:scale(1.05)}.color-mode-toggle:active{transform:scale(.95)}.page-heading{font-family:var(--font-display)!important;background:var(--gradient-hero);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:gradient-shift 6s ease infinite;letter-spacing:-.02em;line-height:1.1!important;position:relative}.filter-bar{display:flex;gap:12px;align-items:center;padding:12px 0;animation:fadeInUp .4s ease both;animation-delay:.1s}.genre-sidebar{padding-right:12px;position:sticky;top:80px;max-height:calc(100vh - 90px);overflow-y:auto;scrollbar-width:thin}.genre-heading{font-family:var(--font-display)!important;letter-spacing:.05em;text-transform:uppercase;font-size:.8rem!important;opacity:.6;margin-bottom:12px!important}.genre-item{border-radius:var(--radius-md);padding:6px 8px;transition:var(--transition-smooth);cursor:pointer;position:relative;overflow:hidden}.genre-item:before{content:"";position:absolute;inset:0;background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-smooth);border-radius:var(--radius-md)}.genre-item:hover:before{opacity:.08}.genre-item:hover{transform:translate(4px)}.genre-item-active{background:#6c5ce71f!important}.genre-item-active:after{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--gradient-primary);border-radius:0 4px 4px 0}.genre-image{border-radius:var(--radius-sm)!important;transition:var(--transition-smooth);object-fit:cover}.genre-item:hover .genre-image{transform:scale(1.1);box-shadow:var(--shadow-sm)}.genre-name{font-weight:500!important;font-size:.9rem!important;transition:color var(--transition-fast)}.genre-name-active{color:var(--accent-primary)!important;font-weight:600!important}.game-card{border-radius:var(--radius-lg)!important;overflow:hidden;transition:all var(--transition-smooth)!important;border:1px solid var(--glass-border);position:relative}.game-card:after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);opacity:0;transition:opacity var(--transition-smooth);background:var(--gradient-card);pointer-events:none}.game-card:hover{transform:translateY(-8px) scale(1.02)!important;box-shadow:var(--shadow-lg),0 0 30px #6c5ce71f!important;border-color:#6c5ce74d!important}.game-card:hover:after{opacity:1}.game-card-image-container{position:relative;overflow:hidden}.game-card-image{transition:transform .6s cubic-bezier(.4,0,.2,1)!important;width:100%;aspect-ratio:16 / 9;object-fit:cover}.game-card:hover .game-card-image{transform:scale(1.08)!important}.game-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 50%,transparent 100%);opacity:0;transition:opacity var(--transition-smooth);pointer-events:none}.game-card:hover .game-card-overlay{opacity:1}.game-card-metacritic{position:absolute;top:12px;right:12px;padding:6px 14px;border-radius:var(--radius-sm);font-weight:800;font-size:.95rem;letter-spacing:.5px;box-shadow:var(--shadow-sm);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);z-index:2;transition:transform var(--transition-spring)}.game-card:hover .game-card-metacritic{transform:scale(1.1)}.metacritic-high{background:#00cec9d9;color:#fff}.metacritic-mid{background:#fdcb6ed9;color:#2d3436}.metacritic-low{background:#fd79a8d9;color:#fff}.game-card-body{padding:16px!important;position:relative;z-index:1}.game-card-platforms{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.game-card-platforms .platform-icon{font-size:1rem;opacity:.5;transition:var(--transition-smooth)}.game-card:hover .platform-icon{opacity:.8;color:var(--accent-primary)}.game-card-title{font-family:var(--font-display)!important;font-weight:700!important;font-size:1.15rem!important;line-height:1.3!important;letter-spacing:-.01em;margin-bottom:8px!important;transition:color var(--transition-fast)}.game-card:hover .game-card-title{color:var(--accent-secondary)}.game-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid var(--glass-border);margin-top:8px}.game-card-rating{display:flex;align-items:center;gap:4px;font-size:.85rem;font-weight:600}.game-card-added-btn{border-radius:var(--radius-xl)!important;font-size:.8rem!important;font-weight:500!important;padding:4px 12px!important;transition:var(--transition-spring)!important}.game-card-added-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-sm)}.skeleton-card{border-radius:var(--radius-lg)!important;overflow:hidden;border:1px solid var(--glass-border)}.skeleton-shimmer{position:relative;overflow:hidden}.skeleton-shimmer:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(108,92,231,.06) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 1.8s ease-in-out infinite}.game-detail-container{animation:fadeInUp .5s ease both;max-width:1400px;margin:0 auto;padding:20px}.game-detail-title{font-family:var(--font-display)!important;font-weight:800!important;letter-spacing:-.03em;line-height:1.05!important;background:var(--gradient-hero);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:gradient-shift 6s ease infinite}.game-detail-description{line-height:1.75!important;font-size:1rem;opacity:.85}.game-detail-read-more{border-radius:var(--radius-xl)!important;margin-top:4px!important;transition:var(--transition-spring)!important;background:var(--gradient-primary)!important;color:#fff!important;border:none!important;font-weight:600!important;padding:8px 16px!important;height:auto!important}.game-detail-read-more:hover{transform:scale(1.05);box-shadow:var(--shadow-glow)!important}.game-attributes{border-radius:var(--radius-lg);padding:20px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);position:relative;overflow:hidden}.game-attributes:before{content:"";position:absolute;inset:0;background:var(--gradient-card);pointer-events:none}.attribute-item{position:relative;padding:12px 0}.attribute-label{font-family:var(--font-display)!important;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem!important;opacity:.5;margin-bottom:6px!important}.attribute-value{font-weight:500;font-size:.95rem}.game-trailer{border-radius:var(--radius-lg);overflow:hidden;position:relative;box-shadow:var(--shadow-lg);transition:var(--transition-smooth)}.game-trailer:hover{box-shadow:var(--shadow-glow)}.game-trailer video{width:100%;display:block;border-radius:var(--radius-lg)}.screenshot-image{border-radius:var(--radius-md)!important;overflow:hidden;transition:var(--transition-smooth);cursor:pointer}.screenshot-image:hover{transform:scale(1.03);box-shadow:var(--shadow-lg)}.screenshot-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}.screenshot-image:hover img{transform:scale(1.08)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:16px}.loading-spinner{width:48px;height:48px;border:3px solid var(--glass-border);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:var(--font-display);font-weight:500;font-size:.9rem;opacity:.6;animation:breathe 2s ease-in-out infinite}.error-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;animation:fadeInUp .5s ease both}.error-code{font-family:var(--font-display);font-size:8rem;font-weight:900;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:16px}.error-message{font-size:1.2rem;opacity:.6;max-width:400px}.error-back-btn{margin-top:24px;border-radius:var(--radius-xl)!important;background:var(--gradient-primary)!important;color:#fff!important;padding:12px 32px!important;font-weight:600!important;transition:var(--transition-spring)!important;border:none!important}.error-back-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:var(--shadow-glow)!important}.infinite-loader{display:flex;flex-direction:column;align-items:center;padding:32px 0;gap:12px}.infinite-loader-dots{display:flex;gap:8px}.infinite-loader-dot{width:10px;height:10px;border-radius:50%;background:var(--accent-primary);animation:float 1.4s ease-in-out infinite}.infinite-loader-dot:nth-child(2){animation-delay:.15s}.infinite-loader-dot:nth-child(3){animation-delay:.3s}.back-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-xl);font-weight:500;font-size:.9rem;transition:var(--transition-smooth);cursor:pointer;opacity:.7;border:1px solid var(--glass-border);background:transparent;color:inherit;text-decoration:none}.back-button:hover{opacity:1;transform:translate(-4px);border-color:var(--accent-primary);box-shadow:var(--shadow-sm)}.stagger-item{animation:fadeInUp .5s ease both}.stagger-item:nth-child(1){animation-delay:0ms}.stagger-item:nth-child(2){animation-delay:50ms}.stagger-item:nth-child(3){animation-delay:.1s}.stagger-item:nth-child(4){animation-delay:.15s}.stagger-item:nth-child(5){animation-delay:.2s}.stagger-item:nth-child(6){animation-delay:.25s}.stagger-item:nth-child(7){animation-delay:.3s}.stagger-item:nth-child(8){animation-delay:.35s}.stagger-item:nth-child(9){animation-delay:.4s}.stagger-item:nth-child(10){animation-delay:.45s}.stagger-item:nth-child(11){animation-delay:.5s}.stagger-item:nth-child(12){animation-delay:.55s}@media (max-width: 768px){.page-heading,.game-detail-title{font-size:2rem!important}.error-code{font-size:5rem}.game-card:hover{transform:translateY(-4px)!important}}[data-scope=menu][data-part=content]{border-radius:var(--radius-md)!important;border:1px solid var(--glass-border)!important;-webkit-backdrop-filter:var(--glass-blur)!important;backdrop-filter:var(--glass-blur)!important;box-shadow:var(--shadow-lg)!important;overflow:hidden;animation:scaleIn .15s ease}[data-scope=menu][data-part=item]{border-radius:var(--radius-sm)!important;margin:2px 4px!important;padding:10px 16px!important;font-size:.95rem!important;font-weight:500!important;transition:var(--transition-fast)!important;cursor:pointer!important}[data-scope=menu][data-part=item]:hover,[data-scope=menu][data-part=item][data-highlighted]{background:#6c5ce71f!important}