*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-card: #1e293b;--bg-hover: #334155;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-primary: #3b82f6;--accent-primary-hover: #2563eb;--accent-success: #22c55e;--accent-danger: #ef4444;--accent-warning: #f59e0b;--border-color: #334155;--border-radius: 12px;--border-radius-sm: 8px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -2px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -4px rgba(0, 0, 0, .3)}html{font-size:16px}body{font-family:var(--font-family);background:linear-gradient(135deg,var(--bg-primary) 0%,#1a1a2e 100%);color:var(--text-primary);min-height:100vh;line-height:1.5}#app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}.container{width:100%;max-width:600px}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:2.5rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.5rem}.subtitle{color:var(--text-secondary);font-size:1.1rem}.loading{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3rem;color:var(--text-secondary)}.spinner{width:32px;height:32px;border:3px solid var(--border-color);border-top-color:var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-panel{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;background:var(--bg-card);border:1px solid var(--accent-danger);border-radius:var(--border-radius);text-align:center}.error-icon{font-size:2rem}.error-text{color:var(--accent-danger);font-weight:500}button{font-family:var(--font-family);font-size:.9rem;font-weight:600;padding:.6rem 1.25rem;border-radius:var(--border-radius-sm);border:none;cursor:pointer;transition:all .2s}.btn-secondary{background:var(--bg-hover);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-primary);border-color:var(--text-muted)}.btn-sm{padding:.5rem 1rem;font-size:.85rem}.games-grid{display:flex;flex-direction:column;gap:1rem}.game-card{display:flex;align-items:center;gap:1.25rem;padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:all .2s;text-decoration:none;color:inherit}.game-card:hover{border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.game-card-icon{font-size:2.5rem;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);border-radius:var(--border-radius-sm);flex-shrink:0}.game-card-content{flex:1;min-width:0}.game-card-title{font-size:1.25rem;font-weight:600;margin-bottom:.25rem;color:var(--text-primary)}.game-card-description{font-size:.9rem;color:var(--text-secondary);margin-bottom:.5rem}.game-card-meta{display:flex;gap:.75rem}.player-count{font-size:.75rem;color:var(--text-muted);background:var(--bg-hover);padding:.2rem .6rem;border-radius:9999px}.game-card-arrow{font-size:1.5rem;color:var(--text-muted);transition:transform .2s,color .2s}.game-card:hover .game-card-arrow{color:var(--accent-primary);transform:translate(4px)}.no-games{text-align:center;padding:3rem;color:var(--text-muted);background:var(--bg-card);border:1px dashed var(--border-color);border-radius:var(--border-radius)}.footer{margin-top:2rem;text-align:center;font-size:.8rem;color:var(--text-muted)}.footer span{color:var(--text-secondary);font-family:SF Mono,Fira Code,Consolas,monospace}.hidden{display:none!important}@media(max-width:640px){#app{padding:1rem}.header h1{font-size:2rem}.game-card{padding:1rem}.game-card-icon{width:48px;height:48px;font-size:1.75rem}.game-card-title{font-size:1.1rem}}