@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{margin:0;padding:0;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4,h5,h6{margin:0}a{color:inherit;text-decoration:none}button,input,textarea{font-family:inherit}:root{--primary:#8b5cf6;--primary-glow:#8b5cf666;--accent:#d946ef;--bg-dark:#09090b;--bg-card:#18181bb3;--text-main:#f4f4f5;--text-dim:#a1a1aa;--border:#ffffff14;--glass:#ffffff08;--gold:#f59e0b;--silver:#94a3b8;--bronze:#b45309}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,Inter,system-ui,sans-serif}body{background-color:var(--bg-dark);color:var(--text-main);background-image:radial-gradient(circle at 0 0,#8b5cf626 0%,#0000 40%),radial-gradient(circle at 100% 100%,#d946ef1a 0%,#0000 40%);min-height:100vh;overflow-x:hidden}.app-container{min-height:100vh;display:flex}.content{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:2.5rem}@media (width<=1024px){.app-container{flex-direction:column}.content{padding:1.5rem 1.5rem 6rem}}.side-nav{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:2rem;width:280px;height:100vh;padding:2rem 1.5rem;display:flex;position:sticky;top:0}.nav-logo{background:linear-gradient(135deg, var(--primary), var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;align-items:center;gap:1rem;padding-left:.5rem;font-size:1.5rem;font-weight:800;display:flex}.nav-links{flex-direction:column;gap:.5rem;display:flex}.nav-link{color:var(--text-dim);border-radius:12px;align-items:center;gap:1rem;padding:.875rem 1rem;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.nav-link:hover{color:var(--text-main);background:var(--glass)}.nav-link.active{color:#fff;background:var(--primary);box-shadow:0 4px 20px var(--primary-glow)}.nav-bottom{border-top:1px solid var(--border);flex-direction:column;gap:.5rem;margin-top:auto;padding-top:1.5rem;display:flex}.logout-link{cursor:pointer;color:#ef4444;background:0 0;border:none;border-radius:12px;align-items:center;gap:1rem;width:100%;padding:.875rem 1rem;font-weight:600;transition:all .2s;display:flex}.logout-link:hover{background:#ef44441a}@media (width<=1024px){.side-nav{border-right:none;border-top:1px solid var(--border);z-index:1000;flex-direction:row;justify-content:space-around;gap:0;width:100%;height:auto;padding:.75rem;position:fixed;top:auto;bottom:0}.nav-logo,.nav-bottom,.nav-link span{display:none}.nav-link{padding:1rem}}.glass{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:1.25rem}.page-container{animation:.5s ease-out fadeIn}.page-header{margin-bottom:2.5rem}.page-header h1{margin-bottom:1.5rem;font-size:2.5rem;font-weight:800}.auth-container{justify-content:center;align-items:center;height:100vh;padding:20px;display:flex}.auth-form{text-align:center;width:100%;max-width:440px;padding:3rem}.logo-big{background:linear-gradient(135deg, var(--primary), var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;justify-content:center;align-items:center;gap:1rem;margin-bottom:.5rem;font-size:3rem;font-weight:900;display:flex}.auth-subtitle{color:var(--text-dim);margin-bottom:2.5rem;font-size:1.1rem}.input-group{margin-bottom:1rem}.input-group input{border:1px solid var(--border);color:#fff;background:#ffffff0d;border-radius:12px;width:100%;padding:1rem 1.25rem;font-size:1rem;transition:border-color .2s}.input-group input:focus{border-color:var(--primary);background:#ffffff14;outline:none}.btn-primary-glow{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;cursor:pointer;width:100%;box-shadow:0 4px 20px var(--primary-glow);border:none;border-radius:12px;padding:1rem;font-size:1rem;font-weight:700;transition:transform .2s,box-shadow .2s}.btn-primary-glow:hover:not(:disabled){box-shadow:0 8px 30px var(--primary-glow);transform:translateY(-2px)}.btn-primary-glow:disabled{opacity:.6;cursor:not-allowed}.auth-footer{color:var(--text-dim);margin-top:2rem}.link-btn-glow{color:var(--primary);cursor:pointer;background:0 0;border:none;margin-left:.5rem;font-weight:700}.auth-divider{color:var(--text-dim);align-items:center;gap:1rem;margin:1.5rem 0;font-size:.8rem;display:flex}.auth-divider:before,.auth-divider:after{content:"";background:var(--border);flex:1;height:1px}.btn-guest{background:var(--glass);border:1px solid var(--border);color:#fff;cursor:pointer;border-radius:12px;width:100%;padding:.875rem;font-weight:600;transition:all .2s}.btn-guest:hover{border-color:var(--primary);background:#ffffff14}.grid-juegos{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;display:grid}.card-juego-premium{background:var(--bg-card);border:1px solid var(--border);border-radius:1.25rem;transition:all .4s cubic-bezier(.175,.885,.32,1.275);overflow:hidden}.card-juego-premium:hover{border-color:#8b5cf680;transform:translateY(-10px);box-shadow:0 20px 40px #0006}.card-image{height:200px;position:relative}.card-image img{object-fit:cover;width:100%;height:100%}.image-overlay{opacity:0;background:linear-gradient(#0000 40%,#000c);align-items:flex-end;padding:1.25rem;transition:opacity .3s;display:flex;position:absolute;inset:0}.card-juego-premium:hover .image-overlay{opacity:1}.btn-vote-premium{color:#000;cursor:pointer;background:#fff;border:none;border-radius:100px;align-items:center;gap:.5rem;padding:.6rem 1.25rem;font-weight:700;transition:transform .3s;display:flex;transform:translateY(10px)}.card-juego-premium:hover .btn-vote-premium{transform:translateY(0)}.card-content{padding:1.5rem}.card-content h3{white-space:nowrap;text-overflow:ellipsis;margin-bottom:1rem;font-size:1.2rem;overflow:hidden}.card-footer{justify-content:space-between;align-items:center;display:flex}.rating-pill{color:var(--gold);background:#f59e0b26;border-radius:8px;align-items:center;gap:.4rem;padding:.4rem .75rem;font-size:.9rem;font-weight:800;display:flex}.platform-tag{color:var(--text-dim);background:var(--glass);border-radius:4px;margin-left:.4rem;padding:.25rem .5rem;font-size:.7rem}.ranking-list-premium{flex-direction:column;gap:1rem;display:flex}.ranking-card{background:var(--bg-card);border:1px solid var(--border);border-radius:1rem;grid-template-columns:80px 120px 1fr 150px;align-items:center;gap:2rem;padding:1.25rem 2rem;transition:background .2s;display:grid}.ranking-card:hover{background:#ffffff08}.rank-number{text-align:center;font-size:1.5rem;font-weight:900}.medal{border-radius:6px;padding:4px 12px;font-size:.9rem}.medal.gold{background:var(--gold);color:#fff}.medal.silver{background:var(--silver);color:#fff}.medal.bronze{background:var(--bronze);color:#fff}.ranking-game-img{border-radius:8px;height:70px;overflow:hidden}.ranking-game-img img{object-fit:cover;width:100%;height:100%}.ranking-game-info h3{margin-bottom:.5rem}.ranking-meta{align-items:center;gap:1rem;display:flex}.release-year{color:var(--text-dim);font-size:.9rem}.genre-tag{background:var(--glass);border-radius:4px;padding:2px 8px;font-size:.8rem}.ranking-score{text-align:center}.score-box{color:var(--gold);justify-content:center;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:800;display:flex}.score-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-size:.8rem}.users-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem;margin-top:2rem;display:grid}.user-card{text-align:center;color:inherit;padding:2rem;text-decoration:none;transition:transform .3s}.user-card:hover{transform:translateY(-5px)}.user-card-avatar{border:3px solid var(--primary);border-radius:50%;width:80px;height:80px;margin:0 auto 1.5rem;overflow:hidden}.user-card-avatar img{object-fit:cover;width:100%;height:100%}.user-card-info h3{margin-bottom:.5rem}.user-card-info p{color:var(--text-dim);margin-bottom:1.5rem;font-size:.9rem}.user-card-footer{color:var(--primary);justify-content:space-between;align-items:center;font-size:.8rem;font-weight:700;display:flex}.followed-badge{background:var(--glass);color:var(--text-dim);border:1px solid var(--border);border-radius:6px;padding:.25rem .6rem;font-size:.7rem;font-weight:600}.settings-card{max-width:800px;padding:3rem}.settings-form{flex-direction:column;gap:2rem;display:flex}.avatar-edit-section{align-items:center;gap:2rem;display:flex}.avatar-preview{background:var(--glass);border-radius:20px;justify-content:center;align-items:center;width:100px;height:100px;display:flex;overflow:hidden}.avatar-preview img{object-fit:cover;width:100%;height:100%}.avatar-actions{flex-direction:column;gap:.75rem;display:flex}.hidden-input{opacity:0;z-index:-1;width:.1px;height:.1px;position:absolute}.avatar-url-direct{margin-top:.5rem}.input-field{flex-direction:column;flex:1;gap:.5rem;display:flex}.input-field label{color:var(--text-dim);font-size:.9rem;font-weight:600}.input-field input,.input-field textarea{border:1px solid var(--border);color:#fff;background:#ffffff0d;border-radius:12px;padding:1rem;font-size:1rem}.help-text{color:var(--text-dim);margin-top:5px;font-size:.75rem}.help-text a{color:var(--primary)}.message-banner{border-radius:8px;margin-top:1rem;padding:1rem;font-weight:600}.message-banner.success{color:#22c55e;background:#22c55e1a;border:1px solid #22c55e33}.message-banner.error{color:#ef4444;background:#ef44441a;border:1px solid #ef444433}.search-bar-premium{background:var(--bg-card);border:1px solid var(--border);border-radius:1.25rem;align-items:center;gap:1rem;max-width:600px;padding:.5rem .5rem .5rem 1.5rem;display:flex}.search-bar-premium input{color:#fff;background:0 0;border:none;outline:none;flex:1;font-size:1rem}.search-bar-premium button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:1rem;padding:.75rem 1.5rem;font-weight:700}.filters-container::-webkit-scrollbar{display:none}.filters-container{-ms-overflow-style:none;scrollbar-width:none;gap:.75rem;padding-bottom:1rem;display:flex;overflow-x:auto}.filter-pill{background:var(--glass);border:1px solid var(--border);color:var(--text-dim);white-space:nowrap;cursor:pointer;border-radius:100px;padding:.6rem 1.25rem;font-weight:600;transition:all .2s}.filter-pill:hover{color:#fff;border-color:#ffffff4d}.filter-pill.active{color:#000;background:#fff;border-color:#fff}.profile-hero{margin-bottom:3rem}.profile-banner{background:linear-gradient(135deg, var(--primary), var(--accent));border-radius:1.5rem 1.5rem 0 0;height:200px}.profile-info-card{z-index:10;align-items:flex-end;gap:2.5rem;margin-top:-60px;padding:2.5rem;display:flex;position:relative}.profile-avatar-large{border:6px solid var(--bg-dark);background:#27272a;border-radius:2rem;width:160px;height:160px;overflow:hidden;box-shadow:0 10px 40px #00000080}.profile-avatar-large img{object-fit:cover;width:100%;height:100%}.profile-meta-main{flex:1}.name-row{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.profile-bio{color:var(--text-dim);max-width:600px;margin-bottom:1.5rem}.profile-stats-row{gap:3rem;margin-bottom:1.5rem;display:flex}.stat{flex-direction:column;display:flex}.stat-value{font-size:1.5rem;font-weight:800}.stat-label{color:var(--text-dim);text-transform:uppercase;font-size:.8rem}.btn-follow{cursor:pointer;color:#000;background:#fff;border:1px solid #0000;border-radius:12px;padding:.75rem 2.5rem;font-weight:700;transition:all .2s}.btn-follow.following{background:var(--glass);color:#fff;border-color:var(--border)}.icon-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex}.icon-btn:hover{background:var(--glass);color:#fff}.profile-content-grid{grid-template-columns:1fr 320px;gap:2.5rem;margin-top:2rem;display:grid}.profile-activity{min-width:0}.section-header{margin-bottom:1.5rem}.section-header h2{font-size:1.5rem;font-weight:700}.empty-activity{text-align:center;background:var(--glass);border:1px dashed var(--border);color:var(--text-dim);border-radius:12px;padding:3rem}.sidebar-card{flex-direction:column;gap:1.5rem;padding:2rem;display:flex}.sidebar-card h3{margin-bottom:.5rem;font-size:1.1rem}.info-item{color:var(--text-dim);align-items:center;gap:1rem;display:flex}@media (width<=1024px){.profile-content-grid{grid-template-columns:1fr}}.activity-list{flex-direction:column;gap:1.5rem;display:flex}.activity-card{gap:1.5rem;padding:1.5rem;display:flex}.activity-game-img{border-radius:12px;width:180px;height:100px;overflow:hidden}.activity-game-img img{object-fit:cover;width:100%;height:100%}.activity-details{flex:1}.activity-header{justify-content:space-between;margin-bottom:.5rem;display:flex}.activity-stars .filled{color:var(--gold)}.activity-comment{color:var(--text-dim);overflow-wrap:anywhere;word-break:break-word;margin-bottom:1rem;line-height:1.6}.activity-date{color:#fff3;font-size:.8rem}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2000;background:#000c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{width:100%;max-width:600px;position:relative;overflow:hidden}.modal-game-info{height:200px;position:relative}.modal-bg{object-fit:cover;width:100%;height:100%}.modal-header-text{background:linear-gradient(to top, var(--bg-card), transparent);align-items:flex-end;padding:2.5rem;display:flex;position:absolute;inset:0}.modal-body{padding:2.5rem}.modal-star{color:#3f3f46;cursor:pointer;background:0 0;border:none;font-size:2.5rem;transition:color .2s}.modal-body textarea{border:1px solid var(--border);color:#fff;resize:none;background:#ffffff0d;border-radius:12px;width:100%;margin-top:1.5rem;padding:1.25rem;font-size:1rem}.textarea-container{position:relative}.char-counter{color:var(--text-dim);font-size:.75rem;position:absolute;bottom:10px;right:15px}.modal-buttons{justify-content:flex-end;gap:1rem;margin-top:2rem;display:flex}.btn-secondary{background:var(--glass);border:1px solid var(--border);color:#fff;cursor:pointer;border-radius:12px;padding:.75rem 1.5rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.skeleton-card{background:linear-gradient(90deg,#18181b 25%,#27272a 50%,#18181b 75%) 0 0/200% 100%;border-radius:1.25rem;height:350px;animation:2s linear infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.loader-screen{background:var(--bg-dark);justify-content:center;align-items:center;height:100vh;display:flex}.loader{border:5px solid var(--glass);border-bottom-color:var(--primary);box-sizing:border-box;border-radius:50%;width:48px;height:48px;animation:1s linear infinite rotation;display:inline-block}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.auth-form button[type=submit]{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;width:100%;margin-top:10px;padding:12px;font-size:1rem;font-weight:600;transition:all .3s}.auth-form button[type=submit]:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.auth-form button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.auth-form .error{color:#e74c3c;text-align:center;background:#e74c3c1a;border-radius:6px;margin-top:10px;padding:10px;font-size:.9rem}.auth-form p{text-align:center;color:#666;margin-top:20px;font-size:.95rem}.link-btn{color:#667eea;cursor:pointer;background:0 0;border:none;margin-left:5px;padding:0;font-size:1rem;font-weight:600;text-decoration:none;transition:color .3s}.link-btn:hover{color:#764ba2;text-decoration:underline}.stat.clickable{cursor:pointer;transition:transform .2s}.stat.clickable:hover{color:var(--primary);transform:translateY(-2px)}.list-modal{flex-direction:column;max-width:400px;max-height:500px;display:flex}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex}.modal-scroll-body{flex:1;padding:1rem;overflow-y:auto}.connection-item{cursor:pointer;border-radius:12px;align-items:center;gap:1rem;padding:1rem;transition:background .2s;display:flex}.connection-item:hover{background:var(--glass)}.conn-avatar{border:2px solid var(--primary);border-radius:50%;width:50px;height:50px;overflow:hidden}.conn-avatar img{object-fit:cover;width:100%;height:100%}.conn-info h4{margin-bottom:.2rem;font-size:1rem}.conn-info p{color:var(--text-dim);font-size:.8rem}.empty-msg{text-align:center;color:var(--text-dim);padding:2rem}@media (width<=768px){.ranking-card{grid-template-rows:auto auto;grid-template-columns:50px 80px 1fr!important;gap:1rem!important;padding:1rem!important}.ranking-score{border-top:1px solid var(--border);grid-column:span 3;justify-content:space-between;align-items:center;margin-top:.5rem;padding-top:.5rem;display:flex}.ranking-game-img{height:60px!important}}.filters-container{-webkit-overflow-scrolling:touch;padding-bottom:.5rem!important;overflow-y:hidden!important}.activity-stars svg{width:16px;height:16px;color:var(--border);fill:none;stroke:var(--border);transition:all .2s}.activity-stars svg.filled{color:#f5a623;fill:#f5a623;stroke:#f5a623}.activity-stars svg.half{color:#f5a623;fill:url(#half-fill);stroke:#f5a623;opacity:1}@media (width<=480px){.grid-juegos{grid-template-columns:1fr!important;gap:1rem!important}.content{padding:1rem!important}}.modal-stars{justify-content:center;gap:.5rem;margin-bottom:1rem;display:flex}.modal-star{cursor:pointer;color:var(--text-dim);background:0 0;border:none;padding:0;transition:transform .2s}.modal-star svg{fill:none;width:32px;height:32px}.modal-star.active{color:#f5a623}.modal-star.active svg{fill:#f5a623}.modal-star:hover{transform:scale(1.2)}.star-rating-container{gap:2px;display:flex}.star-rating-container svg{width:14px;height:14px;color:var(--border);stroke:var(--border);fill:none}.star-rating-container svg.filled{color:#f5a623;fill:#f5a623;stroke:#f5a623}.star-rating-container svg.half{color:#f5a623;fill:url(#half-fill);stroke:#f5a623}.score-box{align-items:center;display:flex;gap:.75rem!important}.score-val{text-align:right;min-width:30px}.card-stars svg{width:12px;height:12px}.rating-pill{gap:.5rem!important}.empty-state{text-align:center;background:var(--glass);border:1px dashed var(--border);border-radius:1.5rem;flex-direction:column;justify-content:center;align-items:center;margin-top:2rem;padding:5rem 2rem;display:flex}.empty-state svg{color:var(--text-dim);opacity:.3;margin-bottom:1.5rem;width:48px!important;height:48px!important}.empty-state p{color:var(--text-dim);font-size:1.1rem}.ranking-card{max-width:100%}.filters-container{scrollbar-width:thin;scrollbar-color:var(--primary) transparent;position:relative;white-space:nowrap!important;gap:.75rem!important;margin-bottom:1.5rem!important;padding-bottom:.75rem!important;display:flex!important;overflow:auto hidden!important}.filter-pill{flex-shrink:0!important}.filters-container::-webkit-scrollbar{height:4px}.filters-container::-webkit-scrollbar-track{background:0 0}.filters-container::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}.filters-container:hover::-webkit-scrollbar-thumb{background:var(--primary)}.ranking-stars svg{width:20px!important;height:20px!important}.ranking-score{flex-direction:column!important;justify-content:center!important;align-items:center!important;display:flex!important}.score-box{border:1px solid var(--border);background:#ffffff0d;border-radius:10px;padding:.5rem 1rem}.filters-container{flex-wrap:wrap!important;gap:.75rem!important;margin-bottom:2rem!important;padding:0!important;display:flex!important;overflow:visible!important}.filter-pill{flex-shrink:1!important;padding:.5rem 1rem!important;font-size:.9rem!important}.ranking-list-premium{width:100%!important;max-width:1100px!important;margin:0!important}.ranking-card{grid-template-columns:60px 100px 1fr 180px!important;width:100%!important}@media (width<=1024px){.ranking-card{grid-template-columns:50px 80px 1fr 120px!important;gap:1.5rem!important}}.filter-pill.show-more{background:var(--primary-glow)!important;color:var(--primary)!important;border-color:var(--primary)!important;border-style:dashed!important;font-weight:700!important}.filter-pill.show-more:hover{background:var(--primary)!important;color:#fff!important}.page-header{height:auto!important;min-height:fit-content!important;overflow:visible!important}.filters-container{flex-wrap:wrap!important;height:auto!important;display:flex!important;overflow:visible!important}