:root{--bg:#0c0f17;--surface:#151a26;--surface-2:#1d2433;--border:#263048;--text:#e7ecf5;--muted:#8a96ad;--accent:#4ade80;--accent-2:#38bdf8;--danger:#f87171;--radius:14px;--maxw:1180px;--font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{background:radial-gradient(1200px 600px at 50% -10%, #16203a 0%, var(--bg) 55%) fixed;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0}a{color:inherit;text-decoration:none}h1,h2,h3{margin:0;line-height:1.15}.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}.muted{color:var(--muted)}.app{flex-direction:column;min-height:100%;display:flex}main{flex:1;padding-bottom:64px}.site-header{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#0c0f1799;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;height:68px;display:flex}.brand{align-items:center;gap:14px;display:flex}.brand-mark{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#04210f;letter-spacing:.5px;border-radius:10px;place-items:center;width:40px;height:40px;font-weight:800;display:grid}.brand-name{font-size:15px;font-weight:700}.brand-tag{font-size:12.5px}.cta{border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:9px 16px;font-size:14px;font-weight:600;transition:all .15s}.cta:hover{background:var(--surface-2);border-color:var(--accent)}.brand{color:inherit;text-decoration:none}.nav{align-items:center;gap:6px;display:flex}.nav-link{color:var(--muted);border-radius:9px;padding:8px 14px;font-size:14px;font-weight:600;text-decoration:none;transition:all .15s}.nav-link:hover{color:var(--text);background:var(--surface)}.nav-link.active{color:var(--accent);background:var(--surface)}.who{font-size:13px}.hero{max-width:760px;padding:56px 0 8px}.hero-title{letter-spacing:-1px;margin:0 0 14px;font-size:44px;font-weight:800}.hero-sub{color:var(--muted);margin:0 0 24px;font-size:17px;line-height:1.6}.hero-cta{flex-wrap:wrap;gap:12px;display:flex}.cta-primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#04210f;border-color:#0000}.cta-primary:hover{filter:brightness(1.05);border-color:#0000}.page-head{margin:28px 0 20px}.page-head h1{margin:0 0 6px;font-size:28px}.page-head p{margin:0}.result-count{margin-left:auto}.signin-card{flex-direction:column;align-items:flex-start;gap:10px;max-width:520px;display:flex}.signin-card p{margin:0}.guide{max-width:760px}.guide-note{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);margin-bottom:8px;padding:14px 16px;font-size:14.5px}.steps{counter-reset:step;margin:8px 0;padding:0;list-style:none}.steps li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin:14px 0;padding:18px 20px}.steps h3{margin:0 0 8px;font-size:17px}.steps p{color:#c4cde0;margin:0;line-height:1.6}.steps code,.guide code{border:1px solid var(--border);word-break:break-word;background:#111827;border-radius:6px;padding:1px 6px;font-size:13px}.guide-help{margin-top:16px;font-size:13.5px}.banner{border-radius:10px;margin:18px 0;padding:12px 16px;font-size:14px}.banner.error{color:#fecaca;background:#f871711f;border:1px solid #f871714d}.stats-row{grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0;display:grid}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px}.stat-card.accent{border-color:#4ade8066;box-shadow:inset 0 0 0 1px #4ade8014}.stat-value{letter-spacing:-.5px;font-size:34px;font-weight:800}.stat-card.accent .stat-value{color:var(--accent)}.stat-label{margin-top:2px;font-size:13px}.section{margin:38px 0}.section-head{justify-content:space-between;align-items:baseline;margin-bottom:16px;display:flex}.section-head h2{font-size:20px}.empty{text-align:center;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);padding:48px 20px}.empty-emoji{margin-bottom:8px;font-size:34px}.live-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.live-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:14px;padding:12px;display:flex}.live-cover{background:var(--surface-2) center/cover no-repeat;border-radius:10px;flex:none;width:76px;height:76px}.live-title{margin-bottom:6px;font-weight:700}.live-counts{align-items:center;gap:10px;font-size:13px;display:flex}.games-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px;display:grid}.game-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:all .15s;overflow:hidden}.game-card:hover{border-color:var(--accent-2);transform:translateY(-3px)}.game-card.is-live{border-color:#4ade8073}.cover{aspect-ratio:3/4;background:var(--surface-2);position:relative}.cover img{object-fit:cover;width:100%;height:100%;display:block}.cover-fallback{text-align:center;background:linear-gradient(160deg, var(--surface-2), #10141d);place-items:center;width:100%;height:100%;padding:16px;display:grid}.cover-fallback span{color:#cdd6e6;font-size:15px;font-weight:700;line-height:1.3}.platform-tag{color:#cbd5e1;text-transform:uppercase;letter-spacing:.4px;background:#0009;border-radius:999px;padding:3px 8px;font-size:11px;position:absolute;bottom:8px;left:8px}.game-meta{padding:12px 14px}.game-title{white-space:nowrap;text-overflow:ellipsis;font-size:14.5px;font-weight:650;overflow:hidden}.game-sub{margin-top:2px;font-size:12.5px}.live-badge{color:var(--accent);background:#4ade802e;border:1px solid #4ade8066;border-radius:999px;align-items:center;gap:6px;padding:4px 9px;font-size:11.5px;font-weight:700;display:flex;position:absolute;top:8px;right:8px}.pill{color:var(--accent);align-items:center;gap:6px;font-weight:700;display:inline-flex}.dot{background:var(--accent);border-radius:50%;width:8px;height:8px;animation:1.8s infinite pulse;box-shadow:0 0 #4ade8099}@keyframes pulse{0%{box-shadow:0 0 #4ade8080}70%{box-shadow:0 0 0 7px #4ade8000}to{box-shadow:0 0 #4ade8000}}.site-footer{border-top:1px solid var(--border);padding:22px 0;font-size:13px}@media (width<=760px){.stats-row{grid-template-columns:repeat(2,1fr)}.brand-tag{display:none}.header-inner{flex-wrap:wrap;gap:10px;height:auto;padding-top:12px;padding-bottom:12px}.nav{order:3;justify-content:flex-start;width:100%;overflow-x:auto}.who{display:none}.hero-title{font-size:34px}}.auth-control{align-items:center;gap:.75rem;display:flex}.link-btn{color:#10b981;cursor:pointer;font:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.link-btn:disabled{opacity:.6;cursor:default}.account-panel{background:#1f2937;border:1px solid #374151;border-radius:12px;padding:1.25rem}.activity-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;display:grid}.activity-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px}.activity-head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.gamertag{font-weight:700}.status{align-items:center;gap:6px;font-size:12.5px;font-weight:700;display:inline-flex}.status.offline{color:var(--muted,#94a3b8)}.status.offline .dot{box-shadow:none;background:#64748b;animation:none}.activity-now{align-items:center;gap:12px;display:flex}.activity-cover{background:var(--surface-2) center/cover no-repeat;border-radius:8px;flex:none;width:56px;height:56px}.activity-playing{font-weight:600}.addr-row{flex-wrap:wrap;align-items:center;gap:.75rem;margin:.75rem 0;display:flex}.addr{word-break:break-all;background:#111827;border:1px solid #374151;border-radius:8px;flex:1;min-width:240px;padding:.6rem .8rem;font-family:monospace}.how-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;display:grid}.how-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.how-num{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#04210f;border-radius:50%;place-items:center;width:32px;height:32px;margin-bottom:12px;font-weight:800;display:grid}.how-title{margin-bottom:6px;font-weight:700}.how-cta{flex-wrap:wrap;align-items:center;gap:14px;margin-top:16px;display:flex}.filter-bar{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;display:flex}.search{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:10px;flex:1;min-width:220px;max-width:360px;padding:9px 14px;font-size:14px}.search:focus{border-color:var(--accent);outline:none}.seg{border:1px solid var(--border);border-radius:10px;display:inline-flex;overflow:hidden}.seg button{background:var(--surface);color:var(--muted);cursor:pointer;border:none;border-left:1px solid var(--border);padding:9px 14px;font-size:13px;font-weight:600}.seg button:first-child{border-left:none}.seg button.on{background:var(--surface-2);color:var(--accent)}.seg button:hover{color:var(--text)}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.footer-fine{opacity:.8;max-width:620px;margin-top:6px;font-size:12px}.footer-links{flex-wrap:wrap;gap:18px;display:flex}.footer-links a{color:var(--muted)}.footer-links a:hover{color:var(--accent)}