@import"https://fonts.googleapis.com/css2?family=Tilt+Warp&family=Roboto:wght@400;500;600;700&display=swap";.header{position:sticky;top:0;z-index:100;background:var(--bg-primary);border-bottom:1px solid var(--border);padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between}.header-left{display:flex;align-items:center}.logo{display:flex;align-items:center;gap:0px;font-family:Tilt Warp,cursive;font-size:1.5rem;color:var(--text-primary);text-decoration:none;letter-spacing:-.02em;transition:color .2s}.logo:hover{color:var(--accent)}.logo-icon{width:60px;height:60px;object-fit:contain}.header-right{display:flex;align-items:center;gap:16px}.nav-link{color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;padding:8px 12px;border-radius:var(--radius);transition:color .2s,background .2s}.nav-link:hover{color:var(--text-primary);background:var(--bg-surface)}.login-btn{background:var(--accent);color:#fff;border:none;padding:10px 20px;border-radius:var(--radius);font-family:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s,transform .1s}.login-btn:hover{background:var(--accent-hover)}.login-btn:active{transform:scale(.98)}.user-info{display:flex;align-items:center;gap:12px}.user-name{font-size:.875rem;font-weight:500;color:var(--text-primary)}.settings-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--bg-surface);border-radius:50%;color:var(--text-secondary);text-decoration:none;transition:background .2s,color .2s}.settings-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}.logout-btn{background:transparent;color:var(--text-secondary);border:1px solid var(--border);padding:8px 14px;border-radius:var(--radius);font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .2s}.logout-btn:hover{background:var(--bg-surface);color:var(--text-primary);border-color:var(--text-muted)}@media(max-width:768px){.header{padding:0 16px;height:56px}.logo{font-size:1.25rem}}@media(max-width:480px){.header-right{gap:8px}.nav-link{padding:6px 10px;font-size:.8125rem}.login-btn{padding:8px 14px;font-size:.8125rem}}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px}.game-card{background:var(--bg-surface);border-radius:var(--radius-lg);overflow:hidden;border:1px solid transparent;transition:transform .2s,border-color .2s,box-shadow .2s;cursor:pointer}.game-card:hover{transform:translateY(-4px);border-color:var(--border);box-shadow:0 12px 24px -8px #0006}.game-card .thumbnail{width:100%;aspect-ratio:16 / 10;background:var(--bg-elevated);position:relative;overflow:hidden}.game-card .thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.game-card:hover .thumbnail img{transform:scale(1.05)}.game-card .play-overlay{position:absolute;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.game-card:hover .play-overlay{opacity:1}.play-btn{background:var(--accent);color:#fff;border:none;padding:12px 28px;border-radius:var(--radius);font-family:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s,transform .1s}.play-btn:hover{background:var(--accent-hover)}.play-btn:active{transform:scale(.96)}.game-card .info{padding:16px}.game-card .name{font-size:.9375rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.game-card .description{font-size:.8125rem;color:var(--text-muted)}@media(max-width:768px){.game-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.game-card .info{padding:12px}.game-card .name{font-size:.875rem}}.hero{text-align:center;margin-bottom:64px}.hero h1{font-family:Tilt Warp,cursive;font-size:3rem;font-weight:400;color:var(--text-primary);margin-bottom:16px;letter-spacing:-.02em}.hero p{font-size:1.125rem;color:var(--text-secondary);max-width:500px;margin:0 auto}.section-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:24px}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:none;align-items:center;justify-content:center;z-index:200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-overlay.show{display:flex}.modal-content{background:var(--bg-surface);padding:32px;border-radius:var(--radius-lg);text-align:center;max-width:360px;width:90%;border:1px solid var(--border)}.modal-content h2{margin-bottom:8px;color:var(--text-primary);font-size:1.25rem}.modal-content p{color:var(--text-secondary);margin-bottom:24px;font-size:.9375rem}.google-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:12px 24px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);font-family:inherit;font-size:.9375rem;font-weight:500;color:var(--text-primary);cursor:pointer;transition:background .2s,border-color .2s}.google-btn:hover{background:var(--bg-primary);border-color:var(--text-muted)}.cancel-btn{margin-top:16px;background:transparent;border:none;color:var(--text-muted);font-family:inherit;font-size:.875rem;cursor:pointer;transition:color .2s}.cancel-btn:hover{color:var(--text-secondary)}.empty-state{text-align:center;padding:64px 24px;color:var(--text-muted)}.empty-state svg{width:48px;height:48px;margin-bottom:16px;opacity:.5}@media(max-width:768px){.hero h1{font-size:2rem}.hero p{font-size:1rem}}.pricing-page{max-width:1000px;margin:0 auto;padding:64px 24px}.pricing-header{text-align:center;margin-bottom:48px}.pricing-header h1{font-family:Tilt Warp,cursive;font-size:2.5rem;font-weight:400;color:var(--text-primary);margin-bottom:12px}.pricing-header p{font-size:1.125rem;color:var(--text-secondary)}.pricing-container{min-height:400px}.login-prompt{text-align:center;padding:64px 24px;background:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid var(--border);max-width:400px;margin:0 auto}.login-prompt h2{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:12px}.login-prompt p{color:var(--text-secondary);margin-bottom:24px}.login-prompt .login-btn{padding:12px 32px;font-size:1rem}.pricing-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:800px;margin:0 auto}.pricing-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}.pricing-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px -8px #0006}.pricing-card-featured{border-color:var(--accent);position:relative}.pricing-card-header{text-align:center;margin-bottom:24px}.pricing-badge{display:inline-block;background:var(--bg-elevated);color:var(--text-secondary);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;border-radius:20px;margin-bottom:16px}.pricing-badge-featured{background:var(--accent);color:#fff}.pricing-plan-name{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:8px}.pricing-price{display:flex;align-items:baseline;justify-content:center;gap:4px}.pricing-amount{font-size:3rem;font-weight:700;color:var(--text-primary);line-height:1}.pricing-period{font-size:1rem;color:var(--text-muted)}.pricing-urgency{margin-top:12px;padding:8px 16px;background:#ef444426;border:1px solid #ef4444;border-radius:var(--radius);color:#ef4444;font-size:.9375rem;font-weight:600}.pricing-perks{list-style:none;flex:1;margin-bottom:24px}.pricing-perks li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);color:var(--text-secondary);font-size:.9375rem}.pricing-perks li:last-child{border-bottom:none}.pricing-perks li svg{color:var(--accent);flex-shrink:0}.pricing-cta{display:block;text-align:center;background:var(--bg-elevated);color:var(--text-primary);text-decoration:none;padding:14px 24px;border-radius:var(--radius);font-size:1rem;font-weight:600;transition:background .2s}.pricing-cta:hover{background:var(--border)}.pricing-cta-featured{background:var(--accent);color:#fff}.pricing-cta-featured:hover{background:var(--accent-hover)}@media(max-width:640px){.pricing-cards{grid-template-columns:1fr}.pricing-card{padding:24px}.pricing-amount{font-size:2.5rem}}.stream-container{position:relative;overflow:hidden;background:#000;width:100%;flex:1;display:flex;align-items:center;justify-content:center}.stream-canvas{display:block;touch-action:none;aspect-ratio:9 / 16;max-height:100%;max-width:100%;width:auto;height:100%}.app-container{display:flex;flex-direction:column;height:100vh;background:#000;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 24px;background:var(--bg-primary);border-bottom:1px solid var(--border);flex-shrink:0}.app-header h1{color:var(--text-primary);font-size:1.125rem;font-weight:600}.back-btn{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);padding:8px 16px;border-radius:var(--radius);font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s}.back-btn:hover{background:var(--bg-elevated)}.status-bar{padding:10px 24px;background:var(--bg-surface);font-size:.875rem;color:var(--text-secondary);border-bottom:1px solid var(--border);flex-shrink:0}.status-bar.connected{background:#22c55e1a;border-color:#22c55e4d;color:#22c55e}.status-bar.error{background:#ef44441a;border-color:#ef44444d;color:#ef4444}:root{--bg-primary: #1C1917;--bg-surface: #292524;--bg-elevated: #3a3633;--border: #44403C;--accent: #F97316;--accent-hover: #ea580c;--text-primary: #E7E5E4;--text-secondary: #A8A29E;--text-muted: #78716C;--radius: 8px;--radius-lg: 12px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Roboto,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.5}.main-content{max-width:1200px;margin:0 auto;padding:48px 24px}.loading-overlay{position:fixed;inset:0;background:#1c1917e6;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100}.loading-overlay.hidden{display:none}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay p{color:var(--text-secondary);margin-top:16px;font-size:.9375rem}@media(max-width:768px){.main-content{padding:32px 16px}}