@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg-primary:#0c0d12;--bg-secondary:#13161e;--bg-elevated:#1a1d28;--border:#ffffff12;--border-focus:#ffffff2e;--accent:#4f7df9;--accent-soft:#4f7df91f;--accent-hover:#6690ff;--danger:#e5484d;--danger-soft:#e5484d1f;--success:#30a46c;--warn:#f5a623;--text-primary:#ececf1;--text-secondary:#8a8f98;--text-muted:#5c5f66;--radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1rem;--radius-xl:1.25rem;--radius-2xl:1.5rem;--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--shadow-sm:0 .125rem .5rem #00000040;--shadow-md:0 .25rem 1rem #00000059;--glass-bg:linear-gradient(145deg, #ffffff14 0%, #ffffff09 50%, #ffffff04 100%);--glass-border-top:#ffffff2e;--glass-border-left:#ffffff1f;--glass-border-bottom:#0000004d;--glass-border-right:#00000026;--glass-blur:24px;--glass-shadow:0 8px 32px #0000008c, 0 2px 8px #00000059, inset 0 1px 0 #ffffff14;--inset-bg:#0006;--inset-shadow:inset 0 2px 6px #0009, inset 0 1px 2px #0006}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-size:16px;line-height:1.5;overflow-x:hidden}body:before{content:"";opacity:.45;pointer-events:none;z-index:0;background:url(/img/bg_geometric.png) 50%/cover no-repeat;position:fixed;inset:0}*{scrollbar-width:thin;scrollbar-color:#ffffff1f transparent}::-webkit-scrollbar{width:.25rem;height:.25rem}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:#ffffff38}h1,h2,h3,h4{color:var(--text-primary);font-weight:600;line-height:1.25}.panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg)}.panel-elevated{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg)}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border-top:1px solid var(--glass-border-top);border-left:1px solid var(--glass-border-left);border-bottom:1px solid var(--glass-border-bottom);border-right:1px solid var(--glass-border-right);border-radius:var(--radius-xl);box-shadow:var(--glass-shadow);position:relative;overflow:hidden}.glass-card-sm{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border-radius:var(--radius-lg);border:1px solid #ffffff24;border-color:#ffffff24 #0000001f #00000040 #ffffff14;position:relative;overflow:hidden;box-shadow:0 6px 24px #00000080,0 2px 6px #0000004d,inset 0 1px #ffffff0f}.btn-inset{font-family:var(--font);cursor:pointer;color:var(--text-secondary);background:var(--inset-bg);box-shadow:var(--inset-shadow);border:none;border-radius:9999px;outline:none;justify-content:center;align-items:center;padding:.5rem 1.5rem;font-size:.8125rem;font-weight:500;transition:all .15s;display:inline-flex}.btn-inset:hover{color:var(--text-primary);background:#00000080}.btn-inset:active{transform:scale(.96)}.btn-glow{font-family:var(--font);cursor:pointer;color:#fff;text-shadow:0 1px 2px #0000004d;background:linear-gradient(135deg,#6cb4ee 0%,#4f9cf7 50%,#6366f1 100%);border:none;border-radius:9999px;outline:none;justify-content:center;align-items:center;padding:.75rem 1.75rem;font-size:.875rem;font-weight:600;transition:all .2s;display:inline-flex;box-shadow:0 0 24px #4f9cf773,0 0 60px #4f9cf726,0 4px 12px #0000004d}.btn-glow:hover{transform:translateY(-1px);box-shadow:0 0 36px #4f9cf799,0 0 80px #4f9cf733,0 6px 16px #00000059}.btn-glow:active{transform:scale(.97)}.stat-pill{color:var(--text-primary);white-space:nowrap;background:#ffffff0f;border:1px solid #ffffff14;border-radius:9999px;align-items:center;gap:.375rem;padding:.375rem .75rem;font-size:.8125rem;font-weight:600;display:inline-flex;box-shadow:0 2px 8px #00000040}.badge-popular{border-radius:var(--radius-sm);color:#7eb8ff;letter-spacing:.02em;background:#4f7df933;padding:.125rem .5rem;font-size:.6875rem;font-weight:600;position:absolute;bottom:.5rem;right:.625rem}.icon-well{border-radius:var(--radius-md);background:#00000040;flex-shrink:0;justify-content:center;align-items:center;width:3.25rem;height:3.25rem;display:flex;overflow:hidden;box-shadow:inset 0 2px 4px #0006,0 1px #ffffff0d}.icon-well img{object-fit:contain;filter:drop-shadow(0 2px 4px #00000080);width:2.25rem;height:2.25rem}.input-inset{background:var(--inset-bg);box-shadow:var(--inset-shadow);width:100%;color:var(--text-primary);font-family:var(--font);letter-spacing:.08em;text-align:center;text-transform:uppercase;border:1px solid #ffffff0f;border-radius:9999px;outline:none;padding:.75rem 1.25rem;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.input-inset:focus{box-shadow:var(--inset-shadow), 0 0 12px #4f9cf726;border-color:#4f9cf766}.input-inset::placeholder{color:var(--text-muted);letter-spacing:normal;text-transform:none}.input-inset.is-valid{border-color:var(--success);color:var(--success)}.input-inset.is-invalid{border-color:var(--danger);color:var(--danger)}.btn{border-radius:var(--radius-md);font-family:var(--font);cursor:pointer;color:var(--text-primary);background:var(--bg-elevated);border:none;border:1px solid var(--border);outline:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.875rem;font-weight:500;transition:background .15s,transform .1s,opacity .15s;display:inline-flex}.btn:hover{background:#ffffff0f}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff;border:none}.btn-primary:hover{background:var(--accent-hover)}.btn-danger{background:var(--danger-soft);color:var(--danger);border:1px solid #0000}.btn-danger:hover{background:#e5484d2e}.btn-icon{border-radius:var(--radius-sm);background:0 0;border:none;padding:.5rem}.btn-icon:hover{background:#ffffff0f}.input{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-family:var(--font);outline:none;padding:.75rem 1rem;font-size:.9375rem;transition:border-color .15s}.input:focus{border-color:var(--accent)}.input::placeholder{color:var(--text-muted)}.app-container{z-index:1;flex-direction:column;max-width:32rem;min-height:100vh;margin:0 auto;padding:1rem;display:flex;position:relative}@media (width>=480px){.app-container{padding:1.5rem}}.avatar{text-transform:uppercase;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;font-size:.8125rem;font-weight:600;display:flex}.avatar-ring{border:2px solid #4ade80;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;display:flex;position:relative;box-shadow:0 0 12px #4ade8040}.avatar-ring .avatar-inner{background:#2a2d35;border-radius:50%;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.avatar-ring .online-dot{border:2px solid var(--bg-primary);background:#4ade80;border-radius:50%;width:.625rem;height:.625rem;position:absolute;bottom:0;right:0;box-shadow:0 0 6px #4ade8080}@keyframes fadeIn{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.3s both fadeIn}@keyframes fadeInUp{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}.animate-fade-in-up{animation:.4s both fadeInUp}@keyframes popIn{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.animate-pop-in{animation:.2s both popIn}@keyframes spin{to{transform:rotate(360deg)}}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:1.5rem;height:1.5rem;animation:.6s linear infinite spin}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.home-page{flex-direction:column;gap:1.5rem;padding-bottom:1.5rem;display:flex}.home-header{justify-content:space-between;align-items:center;padding:.5rem 0;display:flex}.home-header-left{align-items:center;gap:.625rem;display:flex}.home-header-right{align-items:center;gap:.5rem;display:flex}.hero-grid{grid-template-columns:1fr 1fr;gap:.875rem;display:grid}.hero-card{cursor:pointer;color:inherit;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;min-height:13rem;padding:1.75rem 1rem 1.25rem;text-decoration:none;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;display:flex}.hero-card:hover{transform:translateY(-4px)scale(1.02);box-shadow:0 16px 48px #0000008c,0 4px 12px #0000004d,inset 0 1px #ffffff1f}.hero-card:active{transform:scale(.97)}.hero-card-img{object-fit:contain;filter:drop-shadow(0 8px 16px #0009);width:7rem;height:7rem;animation:4s ease-in-out infinite float}.hero-card-title{text-align:center;text-shadow:0 2px 4px #00000080;font-size:1rem;font-weight:700}.discover-grid{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.game-card{cursor:pointer;color:inherit;font-family:var(--font);text-align:left;border:none;align-items:center;gap:.75rem;padding:.875rem;text-decoration:none;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,border-color .2s;display:flex}.game-card:hover{transform:translateY(-3px)scale(1.02);box-shadow:0 12px 32px #00000073,0 2px 8px #00000040,inset 0 1px #ffffff1a}.game-card:active{transform:scale(.97)}.game-card.disabled{cursor:not-allowed;opacity:.5}.game-card-info{flex-direction:column;gap:.125rem;min-width:0;display:flex}.game-card-title{-webkit-line-clamp:2;text-shadow:0 1px 2px #0006;-webkit-box-orient:vertical;font-size:.8125rem;font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}.game-card-subtitle{color:var(--text-secondary);font-size:.75rem}.join-footer-sticky{z-index:10;pointer-events:none;background:linear-gradient(#0000 0%,#0c0d12b3 20%,#0c0d12eb 50%,#0c0d12f7 100%);margin:0 -1rem;padding:1rem 1rem .875rem;position:sticky;bottom:0}.join-footer-panel{pointer-events:auto;-webkit-backdrop-filter:blur(24px);border-radius:var(--radius-xl);background:linear-gradient(145deg,#ffffff12 0%,#ffffff08 100%);border:1px solid #ffffff1f;border-color:#ffffff1f #0000001f #00000040 #ffffff14;flex-direction:column;gap:.5rem;padding:.875rem 1rem;display:flex;box-shadow:0 -4px 24px #0006,0 2px 8px #0000004d,inset 0 1px #ffffff0f}.join-footer-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:600}.join-footer-row{align-items:center;gap:.5rem;display:flex}.join-input-wrap{flex:1;position:relative}.join-input-wrap .input-inset{width:100%;padding:.625rem 1rem;font-size:.875rem}.join-input-spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:1rem;height:1rem;animation:.6s linear infinite spin;position:absolute;top:50%;right:.875rem;transform:translateY(-50%)}.btn-scan-glow{border-radius:var(--radius-md);cursor:pointer;color:#fff;background:linear-gradient(135deg,#4f9cf7 0%,#6366f1 100%);border:none;outline:none;flex-shrink:0;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;transition:all .2s;display:flex;box-shadow:0 0 16px #4f9cf759,0 4px 8px #0000004d}.btn-scan-glow:hover{transform:translateY(-1px);box-shadow:0 0 24px #4f9cf780,0 6px 12px #00000059}.btn-scan-glow:active{transform:scale(.95)}@media (width<=400px){.hero-grid{grid-template-columns:1fr 1fr;gap:.625rem}.hero-card{min-height:11rem;padding:1.25rem .75rem 1rem}.hero-card-img{width:5.5rem;height:5.5rem}.discover-grid{grid-template-columns:1fr 1fr;gap:.5rem}.game-card{gap:.5rem;padding:.75rem}.icon-well{width:2.75rem;height:2.75rem}.icon-well img{width:1.75rem;height:1.75rem}.game-card-title{font-size:.75rem}.game-card-subtitle{font-size:.6875rem}.badge-popular{padding:.0625rem .375rem;font-size:.625rem}}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent)}.text-danger{color:var(--danger)}.text-sm{font-size:.8125rem}.text-xs{font-size:.75rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}