.app{flex-direction:column;min-height:100vh;display:flex}.header{padding:var(--spacing-xs)var(--spacing-md);background-color:var(--color-surface);border-bottom:1px solid var(--color-surface-light);justify-content:space-between;align-items:center;gap:var(--spacing-sm);display:flex}.header h1{color:var(--color-primary);white-space:nowrap;margin:0;font-size:1.5rem;font-weight:600;line-height:1.2}.header-title-section{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.header-actions{align-items:center;gap:var(--spacing-sm);display:flex}.connection-status{color:var(--color-text-muted);align-items:center;gap:4px;font-size:.7rem;display:flex}.connection-status.connected{color:var(--color-success)}.connection-status.disconnected{color:var(--color-error)}.connection-status.connecting,.connection-status.reconnecting{color:var(--color-warning)}.status-indicator{border-radius:50%;width:6px;height:6px;transition:background-color .5s,opacity .3s}.status-indicator.connected{background-color:var(--color-success);animation:none}.status-indicator.disconnected{background-color:var(--color-error);animation:none}.status-indicator.connecting{background-color:var(--color-warning);animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.main-content{padding:var(--spacing-md)var(--spacing-xl);flex:1}.btn,a.btn{min-height:44px;padding:var(--spacing-sm)var(--spacing-lg);border-radius:var(--radius-md);cursor:pointer;border:2px solid #0000;justify-content:center;align-items:center;font-size:1rem;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.btn:disabled{background-color:var(--color-surface-light);color:#888;cursor:not-allowed}.btn-primary,a.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled),a.btn-primary:hover{background-color:#d13a52}.btn-secondary,a.btn-secondary{background-color:var(--color-secondary);color:#fff;border:1px solid #fff3}.btn-secondary:hover:not(:disabled),a.btn-secondary:hover{background-color:#0c2d4d;border-color:#fff6}.text-muted{color:var(--color-text-muted);font-style:italic}.btn-confirm{background-color:var(--color-success);color:#000;border-color:var(--color-success)}.btn-confirm:hover:not(:disabled){background-color:#45a049;border-color:#45a049;transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.btn-confirm:active{transform:translateY(0)}.btn-cancel{background-color:var(--color-surface-light);color:var(--color-text);border-color:var(--color-surface-light)}.btn-cancel:hover:not(:disabled){background-color:#424242;border-color:#616161;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.btn-cancel:active{transform:translateY(0)}.main-menu{text-align:center;max-width:400px;margin:0 auto}.main-menu h2{margin-bottom:var(--spacing-xl);font-size:2rem}.player-name-input{margin-bottom:var(--spacing-xl)}.player-name-input label{margin-bottom:var(--spacing-sm);font-weight:500;display:block}.player-name-input input{width:100%;padding:var(--spacing-sm)var(--spacing-md);background-color:var(--color-surface);border:1px solid var(--color-surface-light);border-radius:var(--radius-md);color:var(--color-text);font-size:1rem}.player-name-input input:focus{border-color:var(--color-primary);outline:none}.game-options{margin-bottom:var(--spacing-xl)}.advanced-options{margin-bottom:var(--spacing-lg)}.advanced-toggle{width:100%;padding:var(--spacing-sm)var(--spacing-md);background-color:var(--color-surface);border:1px solid var(--color-surface-light);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;text-align:left;font-size:.9rem;transition:background-color .2s,border-color .2s}.advanced-toggle:hover{background-color:var(--color-surface-light);border-color:var(--color-primary)}.advanced-panel{margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:var(--color-surface);border:1px solid var(--color-surface-light);border-radius:var(--radius-md);text-align:left;transition:max-height .3s,opacity .3s,padding .3s;overflow:hidden}.advanced-panel.collapsed{opacity:0;max-height:0;padding:0 var(--spacing-md);border-width:0;margin-top:0}.advanced-panel.expanded{opacity:1;max-height:500px}.form-control{padding:var(--spacing-sm)var(--spacing-md);background-color:var(--color-bg);border:1px solid var(--color-surface-light);border-radius:var(--radius-sm);color:var(--color-text);font-size:1rem}.form-control:focus{border-color:var(--color-primary);outline:none}.form-control::placeholder{color:var(--color-text-muted)}.form-text{color:var(--color-text-muted);font-size:.8rem}.error-message{margin-top:var(--spacing-lg);padding:var(--spacing-md);border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);background-color:#f871711a}.error-toast{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md)var(--spacing-lg);background-color:var(--color-error);color:#fff;border-radius:var(--radius-md);z-index:9999;text-align:center;max-width:80%;animation:.3s ease-out slideDown;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0006}.error-toast .dismiss{color:inherit;cursor:pointer;opacity:.7;background:0 0;border:none;flex-shrink:0;padding:0 4px;font-size:1rem;line-height:1}.error-toast .dismiss:hover,.error-toast .dismiss:focus-visible{opacity:1}@keyframes slideDown{0%{opacity:0;transform:translate(-50%)translateY(-100%)}to{opacity:1;transform:translate(-50%)translateY(0)}}.loading{height:200px;color:var(--color-text-muted);justify-content:center;align-items:center;display:flex}.join-error-page,.rejoin-error-page,.join-code-page{text-align:center;padding:var(--spacing-xl)}.sticky-header-group{z-index:200;position:sticky;top:0}.connection-overlay{z-index:100000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.connection-modal{background:var(--color-bg);border-radius:var(--radius-lg);text-align:center;border:2px solid #e74c3c;max-width:450px;padding:32px 48px;box-shadow:0 8px 32px #e74c3c4d}.connection-icon{margin-bottom:16px;font-size:48px}.connection-spinner{animation:1s linear infinite spin;display:inline-block}.connection-title{color:#e74c3c;margin:0 0 12px;font-size:24px;font-weight:600}.connection-message{color:var(--color-text-muted);margin:0 0 24px;font-size:14px;line-height:1.5}.connection-refresh-btn{color:#fff;border-radius:var(--radius-md);cursor:pointer;background:#e74c3c;border:none;padding:12px 32px;font-size:16px;font-weight:500;transition:background .2s}.connection-refresh-btn:hover{background:#c0392b}.connection-retry-info{color:#888;margin-top:8px;font-size:12px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.color-cube-btn{cursor:pointer;background:0 0;border:none;margin:0;padding:0;line-height:0;display:inline}