*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#333;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--primary:#667eea;--primary-dark:#5a6fd8;--secondary:#764ba2;--accent:#f093fb;--success:#4ecdc4;--warning:#ffe66d;--error:#ff6b6b;--info:#74b9ff;--white:#fff;--gray-50:#f8f9fa;--gray-100:#e9ecef;--gray-200:#dee2e6;--gray-300:#ced4da;--gray-400:#adb5bd;--gray-500:#6c757d;--gray-600:#495057;--gray-700:#343a40;--gray-800:#212529;--gray-900:#000;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--transition-fast:150ms ease-in-out;--transition-normal:250ms ease-in-out;--transition-slow:350ms ease-in-out}.container{max-width:1200px;margin:0 auto;padding:0 var(--space-4)}.card{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-6);border:1px solid var(--gray-200)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-6);border:none;border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:600;text-decoration:none;cursor:pointer;transition:all var(--transition-fast);min-height:44px;touch-action:manipulation}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--primary) 0,var(--secondary) 100%);color:var(--white);box-shadow:var(--shadow-md)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{background:var(--white);color:var(--gray-700);border:2px solid var(--gray-300)}.btn-secondary:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.btn-success{background:var(--success);color:var(--white)}.btn-warning{background:var(--warning);color:var(--gray-800)}.btn-error{background:var(--error);color:var(--white)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--font-size-lg);border-radius:var(--radius-xl)}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);border-radius:var(--radius-md)}.input{width:100%;padding:var(--space-3) var(--space-4);border:2px solid var(--gray-300);border-radius:var(--radius-lg);font-size:var(--font-size-base);transition:border-color var(--transition-fast);min-height:44px}.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(102,126,234,.1)}.select{width:100%;padding:var(--space-3) var(--space-4);border:2px solid var(--gray-300);border-radius:var(--radius-lg);font-size:var(--font-size-base);background:var(--white);cursor:pointer;min-height:44px}.select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(102,126,234,.1)}@media (max-width:640px){.container{padding:0 var(--space-3)}.card{padding:var(--space-4);border-radius:var(--radius-lg)}.btn{padding:var(--space-4) var(--space-6);font-size:var(--font-size-lg)}.btn-lg{padding:var(--space-5) var(--space-8);font-size:var(--font-size-xl)}}.fade-in{animation:fadeIn var(--transition-normal) ease-in-out}.slide-up{animation:slideUp var(--transition-normal) ease-out}.bounce-in{animation:bounceIn var(--transition-slow) ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}.spinner{width:20px;height:20px;border-top:2px solid var(--gray-300);border:2px solid var(--gray-300);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.status-connected{color:var(--success)}.status-connecting{color:var(--warning)}.status-disconnected{color:var(--error)}.status-slow{color:var(--warning)}.game-card{background:var(--white);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-lg);border:2px solid transparent;transition:all var(--transition-fast);cursor:pointer}.game-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--primary)}.game-card.selected{border-color:var(--primary);background:linear-gradient(135deg,rgba(102,126,234,.1),rgba(118,75,162,.1))}.avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:600;color:var(--white);text-shadow:0 1px 2px rgba(0,0,0,.3)}.avatar-sm{width:32px;height:32px;font-size:var(--font-size-sm)}.avatar-md{width:48px;height:48px;font-size:var(--font-size-base)}.avatar-lg{width:64px;height:64px;font-size:var(--font-size-lg)}.avatar-xl{width:80px;height:80px;font-size:var(--font-size-xl)}